12 divertidas sombras de texto CSS que puedes copiar y pegar
La tipografía es el juguete favorito de todos en el diseño web. Una herramienta particularmente divertida que te da CSS para jugar con tu tipo es sombra de textoque parece bastante simple al principio, pero puede usarse para crear algunos efectos notables con un poco de ingenio y creatividad.
Hoy repasaremos varios sombra de texto ejemplos que puedes copiar y pegar para tu propio trabajo.
Sombra base
El sombra de texto Es muy fácil trabajar con la propiedad y funciona bien en todo. moderno navegadores sin siquiera un prefijo de proveedor! Sin embargo, el uso de herramientas como Modernización lo ayudará a lograr efectos CSS3 avanzados incluso en navegadores más antiguos si necesita soporte alternativo.
Sintaxis
La sintaxis para crear un simple sombra de texto se presenta a continuación. Tienes cuatro variables con las que trabajar, las dos primeras establecen la posición de la sombra, la tercera establece la cantidad de desenfoque y la cuarta el color de la sombra.
|
texto–La sombra: horizontal–brecha vertical–brecha difuminar color; |
Poniendo esto en práctica, aquí hay un ejemplo con una sombra que se ha movido dos píxeles hacia abajo y hacia la derecha cuatro píxeles, con un desenfoque de tres píxeles y un color negro con una opacidad del 30%.
|
texto–La sombra: 2 píxeles 4 píxeles 3 píxeles rgb(0,0,0,0.3); |
Aquí está el resultado de este código, una bonita sombra simple que es bastante atractiva por sí sola.
porque rgb
Como nota rápida, no tiene que usar rgba para su color de sombra, pero puede usar cualquiera de los métodos de color CSS. Sin embargo, encuentro que rgba es la configuración de color ideal para una sombra, ya que agrega otra dimensión para trabajar. No solo puede establecer la posición, el desvanecimiento y el color de la sombra, sino que también puede establecer su opacidad utilizando el valor alfa.
En realidad, esto es más fácil que trabajar con otros métodos de color, ya que normalmente tendrá que buscar un acento decente para el color de fondo, que quizás sea un poco más oscuro o más claro. Con rgba puedes usar blanco o negro y reducir la opacidad para mezclarlo con el fondo.
Tipografía rápida y sucia
Lo bueno de sombras de texto es que en realidad puedes hacer mucho más con ellos que con tu sombra promedio. Por ejemplo, aquí hay un truco rápido para crear la ilusión de texto en línea.
Lo primero que debe hacer es establecer el color del texto en un tono ligeramente más oscuro que el color de fondo. A continuación, aplique un blanco claro sombra de texto con baja opacidad.
Como puede ver, utilicé un color de fondo de # 222 y luego puse el texto en negro con una opacidad del 60%. Finalmente, mi sombra blanca se colocó ligeramente hacia abajo y hacia la derecha con una opacidad del 10%.
|
cuerpo { fondo: #222; } #texto h1 { color: rgb(0,0,0,0.6); texto–La sombra: 2 píxeles 2 píxeles 3 píxeles rgb(255,255,255,0.1); } |
sombra fuerte
Recuerda que no tienes que desvanecer tu sombra en absoluto. Debido a su naturaleza retro, las sombras de texto duras están muy de moda en este momento, así que siéntete libre de experimentar con ellas en tus diseños.
|
texto–La sombra: 6px 6 píxeles 0 píxeles rgb(0,0,0,0.2); |
doble sombra
La verdadera diversión comienza cuando te das cuenta de que no estás limitado a una sola sombra. ¡Al usar una coma para separar las declaraciones, puede aplicar tantas sombras como desee!
Aquí está el esquema básico de la sintaxis. Observe que hay una coma después de las dos primeras sombras y un punto y coma después de la última sombra.
|
texto–La sombra: sombra1, sombra2, sombra3; |
Poniendo esto en práctica, aquí hay un ejemplo de un tratamiento de texto que verá en toda la web ahora mismo. La idea es básicamente aplicar dos sombras, la primera de las cuales es del mismo color que tu fondo.
|
texto–La sombra: 4 píxeles 3 píxeles 0 píxeles #fff, 9px 8px 0px rgba(0,0,0,0.15); |
El resultado es casi una sensación de periódico vintage.
abajo y lejos
Una vez que realmente comienzas a aplicar capas en las sombras, los resultados rápidamente se vuelven más y más impresionantes. Es muy fácil comenzar a crear algunos efectos 3D falsos agradables que los usuarios expertos en diseño web no pensarán que son texto en vivo.
A continuación, utilicé cuatro sombras enormes, todas apuntando directamente hacia abajo, con diversos grados de distancia y desenfoque.
|
texto–La sombra: 0 píxeles 3 píxeles 0 píxeles #b2a98f, 0 píxeles 14 píxeles 10 píxeles rgb(0,0,0,0.15), 0 píxeles 24 píxeles 2 píxeles rgb(0,0,0,0.1), 0 píxeles 34px 30px rgb(0,0,0,0.1); |
Cercano y Pesado
Aquí hay otro ejemplo de la misma idea, esta vez con tres sombras que se han mantenido mucho más cerca de la fuente. El efecto hace que el texto parezca un poco más pesado.
|
texto–La sombra: 0 píxeles 4 píxeles 3 píxeles rgb(0,0,0,0.4), 0 píxeles 8 píxeles 13px rgb(0,0,0,0.1), 0 píxeles 18 píxeles 23 píxeles rgb(0,0,0,0.1); |
Un poco de ayuda
Buscando lo que otros diseñadores han hecho, encontré dos excelentes técnicas que pensé que eran perfectas para esta publicación. El primero proviene de Mark Dotto y el segundo de Gordon Hall.
El serio texto en 3D de Mark Dotto
Aquí hay un ejemplo que siempre me ha parecido impresionante. Viene de MarkDotto.com y usa doce impresionantes sombras separadas para lograr un efecto 3D muy creíble.
|
texto–La sombra: 0 1px 0 #ccc, 0 2 píxeles 0 #c9c9c9, 0 3 píxeles 0 #bbb, 0 4 píxeles 0 #b9b9b9, 0 5px 0 #aah, 0 6 píxeles 1px rgb(0,0,0,.1), 0 0 5px rgb(0,0,0,.1), 0 1px 3 píxeles rgb(0,0,0,.3), 0 3 píxeles 5px rgb(0,0,0,.2), 0 5px 10 píxeles rgb(0,0,0,.25), 0 10 píxeles 10 píxeles rgb(0,0,0,.2), 0 20px 20px rgb(0,0,0,.15); |
El verdadero texto de Gordon Hall
Tenga en cuenta que en el ejemplo anterior llamé a mi técnica el efecto de patrón «rápido y sucio». Eso es porque hay una forma mucho más complicada de crear un texto serio que es mucho más creíble.
Gordon usa un serio vudú de CSS para lograr no solo una sombra exterior, sino también una sombra interior genuina. Mira su entrada en el blog para una explicación completa de la técnica.
|
fondo–color: #666666; –webkit–fondo–acortar: texto; –moz–fondo–acortar: texto; fondo–acortar: texto; color: transparente; texto–La sombra: rgb(255,255,255,0.5) 0 píxeles 3 píxeles 3 píxeles; |
Sombras más divertidas
Ahora que tiene una buena idea de la lógica detrás del código, aquí hay algunos ejemplos que creé sin las explicaciones aburridas. ¡Siéntase libre de robarlos y usarlos en su trabajo!
Brillante
|
texto–La sombra: 0 píxeles 0 píxeles 6 píxeles rgb(255,255,255,0.7); |
superhéroe
|
texto–La sombra: –10 píxeles 10 píxeles 0 píxeles #00e6e6, –20px 20px 0 píxeles #01cccc, –30px 30px 0 píxeles #00bdbd; |
Múltiples fuentes de luz
|
texto–La sombra: 0 píxeles 15 píxeles 5px rgb(0,0,0,0.1), 10 píxeles 20px 5px rgb(0,0,0,0.05), –10 píxeles 20px 5px rgb(0,0,0,0.05); |
Relieve suave
|
color: rgb(0,0,0,0.6); texto–La sombra: 2 píxeles 8 píxeles 6 píxeles rgb(0,0,0,0.2), 0 píxeles –5px 35px rgb(255,255,255,0.3); |
Conclusión
Como la mayoría de los efectos CSS, las sombras de texto son extremadamente simples de implementar en una forma básica, pero pueden tomar una variedad de formas diferentes si trabajas un poco en ellas. Usando comas como separador, puede apilar sombras CSS una encima de la otra para aumentar drásticamente el interés y el realismo del efecto.
