Lección 18: 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?

Comprame un café — Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Escribe el primer comentario