text-shadow y box-shadow

<< text-transform Selectores I >>

Con estas dos propiedades podemos dar sombras a los textos (text-shadow) o a otros elementos como cajas o contenedores(box-shadow).

text-shadow aplica una sombra a un contenido de texto, los valores que puede tener son:

  • Valores posiciónX y posiciónY: permite indicar las coordenadas X e Y donde pondremos la sombra con respecto al texto o contenedor original.
  • Valor size, para el caso del text-shadow es el valor del blur, es decir el radio que de desenfoque de la sombra medido en px, em, etc. Cuanto más pequeño sea el valor menos difuminada estará la sombra, cuanto más alto sea más borrosa se verá. En el caso del box-shadow se le puede dar dos valores de size, el primero será como el de text-shadow y el segundo hace referencia al factor de crecimiento de la sombra. Aumentando este valor podemos hacer que la sombra crezca hacia los lados.
  • Valor color: podemos indicarle el valor que queremos que tome la sombra.

Por otro lado, la propiedad box-shadow aplica una sombra a una caja o contenedor. Puede tener los mismos valores que text-shadow junto con inset que sirve para indicarle que la sombra la queremos interna en lugar de externa que es la que aparece por defecto.

<!DOCTYPE html>
<html lang="en">
     <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Aplicando estilos</title>
          <link rel="stylesheet" href="style.css">
     </head>
     <body>
          <h1>Título de mi web</h1>
          <p>Mi perra me está dando con el hocico en el brazo</p> 
          <div>normal</div>
     </body>
</html>

<< text-transform Selectores I >>