lunes, 30 de mayo de 2011

Sumando sombras

Las sombras que se pueden agregar con la propiedad text-shadow en los navegadores que la soporta, tienen la particularidad de ser aditivas es decir, se pueden ir acumulando sobre el mismo texto, separando las distintas definiciones con una coma.

Así que, empezamos con un texto normal:
<style>
h1.demo3d {
color: #FFF;
font-family: Helvetica,Arial,sans-serif;
font-size: 100px;
text-align: center;
}
</style>

3D Text


y le ponemos una sombra:
text-shadow: 0 10px 0 #ABC;

3D Text


o le ponemos otra sombra:
text-shadow: 1px 13px 0 #456;

3D Text


también podemos ponerle las dos al mismo tiempo:
text-shadow: 0 10px 0 #ABC, 1px 13px 0 #456;

3D Text


donde, el orden es importante ya que si lo invertimos,el resultado será otro:
text-shadow: 1px 13px 0 #456, 0 10px 0 #ABC;

3D Text


y una más con el mismo color del fondo para serpara las dos últimas:
text-shadow: 0 5px 0 #101921, 0 10px 0 #ABC, 1px 13px 0 #456;

3D Text


¿Cuántas se pueden poner? Nadie lo sabe.

No hay comentarios:

Publicar un comentario