SummArg | Cursos y recursos para webmasters

13/10/2010

Múltiples bordes y fondos con CSS 2.1

Agregar múltiples bordes a un elemento sin utilizar imágenes es posibles gracias a las pseudo clases :after y :before. La condición para ello es colocar el atributo position:relative al elemento del cual partiremos y position:absolute a las pseudo clases que nos ayudarán a lograr el efecto.

Veamos el primer elemento:

#borders {
   position:relative;
   z-index:1;
   padding:30px;
   border:5px solid #f00;
   background:#ff9600;
}

Ahora los pseudo elementos deberán ubicarse a determinada distancia de los bordes iniciales, esto lo lograremos colocando en el z-index un número negativo y colocando a los bordes un valor que los distinga entre si.

#borders:before {
   content:"";
   position:absolute;
   z-index:-1;
   top:5px;
   left:5px;
   right:5px;
   bottom:5px;
   border:5px solid #ffea00;
   background:#4aa929;
}
#borders:after {
   content:"";
   position:absolute;
   z-index:-1;
   top:15px;
   left:15px;
   right:15px;
   bottom:15px;
   border:5px solid #00b4ff;
   background:#fff;
}

Podemos ver un demo interesante aquí.

Este mismo concepto se utiliza para crear fondos a partir de múltiples elementos. Utilizando el eje Z manejamos la posición de las capas-elementos-pseudo elementos y con ello nos ayudamos en la construcción de un fondo con la posibilidad de implementar interesantes efectos, como los que podemos ver en este link.

A modo de ejemplo veamos el trabajo realizado en Silverback 2.0 en donde el fondo se logra combinando diferentes objetos gracias a las pseudo clases en un único background.


El elemento debe tener position:relative y z-index:1, tal como lo vimos en el primer elemento del caso de los bordes.

#silverback {
   position:relative;
   z-index:1;
   min-width:200px;
   min-height:200px;
   padding:120px 200px 50px;
   background:#d3ff99 url(vines-back.png) -10% 0 repeat-x;
}

Para los pseudo elementos debemos indicar position:absolute y z-index:-1, llevandolos detrás de la capa del elemento padre pero permitiendo que sean seleccionables.

#silverback:before,
#silverback:after {
   position:absolute;
   z-index:-1;
   top:0;
   left:0;
   right:0;
   bottom:0;
   padding-top:100px;
}

Acto seguido agregaremos las imagenes de dichas pseudo clases con la salvedad de que utilizaremos la propiedad content para agregar mas imagenes a nuestras capas.

#silverback:before {
   content:url(gorilla-1.png);
   padding-left:3%;
   text-align:left;
   background:transparent url(vines-mid.png) 300% 0 repeat-x;
}
#silverback:after {
   content:url(gorilla-2.png);
   padding-right:3%;
   text-align:right;
   background:transparent url(vines-front.png) 70% 0 repeat-x;
}

Para mas información les recomiendo visitar nicolasgallagher.com. Visto en elwebmaster.com

Dejar un comentario