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%;
}
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>
<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>
<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>
<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.
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;
}
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.
hola, se que no viene al caso, pero queria preguntarte si es que hay alguna manera de adornar los gadgets, ponerles una imagen de fondo o algo.
ResponderEliminarEcha un vistazo a esta entrada. De la misma manera que aquí añadíamos a los gadgets una sombra que simulaba un neón, se le puede añadir un background o fondo. Es sencillo sabiendo la clase CSS que hay que atacar.
Eliminarassignment help for nursing students is one of the toughest tasks students face during their academic life. But, not all students have the capacity to effectively communicate their thoughts and ideas Therefore, in these situations, it is sensible to outsource your task with one of the best assignment writing services like Write My Assignment.
ResponderEliminarI have read this article what a thought related to this field. There is a platform where you can take more Blogs and articles related Technical and non technical Blog at Technomantic .
ResponderEliminarNursing student matching support is one of the most challenging tasks in student life. However, not all students can effectively communicate their thoughts and ideas. So, in this situation, it makes sense to outsource your tasks with one of the best task-creation services, Dissertation help
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarSelect a person you can trust, Trust J&A Today. With over 40+ years of experience in quality air conditioning, our experience and reputation speak for itself. We provide a complete customer satisfaction guarantee on the repair of all air conditioner parts near me and service. Making the investment in the purchase of an air conditioning system is a smart decision. Not only does it increase the value of your property, but it keeps you and your family comfortably all through the year. Air conditioners make excellent for any room (house, apartment, office cabin, etc.) but it's important to choose the right model to fit in the space. Our J&A HVAC technicians will ensure the air conditioning unit is properly installed and maintained for maximum efficiency and performance.
ResponderEliminarMicro batch roasting specifically crafted varieties of specialty strong coffee in Saskatoon and mixing them up was the perfect solution! The perfect blends were born and then marketed by the name of Rampage Coffee Co. - the only coffee strong enough to kick off with a RIOT yet smooth enough to be a resounding yes! Join us on this coffee roasting journey and experience the difference! Rampage Coffee Co. is proudly operated and owned by Saskatoon, SK in Canada
ResponderEliminarWow that's a great images. Kindly Visit Hujjaj Umrah Taxi and tell me images of this site is sketched like this.
ResponderEliminarThe best student assistance is available from Scholar Assignment at reasonable costs. Our top aim is to satisfy customers.Our mission is to deliver high-quality content for research papers, dissertations, essays, and other academic writing. Our comprehensive academic services can meet all of your demands.
ResponderEliminarOur story began with a passion for food and a desire to share it with people. Every day, our chefs combine tried-and-true cooking techniques with seasonal, fresh ingredients to produce meals. We provide best food and have something to satisfy your appetite, whether you're in the mood for the delicate aromas of sushi, the spicy flavours of Thai cuisine, or the cosiness of a warm bowl of soup.
ResponderEliminar