OmbuShop Crea Tu Tienda Online

CSS: domina las sombras

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Codear sombras en CSS resulta complicado para muchos diseñadores gráficos. El código puede ser críptico a primera vista y la repetición de los vendor-prefixes no ayuda. Veamos cómo se hace!

Existen dos tipos de sombras en CSS: box-shadow y text-shadow. Como sus nombres lo indican, la primera afecta a las cajas del DOM, mientras que la segunda tiene relación al texto contenido en dichas cajas. En el primer caso la sombra proyectada imitará la silueta de la caja (sus puntas redondeadas, por ejemplo), mientras que en el otro caso la silueta proyectada será la del texto, caracter por caracter.

Veamos un ejemplo de box-shadow:

See the Pen qseAJ by Lucas Mourelle (@lucasmourelle) on CodePen.0

Y ahora uno de text-shadow:

See the Pen HftCz by Lucas Mourelle (@lucasmourelle) on CodePen.0

Los anteriores son ejemplos sencillos de lo que se puede hacer con sombras de CSS. Veremos a continuación cuáles son las propiedades que podemos manejar a la hora de utilizar sombras y algunos casos puntuales que resultan interesantes.

Box-shadow

Las sombras de la caja aceptan las siguientes propiedades: en el formato que se ve a continuación:

box-shadow: <color> <offset-x> <offset-y> <blur-radius> <spread-radius> <inset>;

Un ejemplo con datos reales podría ser:

box-shadow: #ff0000 5px 10px 7px 0px inset;

Donde el color es rojo, el offset-x es 5px, el offset-y es 10px, el blur-radius es 7px, el spread-radius es 0px y el inset está indicado.

color

Se trata del color de la sombra. Puede especificarse en cualquiera de las formas con las que podemos especificar un color en CSS. Por ejemplo podemos indicar una sombra transparente indicando el color rgba(0,0,0,0.3) .

offset-x

Es el corrimiento de la sombra en el eje horizontal. Si queremos la sombra proyectada hacia la derecha: utilizaremos números positivos; si la queremos del lado izquierdo: serán números negativos.

offset-y

El corrimiento de la sombra en el eje vertical. La sombra proyectada hacia abajo se logra con números positivos, mientras que la sombra proyectada hacia arriba se logra con números negativos.

blur-radius

Nos permite decidir cuán desenfocada está la sombra. Lograremos una sombra completamente nítida con este valor en cero.

spread-radius

Esta propiedad —cuyo default es cero— nos permite agrandar o achicar la sombra con respecto al objeto que la proyecta. Números positivos agrandarán la sombra, negativos la achicarán.

inset

Es una palabra clave que, de estar presente, indica que la sombra deberá estar en el interior de la caja (en vez de proyectada por fuera). Si la palabra no está presente (situación por default), la sombra estará por fuera de la caja.

Puedes jugar con los valores de las sombras en el código que está a continuación:

See the Pen hjpFo by Lucas Mourelle (@lucasmourelle) on CodePen.0

Text-shadow

El caso de las sombras en el texto es muy similar, pero con menos opciones, a saber:

text-shadow: <color> <offset-x> <offset-y> <blur-radius>;

Un ejemplo con datos reales podría ser:

text-shadow: #ffffff 0px 1px 1px;

Los cuatro valores permitidos en la propiedad text-shadow funcionan igual que en la propiedad box-shadow. Se trata del color, la posición (indicada por offset-xoffset-y) y el blur-radius.

A continuación, un ejemplo para jugar con los valores:

See the Pen ACuak by Lucas Mourelle (@lucasmourelle) on CodePen.0

Múltiples sombras

Algo interesante y poco aprovechado de las sombras, es que pueden aplicarse muchas sombras a un mismo objeto, cada una de las sombras se indica con todos sus valores, separada de la anterior por una coma. Por otra parte, la primera sombra en indicarse será la que estará más arriba, y la última quedará debajo de todo. Aquí algunos ejemplos:

See the Pen qkrwz by Lucas Mourelle (@lucasmourelle) on CodePen.0

See the Pen aqpfi by Lucas Mourelle (@lucasmourelle) on CodePen.0

See the Pen aHybB by Lucas Mourelle (@lucasmourelle) on CodePen.0

¡A experimentar y aplicar sombras en sitios web y tiendas online! 🙂