Sombras

Sombras

Diseño por Computadora

Introducción

Las sombras son un recurso muy importante en el mundo del desarrollo web. En primera instancia, las sombras solo podían aplicarse a textos. Sin embargo, ahora también existen otras propiedades con las que podremos dar sombras a otro tipo de elementos, como etiquetas HTML.

Sombras en Texto

Crear sombras en textos mediante CSS es muy útil, puesto que es una forma interesante de suavizar y hacer más legibles los textos, o simplemente hacerlos más atractivos para el usuario que está viendo la página. Para ello, utilizaremos la propiedad text-shadow. Ahora veremos las diferentes manera de definir esta propiedad y para que se usa cada uno de sus parámetros aceptados.

Sombras en Texto

Desplazamiento de la sombra

Para crear una sombra, los parámetros mínimos que hay que especificar son dos, cada uno indicando una distancia hacia la cual se desplazará la sombra de manera horizontal y vertical. Podemos aplicar cantidades negativas (en cuyo caso la sombra se desplazaría hacia la izquierda o hacia arriba), o cantidades positivas (en cuyo caso la sombra se desplazaría hacia la derecha o hacia abajo). Estos valores no pueden ser porcentajes.

Sombras en Texto

Desenfoque de la sombra

El tercer parámetro de las sombras en text-shadow hace referencia al desenfoque que queremos sobre dicha sombra. Funciona dándole un tamaño , que por defecto es 0, manteniendo la sombra de una forma idéntica al texto original. Sin embargo, a medida que vamos elevando ese tamaño, la sombra estará más desenfocada o difuminada, de forma que la sombra es más borrosa. Si elevamos mucho este valor, llegará un punto en el que la sombra se difuminará tanto, que desaparecerá.

Sombras en Texto

Color de Sombra

Por último, podemos establecer el color de la sombra. Por defecto, su valor es currentColor, que generalmente suele ser black. Sin embargo, nosotros podemos indicar cualquier color en cualquiera de los formatos disponibles:

• hexadecimal
• rgb()
• hsl()
• nombre en inglés.

Sombras en Texto

Sombras múltiples

Es posible utilizar múltiples sombras de texto. Esto nos dará suficiente flexibilidad para crear textos con efectos, bordes o sombras que resultan de aplicar múltiples sombras de fondo con diferentes parámetros. Para ello, simplemente separamos el conjunto de valor con comas:

Sombras en Cajas

Se denominan sombras sobre cajas a las sombras en CSS que se pueden crear en una etiqueta o elemento HTML. Para ello, se utiliza la propiedad box-shadow, que funciona de forma muy similar a la que vimos en las sombras de texto, sólo que con algunos añadidos interesantes.En primer lugar, las sombras box-shadow están desactivadas sobre cualquier elemento, lo mismo que ocurriría si aplicamos el valor none a dicha propiedad. Ahora veamos las manera de usar esta propiedad.

Sombras en Cajas

Desplazamiento de la sombra

Al igual que las sombras de textos, las sombras de cajas requieren cuando menos dos parámetros que representan el desplazamiento horizontal y vertical de la misma.

Sombras en Cajas

Desenfoque de la sombra

El tercer parámetro de la propiedad box-shadow indica la cantidad de desenfoque o difuminado que queremos utilizar en nuestra sombra. Por defecto, tiene un valor de 0, o lo que es lo mismo, la sombra será igual a la caja original, por lo que será completamente lisa, sin difuminar. Este valor puede irse ampliando y de esta forma conseguiremos una sombra más desenfocada:

Sombras en Cajas

Factor de crecimiento

Un cuarto parámetro opcional permite indicar un factor de crecimiento para la sombra. Este valor no es obligatorio escribirlo, y muchas veces comprobarás que el cuarto parámetro de la propiedad box-shadow es el color, es decir, el siguiente apartado, omitiendo este parámetro. Esto es absolutamente normal, ya que este parámetro es opcional y se indica sólo cuando es necesario. En caso contrario, este parámetro valdrá 0 y será omitido.

Sombras en Cajas

Factor de crecimiento

El parámetro de factor de crecimiento es un parámetro donde podemos indicar una unidad que hará crecer la sombra en todos sus lados el tamaño indicado, de forma que crezca un poco más de lo que ocupa. Algo que puede ser realmente útil, por ejemplo, en el caso de que el desplazamiento sea 0 (la sombra está justo detrás del elemento) y queremos que se muestre ligeramente alrededor de la etiqueta a la que le aplicamos box-shadow. Veamos un ejemplo:

Sombras en Cajas

Color de Sombra

Aunque en los ejemplos anteriores lo hemos omitido por el momento, lo habitual es que las sombras creadas con box-shadow incluyan siempre cuatro valores:

• desplazamiento de x
• desplazamiento de y
• nivel de desenfoque
• color de la sombra.

Luego, el factor de crecimiento y la palabra clave inset que veremos posteriormente, son opcionales y se usan sólo cuando son necesarias.

Sombras en Cajas

Sombra Interior

Las sombras creadas con box-shadow permiten indicar la palabra clave inset, lo que hará que la sombra en lugar de colocarse por fuera de nuestro elemento y ser una sombra exterior (por defecto), pasará a ser una sombra interior y colocarse por dentro del elemento. Ten en cuenta que en este caso, los desplazamientos indicados se invierten, de modo que si teníamos una sombra por la zona inferior-derecha, tendríamos que invertir los valores para que la sombra interior también esté en la zona inferior-derecha:

Sombras en Cajas

Sombras múltiples

De la misma forma en que text-shadow nos permite replicar las sombras, box-shadow tiene la misma bondad, por lo que solo colocaremos comas para separa cada sombra a aplicar.