CSS3: Añade Sombra a las cajas de texto

css edit

Una de las nuevas funciones disponibles con CSS3 es box-shadow por la que puedes añadir sobre a las cajas de texto o contenedores con CSS. Esta función ya está añadida en Safari 3 y Firefox 3.1 por lo que la puedes incluir en tus diseños sin problema.

Esta propiedad toma 2 valores de largo y un color. box-shadow toma 3 propiedades:

  • offset horizontal: el valor positivo significará que la sombra se situará a la derecha del elemento y una valor negativo a la izquierda del mismo.
  • offset vertical: que tomará un valor negativo para colocar la sombra por encima del elemento y un calor positivo por debajo del mimo.
  • blur radios: este parámetro con valor 0 cojerá la máxima definición para la sobra y conforme subamos en número ofrecerá un aspecto más difuminado.

Ahora vamos a ver un ejemplo de uso: (tras el salto)

[html]

Esto es un ejemplo de box-shadow…

[/html]

Fuente css3.info

Ir arriba