Esta propiedad debe ir siempre precedida al menos de un border-width que fije el ancho que va a tener el borde y es conveniente que sea un border con todos sus valores de ancho, forma y color para el caso de navegadores no compatibles. De esta manera al menos saldrá siempre un borde corriente si ese es nuestro deseo.
El ancho, como es habitual, puede ser definido individualmente determinando distintos valores para las diferentes áreas con border-width-top, border-width-right, etc.
Hoy no vamos a entrar en profundidad en todas las posibilidades de border-image, así que para lo que queremos basta con saber que la expresión mínima sería esta:
border-image: url(direccion_imagen) recorte_imagen(px);
Con todo esto ya podemos hacer nuestro primer borde gráfico añadiendo esto a nuestra hoja de estilo:
.borderimg1 img {
border: 60px solid black;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HAG-fLWcUotZ4PLkz5pRuOiORwe4Mf55uoAGLmdY6VdDHLKUf_SSeJuhvyjLzJJLPWUDS1rS1mWWRj2oq6oDJULOg3ggc9QaT_ugus8GRr0FKJ6hjN24uBeuZcDvWxpeClttzXo1cAKU/s1600/marco300.gif) 36;
}
border: 60px solid black;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HAG-fLWcUotZ4PLkz5pRuOiORwe4Mf55uoAGLmdY6VdDHLKUf_SSeJuhvyjLzJJLPWUDS1rS1mWWRj2oq6oDJULOg3ggc9QaT_ugus8GRr0FKJ6hjN24uBeuZcDvWxpeClttzXo1cAKU/s1600/marco300.gif) 36;
}
Para aplicar estos bordes hay que meter la imagen dentro de una capa con la nueva clase que hemos creado, así que para los que no lo tengan claro aquí va la parte HTML y a continuación lo que se vería.
<div class="separator borderimg1" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/NPd4P/s1600/lont3vr4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/NPd4P/s500/lont3vr4.jpg" width="500" /></a></div>
<a href="http://2.bp.blogspot.com/NPd4P/s1600/lont3vr4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/NPd4P/s500/lont3vr4.jpg" width="500" /></a></div>
Cómo en Blogger tenemos el conocido separator de serie, aproveché para insertar ahí la nueva clase y no tener que crear una capa adicional. Y sí, también podemos aplicar las propiedades que vimos al principio directamente a la clase separator y ahorrarnos ir metiendo a mano una nueva clase imagen por imagen. Eso sí, el estilo se aplicará a todas en ese caso.
Si usamos el código mínimo para mostrar una imagen lo anterior quedaría así:
<div class="borderimg1">
<img src="http://2.bp.blogspot.com/NPd4P/s500/lont3vr4.jpg"/>
</div>
<img src="http://2.bp.blogspot.com/NPd4P/s500/lont3vr4.jpg"/>
</div>
Y ahora veamos lo que hemos hecho para poder aplicarlo de forma genérica.
En primer lugar se ha definido un borde normal de 60px sólido de color negro. Eso será lo que se vea cuando el navegador no soporte border-image. Cuando lo haga, simplemente interpretará el primer valor, el que se refiere al ancho del marco, 60px en todas direcciones en el ejemplo.
En la propiedad border-image es dónde se ha indicado la dirección de la imagen de fondo, el recorte de la parte periférica de dicha imagen (nótese que se escribe sin la abreviatura px) y el modo de redimensión.La imagen utilizada para el fondo es esta de la izquierda, que aquí se muestra reducida de tamaño pero que podéis ver a tamaño original pinchando en ella
El recorte se refiere a la parte de la imagen que usaremos como borde. En esta se han tomado 36px porque esa es la medida que hay desde los bordes hasta la recta interior que delimitará la imagen principal (ver esquema a la derecha). En los cuatro lados es la misma y lo más fácil es usar imágenes con esta característica.Reitero que en esta propiedad, el número de píxeles se expresa sólo con un número, sin añadir px.
Comparando la imagen de fondo original y el resultado que anteriormente vimos, se puede comprobar cómo los lados izquierdo y derecho se han acortado automáticamente lo necesario para que el marco no supere el alto de la imagen enmarcada.
Con los extremos inferior y superior ha ocurrido al contrario, alargándose hasta ocupar toda la longitud de la imagen principal. Ambas redimensiones las ha provocado un tercer valor que no hemos incluido pero que por defecto hace esto. El valor en cuestión es stretch (elasticidad).
Como las imágenes de fondo se redimensionarán lo que sea necesario, resulta importante que estas tengan un tamaño suficientemente grande (sin pasarse) porque como podéis comprobar en este ejemplo, al ampliarse se puede perder bastante definición.
Conveniente pero no imprescindible, es que repitamos la línea del border-image con los distintos prefijos de los diferentes navegadores para aumentar la compatibilidad. Ya, es una tarea tediosa pero si queremos que más gente pueda ver el efecto, no hay más remedio mientras muchos sigan sin actualizar sus navegadores.
.borderimg1 img {
border: 60px solid black;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HAG-fLWcUotZ4PLkz5pRuOiORwe4Mf55uoAGLmdY6VdDHLKUf_SSeJuhvyjLzJJLPWUDS1rS1mWWRj2oq6oDJULOg3ggc9QaT_ugus8GRr0FKJ6hjN24uBeuZcDvWxpeClttzXo1cAKU/s1600/marco300.gif) 36;
-o-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HAG-fLWcUotZ4PLkz5pRuOiORwe4Mf55uoAGLmdY6VdDHLKUf_SSeJuhvyjLzJJLPWUDS1rS1mWWRj2oq6oDJULOg3ggc9QaT_ugus8GRr0FKJ6hjN24uBeuZcDvWxpeClttzXo1cAKU/s1600/marco300.gif) 36;
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HAG-fLWcUotZ4PLkz5pRuOiORwe4Mf55uoAGLmdY6VdDHLKUf_SSeJuhvyjLzJJLPWUDS1rS1mWWRj2oq6oDJULOg3ggc9QaT_ugus8GRr0FKJ6hjN24uBeuZcDvWxpeClttzXo1cAKU/s1600/marco300.gif) 36;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HAG-fLWcUotZ4PLkz5pRuOiORwe4Mf55uoAGLmdY6VdDHLKUf_SSeJuhvyjLzJJLPWUDS1rS1mWWRj2oq6oDJULOg3ggc9QaT_ugus8GRr0FKJ6hjN24uBeuZcDvWxpeClttzXo1cAKU/s1600/marco300.gif) 36;
}
border: 60px solid black;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HAG-fLWcUotZ4PLkz5pRuOiORwe4Mf55uoAGLmdY6VdDHLKUf_SSeJuhvyjLzJJLPWUDS1rS1mWWRj2oq6oDJULOg3ggc9QaT_ugus8GRr0FKJ6hjN24uBeuZcDvWxpeClttzXo1cAKU/s1600/marco300.gif) 36;
-o-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HAG-fLWcUotZ4PLkz5pRuOiORwe4Mf55uoAGLmdY6VdDHLKUf_SSeJuhvyjLzJJLPWUDS1rS1mWWRj2oq6oDJULOg3ggc9QaT_ugus8GRr0FKJ6hjN24uBeuZcDvWxpeClttzXo1cAKU/s1600/marco300.gif) 36;
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HAG-fLWcUotZ4PLkz5pRuOiORwe4Mf55uoAGLmdY6VdDHLKUf_SSeJuhvyjLzJJLPWUDS1rS1mWWRj2oq6oDJULOg3ggc9QaT_ugus8GRr0FKJ6hjN24uBeuZcDvWxpeClttzXo1cAKU/s1600/marco300.gif) 36;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HAG-fLWcUotZ4PLkz5pRuOiORwe4Mf55uoAGLmdY6VdDHLKUf_SSeJuhvyjLzJJLPWUDS1rS1mWWRj2oq6oDJULOg3ggc9QaT_ugus8GRr0FKJ6hjN24uBeuZcDvWxpeClttzXo1cAKU/s1600/marco300.gif) 36;
}
.borderimg3 img {border-width: 82px;
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifeJa6qoRRj9B0RzGY2eqHoJinumCv7-BHnfvquhGrrRU0CHi7eGZVPF2IhOR3DvJY3CnJVfrWcfRo7zWA1arGhojFV1AKKbK7qYktHFptzo6inMM4A_vJsH-f5y81BtrWTovseaB8gp7/s1600/sun.gif) 82;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifeJa6qoRRj9B0RzGY2eqHoJinumCv7-BHnfvquhGrrRU0CHi7eGZVPF2IhOR3DvJY3CnJVfrWcfRo7zWA1arGhojFV1AKKbK7qYktHFptzo6inMM4A_vJsH-f5y81BtrWTovseaB8gp7/s1600/sun.gif) 82;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifeJa6qoRRj9B0RzGY2eqHoJinumCv7-BHnfvquhGrrRU0CHi7eGZVPF2IhOR3DvJY3CnJVfrWcfRo7zWA1arGhojFV1AKKbK7qYktHFptzo6inMM4A_vJsH-f5y81BtrWTovseaB8gp7/s1600/sun.gif) 82;}
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifeJa6qoRRj9B0RzGY2eqHoJinumCv7-BHnfvquhGrrRU0CHi7eGZVPF2IhOR3DvJY3CnJVfrWcfRo7zWA1arGhojFV1AKKbK7qYktHFptzo6inMM4A_vJsH-f5y81BtrWTovseaB8gp7/s1600/sun.gif) 82;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifeJa6qoRRj9B0RzGY2eqHoJinumCv7-BHnfvquhGrrRU0CHi7eGZVPF2IhOR3DvJY3CnJVfrWcfRo7zWA1arGhojFV1AKKbK7qYktHFptzo6inMM4A_vJsH-f5y81BtrWTovseaB8gp7/s1600/sun.gif) 82;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifeJa6qoRRj9B0RzGY2eqHoJinumCv7-BHnfvquhGrrRU0CHi7eGZVPF2IhOR3DvJY3CnJVfrWcfRo7zWA1arGhojFV1AKKbK7qYktHFptzo6inMM4A_vJsH-f5y81BtrWTovseaB8gp7/s1600/sun.gif) 82;}
.borderimg2 img {border-width: 78px;
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-uEDsM6BHUlKj6hui5V2XGRoYqKE6qVWCpQi5aVTdDfoWi_itdfxbLjkcSUNNEFYHI6z6E1Un4QYc8st1sY40mTAZ2fAFe92d5U1eVZ2IKn-AIfURH1FhQ-TxW7uiD17CwdbO4KTNuUdZ/s1600/marco.png) 78;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-uEDsM6BHUlKj6hui5V2XGRoYqKE6qVWCpQi5aVTdDfoWi_itdfxbLjkcSUNNEFYHI6z6E1Un4QYc8st1sY40mTAZ2fAFe92d5U1eVZ2IKn-AIfURH1FhQ-TxW7uiD17CwdbO4KTNuUdZ/s1600/marco.png) 78;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-uEDsM6BHUlKj6hui5V2XGRoYqKE6qVWCpQi5aVTdDfoWi_itdfxbLjkcSUNNEFYHI6z6E1Un4QYc8st1sY40mTAZ2fAFe92d5U1eVZ2IKn-AIfURH1FhQ-TxW7uiD17CwdbO4KTNuUdZ/s1600/marco.png) 78;}
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-uEDsM6BHUlKj6hui5V2XGRoYqKE6qVWCpQi5aVTdDfoWi_itdfxbLjkcSUNNEFYHI6z6E1Un4QYc8st1sY40mTAZ2fAFe92d5U1eVZ2IKn-AIfURH1FhQ-TxW7uiD17CwdbO4KTNuUdZ/s1600/marco.png) 78;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-uEDsM6BHUlKj6hui5V2XGRoYqKE6qVWCpQi5aVTdDfoWi_itdfxbLjkcSUNNEFYHI6z6E1Un4QYc8st1sY40mTAZ2fAFe92d5U1eVZ2IKn-AIfURH1FhQ-TxW7uiD17CwdbO4KTNuUdZ/s1600/marco.png) 78;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-uEDsM6BHUlKj6hui5V2XGRoYqKE6qVWCpQi5aVTdDfoWi_itdfxbLjkcSUNNEFYHI6z6E1Un4QYc8st1sY40mTAZ2fAFe92d5U1eVZ2IKn-AIfURH1FhQ-TxW7uiD17CwdbO4KTNuUdZ/s1600/marco.png) 78;}
.borderimg4 img {border-width: 96px;
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvgz-WaJlkT-ByywIwMBV0jEJyfLWdaKD6GsJyRULkXzzoGOzK2PRtKitFAQw93UqOUaw2-sluHp8-O3ytiBsa_bqL2Nh4k9dY45QswxGp3jxbsYGVILRn8K1wSUpIEhhVgelUidn2go/s1600/ramas.jpg) 96;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvgz-WaJlkT-ByywIwMBV0jEJyfLWdaKD6GsJyRULkXzzoGOzK2PRtKitFAQw93UqOUaw2-sluHp8-O3ytiBsa_bqL2Nh4k9dY45QswxGp3jxbsYGVILRn8K1wSUpIEhhVgelUidn2go/s1600/ramas.jpg) 96;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvgz-WaJlkT-ByywIwMBV0jEJyfLWdaKD6GsJyRULkXzzoGOzK2PRtKitFAQw93UqOUaw2-sluHp8-O3ytiBsa_bqL2Nh4k9dY45QswxGp3jxbsYGVILRn8K1wSUpIEhhVgelUidn2go/s1600/ramas.jpg) 96;}
-webkit-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvgz-WaJlkT-ByywIwMBV0jEJyfLWdaKD6GsJyRULkXzzoGOzK2PRtKitFAQw93UqOUaw2-sluHp8-O3ytiBsa_bqL2Nh4k9dY45QswxGp3jxbsYGVILRn8K1wSUpIEhhVgelUidn2go/s1600/ramas.jpg) 96;
-moz-border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvgz-WaJlkT-ByywIwMBV0jEJyfLWdaKD6GsJyRULkXzzoGOzK2PRtKitFAQw93UqOUaw2-sluHp8-O3ytiBsa_bqL2Nh4k9dY45QswxGp3jxbsYGVILRn8K1wSUpIEhhVgelUidn2go/s1600/ramas.jpg) 96;
border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvgz-WaJlkT-ByywIwMBV0jEJyfLWdaKD6GsJyRULkXzzoGOzK2PRtKitFAQw93UqOUaw2-sluHp8-O3ytiBsa_bqL2Nh4k9dY45QswxGp3jxbsYGVILRn8K1wSUpIEhhVgelUidn2go/s1600/ramas.jpg) 96;}
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Amigo Oloman,
ResponderEliminarTengo un problema. De un tiempo acà, cuando miro la lista de los "Blogs que sigo", no aparece mi última ENTRADA, SINO UNA DE HACE MÁS DE UN MES, ENTRADA QUE APARECE.
No sé a qué puede deberse eso de que la lista no se actualiza. Te estaré muy agradecido si puedes ayudarme.
Te envío un afectuoso saludo.
Antonio
No estoy familiarizado con ese gadget, pero utiliza la solución universal: reiniciar. Es decir, borra tu blog de la lista y vuélvelo a incorporar.
EliminarSi hay que introducir una dirección, utiliza la terminada en .com (http://antoniomartnortiz.blogspot.com). Si es un feed, entonces usa este: http://antoniomartnortiz.blogspot.com/feeds/posts/default
Hola,
ResponderEliminarMe gustaría colocar uno en mi blog, pero no precisamente para las imágenes sino para el body, quisiera colocar unas "blonditas" rosaditas iguales a las que aparecen a los costados de este blog → http://kawaiidream.blog126.fc2.com . Ojalá puedas ayudarme TTwTT.
Saludos :).
Esa web usa este código CSS para crear esa imagen, pero requiere que tu parte de entradas tenga un ancho fijo de 750px.
ResponderEliminarmargin: 0px;
padding: 0px;
text-align: center;
background-color: #ffffff;
background-image: url(http://4.bp.blogspot.com/-HpvILlxYT2c/TiHbM7JZVKI/AAAAAAAAAkc/8yy3CNHaADY/s1600/menu-750-bg.jpg);
background-repeat: repeat-y;
background-position: center top;
}
Si tu blog es más o menos ancho, entonces tendrás que editar la imagen (http://4.bp.blogspot.com/-HpvILlxYT2c/TiHbM7JZVKI/AAAAAAAAAkc/8yy3CNHaADY/s1600/menu-750-bg.jpg) y ajustarla a tu ancho.
Ok, muchas gracias por responder a mi duda :).
EliminarSolo una cosita más: ¿Podrías, por favor, decirme en donde exactamente debo colocar el código TTwTT? (Este es mi blog → http://lagatabolita.blogspot.com ).
Disculpa mi ignorancia TT^TT.
En la parte CSS de tu plantilla, es decir, entre las etiquetas SKIN.
EliminarAh, y delante de lo que te puse falta
body {
¡¡Muchisisisísimas gracias *[]*-!!
EliminarBueno, no quiero sonar fastidiosa después de toda la ayuda que me has brindado, pero también pasa que cuando coloco el código desaparece la imagen que tenía de fondo y se pone todo blanco ↓
https://lh5.googleusercontent.com/-0K9Zj5s_NJ4/U5ElUsW1UqI/AAAAAAAAAbU/VWOlftCKiWE/w958-h397-no/prueba.png
¿Se puede hacer algo para conservar la imagen que tenía de fondo cuando coloco las blonditas o es imposible? :S.
Disculpa tantas molestias u_u.
Una vez más, tienes que editar la imagen. Esa que me pones de prueba.png, en lugar de ponerle el fondo blanco (o transparente), pónselo con la imagen que quieres.
EliminarOk, ¡infinitas gracias por toda tu ayuda :)!
EliminarHola estoy haciendo un trabajo para la Universidad y nos an hecho imitar un blog y estoy super complicada de como hacer el marco de las publicaciones esas con las imagenes de esta chica esta es una de la imagen que nos pasaron http://24.media.tumblr.com/0ed819ffbdc030bd02f359f02840ab59/tumblr_n782s4wGzZ1t3jgeko1_400.jpg Ayuda porfavor !!! :)))Gracias
ResponderEliminarVi la captura, pero no sé a qué marcos te refieres Claudia. Si es el fondo y contorno violeta, eso se hace añadiendo un simple padding: 100px 20px 20px; al bloque que quieras y un fondo (background: purple;) y de esa manera te queda un espacio alrededor del texto, mucho más grande por arriba.
EliminarLuego para redondear la parte superior, a ese mismo bloque le añades border-radius: 400px 400px 0 0; y un overflow: hidden. Con todo lo anterior te saldrá algo muy parecido, luego sólo es cuestión de ajustar los valores a lo que quieras exactamente.
Muchas Gracias me sirvió mucho :) Solo me queda agregarle las fotos que tiene arriba y abajo donde esta la biografias y los videos eso como lo podría hacer?
EliminarPara eso ya es necesario que incorpores una imagen a la cabecera de cada uno de sus bloques. Se puede hacer de muchas manera pero una sería asignando a la caja contenedora algo así:
ResponderEliminar.cajacontenedora:before {
content: url(DIRECCION_IMAGEN);
}