Marcos para imágenes (2): after-before

Continuando con los sistemas para generar clases CSS que nos permitan añadir fácilmente un marco gráfico a nuestras imágenes desde la hoja de estilo, hoy veremos un par de métodos más con los que despacharemos el asunto de otra manera con la que complicaremos menos la parte HTML.

Para ello utilizaremos las pseudoclases :before y :after como recurso para ir añadiendo las distintas piezas del puzzle que nos permitirán construir el marco completo.

Para el rompecabezas vamos a usar estas cuatro imágenes que hemos encontrado en este blog de Tumblr. Están diseñadas para imágenes de 400px y una de ellas -la de abajo a la izquierda- es un .gif con transparencia por lo que explicaremos después.

Para luego hacer referencia a ellas consideremos que las de la izquierda son la 1, 2, 3 y 4 (de arriba hacia abajo) y la de la derecha la 5.

Lo que pretendemos es usar el mínimo de capas HTML para ir montando el marco y por eso el siguiente código:

.marcocss {
position: relative;
display: block;
width: 560px;
padding: 82px 0 82px 0;
margin: 0 auto;
background: url(http://1.bp.blogspot.com/-lJMsXKBhnvs/T_niO0OSOmI/AAAAAAAADYs/0BPkbcRaJQQ/s1600/marco-corto.jpg) 0 50%;
}
.marcocss img {
margin:0;
padding:0;
border:0;
}
.marcocss:before {
position: absolute;
top:0;
left:0;
content: url(http://1.bp.blogspot.com/-XsLYBodhy4w/T_niQkCzVzI/AAAAAAAADZE/20nSYtogajA/s1600/marco-top.jpg);
width:560px;
height:86px;
}
.marcocss:after {
position: absolute;
bottom: 86px;
left:0;
content: url(http://1.bp.blogspot.com/-fi-dS9vk9j4/T_zDCiTsG2I/AAAAAAAADgg/gZ-gK0wyRm8/s1600/marco-base.gif);
width:560px;
height:82px;
}
.largo{
background: url(http://1.bp.blogspot.com/-Ux3M-gJ3hog/T_niPUlMwYI/AAAAAAAADY4/Mb-VSztdDTM/s1600/marco-largo.jpg) no-repeat 0 50%;
}

Como veis, en un principio sólo usamos la clase .marcocss. Esta tendrá un ancho igual al de la imagen del marco (560px) y le aplicamos un padding arriba y abajo de 82px para dejar espacio para el resto de piezas.

Como fondo usaremos inicialmente la imagen 2, que es la que forma los laterales y que situamos verticalmente centrada con ese 0 50%. Un position: relative; nos ayudará posteriormente a poder colocar adecuadamente el resto de elementos dentro de esta capa.

Luego reseteamos posibles estilos heredados en las imágenes de la hoja de estilo general con .marcocss img y esas propiedades que veis con valores cero.

Con .marcocss:before ya colocamos la imagen que forma la parte superior (número 1). El posicionamiente absoluto lo será con respecto a .marcocss, que para eso antes le hemos colocado el relative. Si no lo hubiéramos hecho, estos elementos se nos posicionarían con respecto a la página y este en concreto, en la parte de arriba a la izquierda de la ventana. Dónde no queremos, vaya.

.marcocss:after tiene exactamente la misma utilidad que el anterior pero para formar la parte inferior. En este caso usamos bottom, para situar contando desde abajo. Esta imagen es el .gif con transparencia antes numerada como 4. El motivo de que se necesite que sea transparente en la parte que va a ocupar la imagen principal, es porque de otra manera, parte de la imagen quedaría tapada por esta pieza.


Con todo esto ya sólo resta añadir la clase marcocss a nuestra capa de imagen para que quede enmarcada, cosa fácil una vez metido lo anterior en nuestra parte de estilo. En verde el lugar dónde incluirla:

<div class="separator marcocss" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-bTFEBDIENCg/T_ni47PvSiI/AAAAAAAADZQ/jeM4gYMWepo/s1600/6-3d-art-600x450.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="http://2.bp.blogspot.com/-bTFEBDIENCg/T_ni47PvSiI/AAAAAAAADZQ/jeM4gYMWepo/s400/6-3d-art-600x450.jpg" width="400" /></a></div>

Si quisiéramos utilizar leyendas, entonces habría que incluir la clase marcocss dentro del td correspondiente a la imagen principal, añadiendo la etiqueta class:

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td class="marcocss" style="text-align: center;"><a href="http://3.bp.blogspot.com/-NRrvsMU_WP8/T_muCJQvMSI/AAAAAAAADYE/bPrifhrNZYE/s1600/rascacielos.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="250" src="http://3.bp.blogspot.com/-NRrvsMU_WP8/T_muCJQvMSI/AAAAAAAADYE/bPrifhrNZYE/s400/rascacielos.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Star Workers</td></tr>
</tbody></table>

Star Workers

---

Alguien se preguntará para que sirve ese .largo que hemos incluido en el primer trozo de código. Pues sirve cambiar los laterales en las imágenes tan largas que superan la longitud que nos permite la imagen 2.

Para esos casos incluimos una clase adicional y así la imagen que se usará será la número 5. Se podría haber hecho más larga la 2, pero esta da un mejor resultado con esa voluta que lleva hacia la mitad.

<div class="separator marcocss largo" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-TbzJxMIbrjA/T_njh3146yI/AAAAAAAADZo/BVORuMyDe5k/s1600/play.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-TbzJxMIbrjA/T_njh3146yI/AAAAAAAADZo/BVORuMyDe5k/s1600/play.jpg" width="400" /></a></div>

---

Algún espabilao ya se habrá dado cuenta así que lo siguiente es para los que no. Como prácticamente usamos una sola clase para hacer el marco (marcocss), el a veces molesto código que Blogger nos inserta cuando subimos una imagen con el editor, en esta ocasión nos puede venir bien para no tener que añadir nada a mano.

Como podéis comprobar, todas las imágenes que no van en tablas incorporan automáticamente una capa exterior mediante un div con la clase separator. ¿Por qué? Pues no sé exactamente, cosas de Blogger, pero nosotros nos podemos aprovechar de ello.

Lo único que habría que hacer si este tipo de marcos los vamos a usar con TODAS las imágenes, sería usar el mismo CSS pero aplicado a la clase separator en lugar de crear la nueva marcocss que propuse. O sea, esto:

.separator {
position: relative;
display: block;
width: 560px;
padding: 82px 0 82px 0;
margin: 0 auto;
background: url(http://1.bp.blogspot.com/-lJMsXKBhnvs/T_niO0OSOmI/AAAAAAAADYs/0BPkbcRaJQQ/s1600/marco-corto.jpg) 0 50%;
}
.separator img {
margin:0;
padding:0;
border:0;
}
.separator:before {
...
etc.

Si se usa este método alternativo, para las imágenes dentro de tablas habrá que seguir añadiendo a mano dentro del td una etiqueta class, pero en este caso con la clase separator. El largo siempre habrá que añadirlo a mano.

---

Todavía hay una cosilla más que os quiero comentar. Si las imágenes tienen enlace (el caso normal en Blogger), podemos omitir el uso de transparencia para esa imagen (4) que formaba el marco inferior.

Para ello usaríamos dos :before y así no se solaparía en ningún caso por encima de la imagen principal. Como no podemos dar estilos distintos a clases idénticas, el segundo :before para la base del marco iría sobre el enlace.

De esta manera, en el código CSS visto habría que eliminar el .marcocss:after y todas sus propiedades, y en su lugar usar esto otro. Como podéis comprobar, el background ahora tiene un .jpg sin transparencias que sería la imagen 3:

.marcocss a:before{
position: absolute;
bottom: 86px;
left:0;
content: url(http://1.bp.blogspot.com/-Z_SS3VA3jr4/T_niO9UWVrI/AAAAAAAADYg/MYxcX4wrq_I/s1600/marco-base.jpg);
width:560px;
height:82px;
}

Este ejemplo es ya con esa modificación y como veis, funciona igual:

---

Si quieres ver otro sistema más clásico para hacer prácticamente lo mismo, sólo tienes que ver la primera parte sobre marcos para imágenes.

E iba a ser para esta segunda parte, pero me he enrrollado tanto que queda para una tercera entrada el cómo utilizar la propiedad css border-image, más sencilla de codificar, con menor requerimiento de imágenes, pero que no es soportada por los navegadores antiguos. El anterior sistema al menos es compatible hasta IE8 que es con el que lo he comprobado.

¿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.

Compartir

Google+

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Google+

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter