Lección 15: Sombras

box-shadow

Un estilo para incluir sombras externas o internas.

Quitar.

.elemento {
  box-shadow: none;
}

Sobra exterior: posición x, posición y, color.

.elemento {
  box-shadow: 2rem 1rem orange;
}

Sobra exterior: posición x, posición y, desenfoque, color.

.elemento {
  box-shadow: 2rem 1rem 1rem orange;
}

Sobra exterior: posición x, posición y, desenfoque, tamaño, color.

.elemento {
  box-shadow: 2rem 1rem 1rem 3rem orange;
}

Sobra interior: posición x, posición y, color.

.elemento {
  box-shadow: inset 1rem 1rem orange;
}

Multisombras.

.elemento {
   box-shadow: 1rem 1rem 1rem orange, -1rem -1rem 1rem black;
}

Sombras usando teoría de la luz.

.elemento {
  box-shadow:
      0 2.8px 2.2px rgba(0, 0, 0, 0.034),
      0 6.7px 5.3px rgba(0, 0, 0, 0.048),
      0 12.5px 10px rgba(0, 0, 0, 0.06),
      0 22.3px 17.9px rgba(0, 0, 0, 0.072),
      0 41.8px 33.4px rgba(0, 0, 0, 0.086),
      0 100px 80px rgba(0, 0, 0, 0.12)
    ;
  height: 10rem;
  width: 10rem;
  background: white;
  border-radius: 5px;
}

Podéis leer un completo artículo al respecto en css-tricks.

text-shadow

Añade sombra un texto.

posición x, posición y, desenfoque, color.

.elemento {
  text-shadow: 1px 1px 2px black;
}
Texto con sombra

Más información

filter: drop-shadow()

Sombra para elementos irregulares.

posición x, posición y, desenfoque, color.

.elemento {
  filter: drop-shadow(-1rem -1rem 0.5rem orange);
}

Más información

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se paga 1 mes de servidor.
  • 3 cafés: Se cubre 1 mes de Black box.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario