Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

Sombras múltiples css

Letras con contorno

En SVG podemos fácilmente marcar el contorno de las letras utilizando el atributo strokestar. También lo podemos hacer en CSS aplicando cuatro sombras solidas al texto:
text-shadow: 1px 1px 0px black, 1px -1px 0px black, -1px -1px 0px black, -1px 1px 0px black;
No hay que olvidar que el desenfoque ( blur ) es opcional y que el valor por defecto es 0. Por lo tanto podemos escribir:
text-shadow: 1px 1px black, 1px -1px black, -1px -1px black, -1px 1px black;
Veamos un ejemplo:
<div id="sombrah1"><h1>SOMBRA</h1></div>
#sombrah1 {
  background-color: cornsilk;
  height: 100%;
  text-align: center;
}

#sombrah1 h1 {
  color: white;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 36px;
  text-shadow: 1px 1px black, 1px -1px black, -1px -1px black, -1px 1px black;
}

SOMBRA

Texto tridimensional

También podemos crear la ilusión de texto tridimensional utilizando las sombras múltiples de CSS3:
Observe que para dar relieve utilizamos sombras solidas, donde el desenfoque es 0, y también el desplazamiento vertical es 0. El desplazamiento horizontal crece en un pixel con cada nueva sombra aplicada, y el color de la sombra va de gris claro: rgb(200, 200, 200) a más oscuro:  rgb(190, 190, 190).
  text-shadow: /*relieve*/
    0 1px 0 rgb(200, 200, 200), 
    0 2px 0 rgb(190, 190, 190), 
    0 3px 0 rgb(180, 180, 180),
    0 4px 0 rgb(175, 175, 175),
    0 5px 0 rgb(180, 180, 180),
    0 6px 0 rgb(190, 190, 190),
Para rematar creamos una sombra al estilo tradicional:
    /*sombra*/
    5px  7px  5px rgba(0, 0, 0, .40),
    5px 12px 10px rgba(0, 0, 0, .30),
    5px 17px 20px rgba(0, 0, 0, .20),
    5px 22px 30px rgba(0, 0, 0, .10);

Letras con textura

En Photoshop podemos aplicar texturas al texto. También es posible hacerlo utilizando mascaras de texto.star en CSS. La mala noticia es que esto no funciona en todos los navegadores, notablemente en Firefox. Una solución sería utilizar SVGstar
Otra solución es utilizar sombras múltiples. Veamos cómo:
En HTML el elemento <h1> aparece dentro del <div id="sombra">. En el CSS el texto es blanco color:White, y el div tiene como fondo ( background-image ) una textura realizada con gradientes.
background-image:
  linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 50%),
  linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 50%);
background-size: 25px 25px;
Vea más ejemplos de texturas CSS: CSS3 Patterns Gallery
Las letras tienen que ser blancas – esto es muy importante. De esta manera al aplicar  mix-blend-mode: multiply; las letras se fusionan perfectamente con el fondo. Todo lo que queda por hacer es aplicar tantas sombras como para tapar el resto del elemento. Esto lo hacemos utilizando JavaScript. Y ya está. Hay que decir que mix-blend-mode no es soportado por IE, y en este caso las letras se quedan blancas sobre un fondo negro.

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas