Sombras con CSS3

Si nunca has usado pseudo-elementos este ejercicio te resultaran un poco complicado de entender pero en realidad es muy sencillo.

Los pseudo-elementos permiten referenciar un elemento sin depender del contenido del mismo. Su sintaxis es sencilla 'elemento:pseudo-elemento', aquí por ejemplo, tomamos la clase .drop-shadow y el pseudo-elemento :after y :before '.drop-shadow:after'.

:before y :after permiten añadir un elemento antes y después del elemento referenciado por medio de css.



Nota: La clase .shadow el cuál nos creara el estilo básico como es tamaño del contenedor, color de fondo, etc y que se aplica a todos los ejemplos. Otra clase es .drop-shadow que es quien nos creara el estilo básico pero esta vez de :before y :after además que nos añade el sombreado interior y nos pone el contenedor con posición relativa para poder manejar mejor a los pseudo-elementos a usar (como vemos el primer ejemplo no contiene .drop-shadow y por eso no tiene sombreado, existe como el ejemplo mas sencillo y claro), por tercer y ultima clase tenemos .shadow$ ($ representa el numero que diferencia a cada ejemplo) este añadirá el estilo que creara las sombras de cada ejemplo a excepción del primero.

Si te gusto dale compartir

Publicado el sábado, 31 de agosto de 2013