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

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario