ANATOMIA DE LAS CIBERPAGINAS: 👨‍💻 Mis apuntes sobre la aplicación de sombras en CSS

⏩ Snippet: ⏪
👉 Aquí vamos a estudiar como gracias a CSS3. podemos crear increíbles y avanzados efectos de sombra, con solo un par de líneas de código y genera sombras a tus elementos HTML, mejorando el estilo de tu sitio web. . En este artículo repetiremos una caja con diferentes efectos de sombra CSS3 y gracias a CSS3 variaremos dicho efecto.

Una de las carencias del estándar CSS 2.1 más demandadas por los diseñadores es la posibilidad de mostrar sombras tipo "drop shadow" sobre cualquier elemento de la página. Por este motivo, la versión CSS 3 incluye una propiedad llamada box-shadow para crear este tipo de sombras.

Podemos utilizar dos tipos de propiedades, text-shadow y box-shadow. La primera de ellas para sombras en textos, y la segunda para sombras en otro tipo de elementos como cajas o contenedores. Ambas propiedades son prácticamente idénticas, solo con algunas diferencias:

Propiedad	Valor	Significado
`text-shadow`	\| none	Aplica una sombra a un contenido de texto.
`box-shadow`	inset \| none	Aplica una sombra a una caja o contenedor.

Los valores y nos permiten indicar las coordenadas de X e Y donde se situará la sombra, respecto a la posición del texto o contenedor original.
El primer valor es el blur, que no es otra cosa que el radio de desenfoque de la sombra (en px, em, etc...). Cuanto más bajo sea este valor, menos difuminada estará la sombra, cuanto más alto sea, más borrosa.
El segundo valor es el factor de crecimiento de la sombra. En algunos casos, en los que tenemos una sombra con muy poco desenfoque y las posiciones son 0, puede que la sombra quede justo detrás del elemento, sin poderse apreciar. Aumentando este valor, haremos que la sombra crezca hacia los lados el tamaño que indiquemos.
Por último, podemos indicar el a utilizar (recuerda que puedes utilizar canales alfa) y la palabra clave inset si queremos que la sombra sea interna, en lugar de externa que es la que aparece por defecto.

div {
    /* Sombra normal */
    box-shadow: 2px 2px 10px #666;
    /* Sombra superior sin desenfoque */
    box-shadow: 5px -5px 0 2px #444;
    /* Sombra interior */
    box-shadow: 5px 5px 25px #222 inset;
}

Ojo: Ten en cuenta que tanto el de factor de crecimiento como la palabra clave inset sólo están disponibles para box-shadow, ya que text-shadow no posee esos parámetros.

Sombras múltiples

Una característica interesante de la propiedad background en CSS es la posibilidad de indicar fondos multiples separando por comas. En el caso de las sombras, también es posible hacer lo mismo, consiguiendo efectos muy vistosos:

p {
    /* Se indican 3 sombras diferentes */
    text-shadow:
      2px 2px 0 #AAA,
      6px 6px 2px #777,
      12px 12px 8px #444;
}

En el caso de la propiedad box-shadow también se pueden indicar sombras múltiples.

Sombras flexibles

En el módulo de filtros CSS existe una función denominada drop-shadow que puede utilizarse en un filtro. Dicha función permite aplicar una sombra idéntica a un objeto determinado con una forma irregular.

Por ejemplo, podríamos disponer de una imagen PNG con fondo transparente, al que le queremos aplicar una sombra de modo que respete su contorno. Con la propiedad box-shadow la sombra que se aplicaría sería totalmente rectangular, sin embargo, con la propiedad filter y la función drop-shadow (la cuál tiene los mismos parámetros que text-shadow), aplicaría una sombra que respetará exactamente la forma de la imagen.

img {
    filter: drop-shadow(5px 5px 10px #444);
}

La propiedad box-shadow permite definir una sombra a un objeto de la página.

Esta propiedad de CSS3 se utiliza para arrojar una o más sombras a un elemento. Prácticamente, cualquier elemento puede obtener una sombra utilizando esta propiedad.

Box-shadow permite implementar fácilmente sombras múltiples (externas o internas) en los elementos, especificando valores de color, tamaño, desenfoque y desplazamiento.

A continuación se muestra la regla CSS 3 necesaria para crear una sombra gris muy difuminada y que se visualice en la esquina inferior derecha de un elemento:

.elemento
{
  box-shadow: 2px 2px 5px #999; 
  border-radius: 20px;  
  background-color:#ddd;
  width:200px;
  padding:10px;
}

Desafortunadamente, esta propiedad sólo está disponible en los navegadores que más se preocupan por los estándares.

En el caso de los navegadores Chrome, Edge, Opera, Konqueror y Safari 3, ellos incluyen la propiedad con el nombre -webkit-box-shadow.

En el caso de Firefox 3.1 la incluye con el nombre -moz-box-shadow.

La sintaxis completa de la propiedad box-shadow es muy compleja y se define en el borrador de trabajo del módulo de fondos y bordes de CSS3.

A continuación se muestra su sintaxis simplificada habitual, que como se puede apreciar, la constituyen 4 valores y un color, y que se detalla de seguido:

box-shadow: <medida> <medida> <medida>? <medida>? <color>

La primera medida es obligatoria e indica el desplazamiento horizontal de la sombra. Si el valor es positivo, la sombra se desplaza hacia la derecha y si es negativo, se desplaza hacia la izquierda.
La segunda medida también es obligatoria e indica el desplazamiento vertical de la sombra. Si el valor es positivo, la sombra se desplaza hacia abajo y si es negativo, se desplaza hacia arriba.
La tercera medida es opcional e indica el radio utilizado para difuminar la sombra. Cuanto más grande sea su valor, más borrosa aparece la sombra. Si se utiliza el valor 0, la sombra se muestra como un color sólido.
La cuarta medida también es opcional e indica el radio de desenfoque con el que se expande la sombra. Si se establece un valor positivo, la sombra se expande en todas direcciones. Si se utiliza un valor negativo, la sombra se comprime.
El color indicado es directamente el color de la sombra que se muestra.

Ejemplo:


<style type="text/css">

#recuadro1{
  box-shadow: 30px 10px 20px #aaa; 
  border-radius: 20px;  
  background-color:#ddd;
  width:200px;
  padding:10px;
}

#recuadro2{
  box-shadow: -10px -10px 20px #aaa; 
  border-radius: 20px;  
  background-color:#aa0;
  width:200px;
  padding:10px;
  margin-top:50px;
}

body {
  background:white;
  margin:50px;
}

</style>

Resultado:

Recuadro 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,

Recuadro 2

La siguiente regla CSS muestra una sombra en los navegadores Firefox y Safari:

.elemento {
  -webkit-box-shadow: 2px 2px 5px #999;
  -moz-box-shadow: 2px 2px 5px #999;
}

Por su parte, el navegador Internet Explorer dispone de su propio mecanismo para crear sombras. La solución se basa en el uso de los filtros, un mecanismo que no forma parte del estándar de CSS y que permiten aplicar operaciones complejas a los elementos de la página. Entre los filtros de Internet Explorer, se encuentra el filtro shadow, que permite mostrar una sombra en un elemento de la página.

Las opciones del filtro shadow son mucho más limitadas que las de la propiedad box-shadow. Su sintaxis es la habitual de los filtros de Internet Explorer y las opciones son:

