Letras con contorno
En SVG podemos fácilmente marcar el contorno de las letras utilizando el atributo stroke
. También lo podemos hacer en CSS aplicando cuatro sombras solidas al texto:
. 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:
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. en CSS. La mala noticia es que esto no funciona en todos los navegadores, notablemente en Firefox. Una solución sería utilizar SVG
Otra solución es utilizar sombras múltiples. Veamos cómo:
en CSS. La mala noticia es que esto no funciona en todos los navegadores, notablemente en Firefox. Una solución sería utilizar SVGOtra 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.
0 Comentarios