TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear sombras de caja con CSS?

0

La propiedad CSS "box-shadow" te permite crear efectos de sombra simples para los elementos de tu página. Puedes usar esta propiedad para crear hermosos cuadros con efecto de sombra en la dirección superior, inferior, derecha e izquierda. En este tutorial usaremos: antes del pseudo elemento para crear diferentes estilos de efecto de sombra en un cuadro de texto.

Relacionado: ¿Cómo convertir un ícono impresionante de fuente a una imagen?

Sintaxis de la propiedad CSS box-shadow

La sintaxis de la propiedad box-shadow es la siguiente:

box-shadow: horizontal offset | vertical offset | blur | spread | color | direction

A continuación se muestra un ejemplo cuando el cuadro de sombra: 10px 10px 10px 10px verde recuadro; se usa con un elemento div:

Sombra de caja con recuadro

El valor insertado indica que la dirección de la sombra debe estar dentro del elemento. Puede utilizar el principio para crear el efecto de sombra fuera del elemento.

¿Cómo crear efectos de sombra con CSS?

Pasemos a la creación de un efecto de sombra utilizando un pseudo elemento CSS. Primero cree un cuadro usando el siguiente código CSS. Dejamos el cuadro sin definir las dimensiones, si quieres usar valores específicos de alto y ancho.

.box { background-color:#CDDC39; color: #333333; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border: 1px solid #cccccc; margin: 20px; padding: 15px; font-size: 18px; }

A continuación, cree una sombra con el siguiente CSS:

.shadow { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .shadow:before { position: absolute; z-index: -1; display: block; background: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); content: ""; }

Mostraremos la sombra en el lado izquierdo y ajustaremos la posición usando los valores inferior e izquierdo.

.left-shadow:before { bottom: 25px; left: 20px; width: 60%; height: 20px; -webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); }

Similar a la sombra izquierda, defina estilos separados para sombra derecha, inferior y simple como se muestra a continuación.

.right-shadow:before { right: 20px; bottom: 25px; width: 60%; height: 20px; -webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } .bottom-shadow:before { right: 20px; bottom: 0; left: 20px; height: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .simple-shadow:before { right: 20px; bottom: 0; left: 20px; height: 30px; }

HTML para efectos de sombra

Para crear un cuadro de sombra, necesitamos usar una de las tres clases CSS anteriores con HTML.

  • clase de caja
  • clase de sombra
  • elija uno de los estilos de sombra: sombra izquierda, sombra derecha, sombra inferior o sombra simple

Por ejemplo, a continuación se muestra el código HTML para agregar sombra izquierda a un elemento div:

<div class="box shadow left-shadow"> This is a text box with left shadow. The text inside the box is aligned with "height: 100px; width: 70%; margin: 20px; padding: 15px; font-size: 18px;". The shadow in the left is aligned with "bottom: 25px; left: 20px; width: 60%; height: 20px;". </div>

Demostración de efectos de sombra CSS

Puede ajustar el CSS y crear efectos de sombra derecha, sombra inferior y sombra simple. A continuación se muestran algunas de las demostraciones con efectos de sombra CSS.

Efecto de sombra del lado izquierdo

Este es un cuadro de texto con sombra a la izquierda. El texto dentro del cuadro está alineado con "altura: 100 px; ancho: 70%; margen: 20 px; relleno: 15 px; tamaño de fuente: 18 px;". La sombra de la izquierda está alineada con "bottom: 25px; left: 20px; width: 60%; height: 20px;".

Efecto de sombra del lado derecho

Este es un cuadro de texto con sombra derecha. El texto dentro del cuadro está alineado con "altura: 100 px; ancho: 70%; margen: 20 px; relleno: 15 px; tamaño de fuente: 18 px;". La sombra de la derecha está alineada con "right: 20px; bottom: 25px; width: 60%; height: 20px;".

Efecto de sombra CSS inferior

Este es un cuadro de texto con sombra inferior. El texto dentro del cuadro está alineado con "altura: 100 px; ancho: 70%; margen: 20 px; relleno: 15 px; tamaño de fuente: 18 px;". La sombra en la parte inferior está alineada con "derecha: 20 px; parte inferior: 0; izquierda: 20 px; altura: 30 px;".

Cuadro de sombra CSS simple

Este es un cuadro de texto con una simple sombra. El texto dentro del cuadro está alineado con "altura: 100 px; ancho: 70%; margen: 20 px; relleno: 15 px; tamaño de fuente: 18 px;". La sombra está alineada con "derecha: 20 px; abajo: 0; izquierda: 20 px; altura: 30 px;".

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More