color, establecido mediante el formato hexadecimal (ejemplo: #CC0000).
direction, dirección hacia la que se desplaza la sombra. Su valor se indica en grados y sólo se permiten los valores 0, 45, 90, 135, 180, 225, 270 y 315.
strength, distancia en píxeles hasta la que se extiende la sombra.

A continuación se modifica la regla CSS anterior para incluir el filtro de Internet Explorer que muestra una sombra similar:

.elemento {
  -webkit-box-shadow: 2px 2px 5px #999;
  -moz-box-shadow: 2px 2px 5px #999;
  filter: shadow(color=#999999, direction=135, strength=2);
}

Lamentablemente, hasta que todos los navegadores más utilizados no incluyan la propiedad box-shadow, la única forma de mostrar una sombra sobre un elemento de la página consiste en utilizar imágenes que simulan una sombra.

A continuación se detallan los pasos necesarios para mostrar una sombra sencilla sobre una imagen:

Se crea una imagen del mismo tamaño que la imagen original y cuyo aspecto sea el de la sombra que se quiere mostrar.
Se añade un espacio de relleno a la imagen original en la posición en la que se quiere mostrar la sombra. Si por ejemplo se quiere mostrar una sombra en la esquina inferior derecha, se añade padding-right y padding-bottom.
Utilizando la propiedad background, se añade la imagen de la sombra como imagen de fondo de la imagen original. La imagen de fondo se coloca en la posición en la que se quiere mostrar la sombra. En el caso de la sombra inferior derecha, la posición de la imagen de fondo es bottom right.

La siguiente imagen muestra el resultado final y las imágenes utilizadas en el proceso:

Figura Aplicando una sombra a una imagen

El código CSS necesario para conseguir este efecto se muestra a continuación:

img {
  background: url("imagenes/sombra.png") no-repeat bottom right;
  padding-right:  10px;
  padding-bottom: 10px;
}

El principal inconveniente de esta técnica sencilla es que se deben crear tantas imágenes de sombra como tamaños diferentes de imágenes haya en el sitio web. La solución a este problema consiste en crear una imagen de sombra muy grande y aplicarla a todas las imágenes. Esta nueva sombra debe tener un tamaño al menos tan grande como la imagen más grande que se vaya a utilizar.

El problema de utilizar una imagen de sombra muy grande es que los bordes de la sombra no quedan tan bien como cuando se utiliza una imagen de sombra del mismo tamaño que la imagen original:

Figura Las imágenes de sombra muy grande producen bordes más feos

La solución completa para crear sombras de cualquier tamaño y con bordes correctos implica el uso de más imágenes. Los siguientes recursos muestran cómo crear ese tipo de sombras:

Shadowed Image: utiliza tres imágenes y tres elementos <div> para cada imagen.
CSS Drop Shadows II: Fuzzy Shadows: utiliza dos imágenes y dos elementos <div> para cada imagen.
My contribution to the CSS shadow kerfuffle: el resultado es idéntico al obtenido mediante el drop shadow de Photoshop, pero requiere cinco imágenes y cinco elementos <div> para cada imagen.

Si se quiere mostrar una sombra sobre elementos que no sea imágenes, la solución consiste en encerrar los contenidos con dos elementos <div> y aplicar la imagen de sombra sobre el primero de ellos:


#sombra {
  background: url("imagenes/sombra_grande.png") no-repeat 100% 100%;
  padding-right: 15px;
  padding-bottom: 15px;
  width: 200px;
}

#sombra div {
  background: #FFF;
  width: 200px;

<div id="sombra"> <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut diam metus, venenatis ullamcorper, consequat sit amet, volutpat at, nulla. Nulla sollicitudin metus.</div> </div>

Las soluciones basadas en imágenes tienen la ventaja de que funcionan correctamente en cualquier navegador. Sin embargo, complican innecesariamente el código HTML de la página y tienen limitaciones como la de tener que crear una nueva imagen cada vez que se quiere cambiar el color de la sombra.

FUENTES:

https://uniwebsidad.com/libros/css-avanzado/capitulo-1/sombras

https://www.tutorialesprogramacionya.com/cssya/css3ya/detalleconcepto.php?cod=80

https://lenguajecss.com/css/efectos/sombras-css/

ANATOMIA DE LAS CIBERPAGINAS

Etiquetas

sábado, 20 de marzo de 2021

👨‍💻 Mis apuntes sobre la aplicación de sombras en CSS | Parte 1

Sombras múltiples

Sombras flexibles

Recuadro 1

Recuadro 2