CSS3 combinado con tu imaginación puede dar como resultado un océano de efectos hermosos y únicos. La experimentación creativa con la tipografía web es uno de los favoritos de los desarrolladores web para hacer que sus sitios web sean visualmente impresionantes. Al trabajar en la tipografía, ahora puede crear efectos sorprendentes utilizando solo CSS.
En esta publicación, se muestran 25 resultados de imaginación creativa combinada con sombras de texto que puede copiar y pegar directamente. Para aprender a crear sombras de texto, vaya a este enlace: Tutorial sobre sombras de texto .
1. Grabado en relieve elegante
¿Quería crear una sombra propia? No te preocupes, CSS te tiene cubierto.
Este es un estilo increíble que utiliza una combinación de sombras de texto en blanco y negro para darle al texto la apariencia de estar en relieve. Utiliza Ubuntu como base de fuente con un espaciado entre letras de 5 px .
CSS
color : # 121212 ;
sombra de texto : 2px 7px 5px rgba ( 0 , 0 , 0 , 0 .3 ),
0px -4px 10px rgba ( 255 , 255 , 255 , 0 .3 );
2. Dejándolo caer elegantemente
Esta es una sombra de texto realmente genial que hace que parezca que el texto está dejando caer una sombra en una pared. Este estilo requiere una combinación de muchas sombras con tonos de gris.
CSS
color : # 121212 ;
text-shadow : 0 2px 1px # 747474 ,
1px 3px 1px # 767676 ,
-2px 5px 1px # 787878 ,
-3px 7px 1px # 7a7a7a ,
-4px 9px 1px # 7f7f7f ,
-5px 11px 1px # 838383 ,
-6px 13px 1px # 878787 ,
-7px 15px 1px # 8a8a8a ,
-8px 17px 1px # 8e8e8e ,
-9px 19px 1px # 949494,
-10px 21px 1px # 989898 ,
-11px 23 píxeles 1px # 9f9f9f ,
-12px 25px 1px # a2a2a2 ,
-13px 27px 1px # a7a7a7 ,
-14px 29px 1px #adadad ,
-15px 31px 1px # b3b3b3 ,
-16px 33px 1px # b6b6b6 ,
-17px 35px 1px #bcbcbc ,
-18px 37px 1px # c2c2c2 ,
-19px 39px 1px # c8c8c8,
-20px 41px 1px #cbcbcb ,
-21px 43px 1px # d2d2d2 ,
-22px 45px 1px # d5d5d5 ,
-23px 47px 1px # e2e2e2 ,
-24px 49px 1px # e6e6e6 ,
-25px 51px 1px #eaeaea ,
-26px 53px 1px #efefef ;
3. Emergiendo
Le conseguimos este genial efecto de tipografía utilizando sombras de texto en las que el texto se apila sobre varias capas. ¿No parece que el texto blanco lechoso está emergiendo del negro?
CSS
color : #dfdfdf ;
text-shadow : 0 2px 2px #dfdfdf ,
-2px 5px 1px # b8b8b8 ,
-4px 8px 0px # 979797 ,
-6px 11px 0px # 747474 ,
-8px 14px 0px # 565656 ,
-10px 17px 0px # 343434 ,
-12px 20px 0px # 171717 ,
-14px 23px 0px # 000 ;
4. Sombra de texto centrado
Puede usar este estilo fácilmente en sus proyectos para hacer que su texto se vea elegante sin llamar mucho la atención sobre la sombra debajo de él. Experimente con los valores dados a la
text-shadow propiedad para obtener más variaciones de sombra.
CSS
color : # cfc547 ;
text-shadow : 3px 0px 7px RGBA ( 81 , 67 , 21 , 0 0,8 ),
-3px 0px 7px RGBA ( 81 , 67 , 21 , 0 0,8 ),
0px 4px 7px RGBA ( 81 , 67 , 21 , 0 . 8 );
5. Manteniéndolo corto y simple
Este es otro ejemplo creado usando una sola sombra que está casi debajo del texto.
CSS
color : # cfc547 ;
text-shadow : 3px 4px 7px RGBA ( 81 , 67 , 21 , 0 0,8 );
6. Letterpressed
¿Las letras no aparecen talladas en esa superficie negra? Puede crear este estilo utilizando solo dos sombras de texto.
Para lograr este efecto, haga que su texto sea un poco más oscuro que el fondo. Después de eso, dé una sombra más clara que el texto a su derecha y una sombra más oscura a su izquierda.
CSS
color : # 0f0f0f ;
text-shadow : 1px 1px 3px # 020202 ,
2px 2px 4px # 1b1b1b ;
7. Texto en 3-D
Haga que su texto se vea como un texto tridimensional utilizando solo sombras de texto. Observe también la suavidad del texto. Esta es la magia de múltiples sombras de texto.
Para este efecto, use una combinación de sombras de texto que tengan sombras del color del texto y configure el radio de desenfoque en un valor muy pequeño dependiendo del tamaño de su texto.
CSS
color : #dfdfdf ;
text-shadow : 0 2px 2px #dfdfdf ,
-2px 5px 1px #cbcbcb ,
-4px 8 píxeles 1px # 979797 ,
-6px 11px 1px # a2a2a2 ,
-8px 14px 1px #aeaeae ,
-10px 17px 1px # b5b5b5 ,
-12px 20px 1px # bebebe ,
-14px 23px 1px #cecece ,
-16px 26px 1px #dbdbdb ,
-18px 29px 1px #dfdfdf
8. Resplandor verde
Este estilo hace que el texto coloreado se vea muy hermoso con sombras de texto de las sombras del color del texto. Puede dar este efecto a cualquier texto de color eligiendo sabiamente el color de las sombras. Echa un vistazo a su código a continuación.
CSS
color : # 67875d ;
text-shadow : 0 2px 1px # 79a06d ,
1px 3px 1px # 82ad75 ,
-2px 5px 1px # 8ebf80 ;
9. Doble sombra
Este genial efecto de doble sombra se crea utilizando solo dos sombras de texto colocadas correctamente: una blanca y otra roja. Puede hacer diferentes combinaciones de colores para las sombras dadas.
El código utilizado para dar este efecto se da a continuación.
CSS
color : # 67875d ;
text-shadow : 0 2px 1px # 79a06d ,
1px 3px 1px # 82ad75 ,
-2px 5px 1px # 8ebf80 ;
10. Smoky Shadow
Las sombras ahumadas son siempre llamativas. Y aquí te traemos uno para ti.
Para crear su propia sombra ahumada, otorgue un gran radio de desenfoque a la
text-shadow propiedad.
CSS
color : #fff ;
text-shadow : 3px 3px 20 píxeles # ff99cc ,
-2px 1px 30px # ff99cc ;
11. Sombra lejana
Los textos que tienen sombras borrosas y distantes se han vuelto muy populares últimamente. Puede intentar colocar sombras a diferentes distancias y orientaciones y darles diferentes colores.
CSS
color : # cfc547 ;
sombra de texto : 16px 22px 11px rgba ( 168 , 158 , 32 , 0 .8 );
12. Vista en perspectiva del texto tridimensional
Le presentamos este estilo deslumbrante que hace que parezca que el texto tridimensional que tiene una base sólida está cementado sobre una superficie blanca y lo está viendo desde algún ángulo. Esta tipografía irá bien con un diseño monocromático. Así que siéntase libre de copiar y pegar el código que se muestra a continuación.
CSS
color : # 000 ;
text-shadow : 0 2px 3px # 747474 ,
1px 3px 4px # 222 ,
0 8 píxeles 3px # 474747 ,
0 11px 4px # 747474 ,
0 14px 4px # 565656 ,
0 17px 4px # 343434 ,
0 20px 4px # 171717 ;
13. Glass Shadow
Si estaba buscando un efecto de sombra de cristal, su búsqueda termina aquí. Esto se crea utilizando la
transform propiedad invirtiendo verticalmente una copia del texto y girándola sobre el eje X. Para que la sombra parezca real, la copia del texto recibe un gradiente lineal.
HTML
<div id = "para_div" >
<p> Mi texto </p>
<p id = "refl" > Mi texto </p>
</div>
CSS
* {
estilo-fuente : cursiva ;
}
#refl {
- MOZ - transformar : scaleY ( -1 );
- o - transform : scaleY ( -1 );
- webkit - transform : scaleY ( -1 );
transformar : scaleY ( -1 );
- moz - transform : rotateX ( 210 grados );
- o - transform : rotateX ( 210deg );
- webkit - transform : rotateX ( 210 grados );
transformar : rotar X ( 210 grados );
perspectiva : 200 px ;
- webkit - máscara - imagen : - webkit - gradiente ( lineal , derecho superior , derecho inferior , a partir de ( transparente ) , de color - parada (20% , transparente ) , a ( RGBA ( 0 , 0 , 0 , 0 . 4 )));
}
14. Sombra en capas
Siempre es divertido usar múltiples sombras. Este fantástico efecto de sombra de texto de varias capas creado mediante la colocación correcta de las sombras de texto es un buen ejemplo de lo creativa que puede ser la tipografía.
CSS
# shadow1 { / * para el primer texto * /
color : #dfdfdf ;
sombra de texto : 0 0 2px #dfdfdf ,
-4px 5px 0 # b8b8b8 ,
-7px 11px 0 # 747474 ,
-12px 17px 0 # 343434 ,
-17px 23px 0 # 000 ;
}
# shadow2 { / * para el segundo texto * /
color : # 67875d ;
sombra de texto : 0 0 2px # 67875d ,
-4px 5px 0 # 5d7755 ,
-7px 11px 0 # 4d6047 ,
-12px 17px 0 # 2e382b ,
-17px 23px 0 # 000 ;
}
15. Efecto arcoiris
Dar los colores del arco iris a las diferentes capas de sombra de texto del ejemplo anterior dio como resultado esta sombra de colores vibrantes.
CSS
color : # ff0000 ;
sombra de texto : 0 2px 2px # FF0000 ,
-2px 5px 0 # ff7f00 ,
-4px 10px 0 # ffff00 ,
-8px 15px 0 # 00ff00 ,
-12px 20px 0 # 0000ff ,
-16px 25px 0 # 4b0082 ,
-20px 30px 0 # 9400d3 ;
16. Texto brillante
Aquí hay un texto amarillo que irradia luz sobre un fondo negro. Para que el texto brille, dele grandes radios de desenfoque a todas las sombras declaradas para este texto para que pierdan su forma.
El mismo concepto se aplica también a las sombras de caja. Entonces, ahora puedes hacer que todo brille usando solo CSS.
CSS
color : # cfc547 ;
sombra de texto : 10px 10px 25px rgb ( 81 , 67 , 21 ),
-10px 10px 25px rgb ( 81 , 67 , 21 ),
-10px -10px 25px rgb ( 81 , 67 , 21 ),
10px -10px 25px rgb ( 81 , 67 , 21 );
17. Texto borroso
Puede crear texto borroso haciendo que su texto sea transparente y dejando caer su sombra con un radio de desenfoque. Interesante, ¿no es así?
CSS
color : transparente ;
sombra de texto : 0 0 8px # 316472 ;
18. Sombra descendente
En esta demostración, a la sombra se le da un gran radio de desenfoque y se coloca más abajo que el texto, lo que le da un aspecto flotante al texto.
CSS
color : # cfc547 ;
sombra de texto : 0px 11px 10px rgba ( 81 , 67 , 21 , 0 .8 );
19. Bellamente esbozado
El contorno audaz y colorido de este texto se crea utilizando sombras de texto. Puede usar este efecto en sus diseños para hacerlos más atractivos y animados.
Este esquema se crea colocando cuatro sombras de texto de diferentes colores y sin radio de desenfoque en diferentes posiciones cerca del texto.
CSS
color : # cfc547 ;
sombra de texto : -1px 1px 0 # 41ba45 ,
1px 1px 0 # c63d2b ,
1px -1px 0 # 42afac ,
-1px -1px 0 # c6c23f ;
20. Texto resumido
A diferencia de la demostración anterior, los contornos del texto en esta demostración se crean mediante una combinación de
text-shadow y -webkit-text-strokepropiedades.
CSS
# shadow1 {
color : blanco ;
- webkit - texto - trazo : 1px # F8F8F8 ;
sombra de texto : 0px 1px 4px # 23430C ;
}
# shadow2 {
color : blanco ;
- webkit - texto - trazo : 1px # F8F8F8 ;
sombra de texto : 0px 2px 4px azul ;
}
# shadow3 {
color : # 333 ;
- webkit - texto - trazo : 1px # 282828 ;
sombra de texto : 0px 4px 4px # 282828 ;
}
21. Funky Double Shadow
Para crear este efecto, el texto recibe dos sombras duras sin radio de desenfoque. La primera sombra recibe el color de fondo y se coloca cerca del texto, y la segunda sombra recibe el color del texto y se coloca a una distancia mayor que la primera sombra del texto.
CSS
color : #dfdfdf ;
sombra de texto : 4px 4px 0px # 000 ,
-4px 0 0px # 000 ,
7px 4px 0 #fff ;
22. sombras de colores
En esta demostración, a cada letra se le da una sombra de diferente gradiente de color, lo que hace que se vea bastante impresionante.
HTML
<p>
<span id = "y" > Y </span>
<span id = "o" > O </span>
<span id = "u" > U < / span
</p>
CSS
color : #dfdfdf ;
#y {
text-shadow : 0 1px 2px # 75b663 ,
1px 3px 1px # 5ea04b ,
2px 5px 1px # 5b9c49 ,
4 píxeles 7px 1px # 518b41 ,
6px 9px 1px # 477939 ,
8 píxeles 11px 1px # 3d6831 ,
10px 13px 1px # 335729 ,
12 píxeles 15px 1px # 294521 ,
14px 17px 1px # 1e3418 ;
}
#O {
text-shadow : 0 1px 2px # 9d64c4 ,
1px 3px 1px # 9759c0 ,
2px 5px 1px # 8b46b9 ,
4 píxeles 7px 1px # 7d3fa6 ,
6px 9px 1px # 6f3894 ,
8 píxeles 11px 1px # 613181 ,
10px 13px 1px # 532a6f ,
12 píxeles 15px 1px # 45235c ,
14px 17px 1px # 381c4a ;
}
#u {
text-shadow : 0 1px 2px # c48564 ,
1px 3px 1px # c07d59 ,
2px 5px 1px # b96e46 ,
4 píxeles 7px 1px # a6633f ,
6px 9px 1px # 945838 ,
8 píxeles 11px 1px # 814d31 ,
10px 13px 1px # 6f422a ,
12 píxeles 15px 1px # 5c3723 ,
14px 17px 1px # 4a2c1c ;
}
23. El texto caído
En realidad, puede hacer que su texto parezca caído usando CSS, como se hace en esta demostración. Su orientación y posición se cambian usando la
transform propiedad y se le dan diferentes conjuntos de sombras para que se vea más natural.
HTML
<p data-text = 'FALLEN' > FALLEN </p>
CSS
p {
transformar : skew ( 40 ° ) girar ( -10 ° ) rotateX ( 50 ° ) translate3d ( 0 , 0 , 0 );
- webkit - perspectiva : 100px ;
perspectiva : 100 px ;
}
p : : antes de {
text-shadow : 0 2px 3px # 747474 ,
-3px 3px 1px # 222 ,
-6px 5px 1px # 474747 ,
-9px 7px 1px # 747474 ,
-12px 9px 1px # 565656 ,
-15px 11px 1px # 343434 ,
-22px 15px 1px # 171717 ;
}
p : antes ,
p : después de {
posición : absoluta ;
izquierda : 0 ;
derecha : 0 ;
arriba : 0 ;
contenido : attr ( datos - texto )
}
p : después de {
color : #edc ;
}
24. Múltiples sombras de colores
Este es otro ejemplo impresionante de efecto de sombra de texto múltiple creado mediante el uso de dos sombras distantes de color azul y rosa.
CSS
color : # 474747 ;
sombra de texto : 20px 10px 0px # ff99cc ,
-15px -6px 0px # 64a5b7 ;
25. Texto extraído
Este es un ejemplo de texto extraído que permite que su fondo sea visible a través de él. Este efecto se crea usando las propiedades
text-shadow y mix-blend-mode.
¿Estás ansioso por saber más sobre el texto eliminado? Visite el enlace Cómo crear texto extraído con CSS y aprenda a crear diferentes tipos de efectos de texto extraído.
HTML
<div id = "parent" >
<p> ¡Hola! </p>
</div>
CSS
div {
background : url ('https://www.dl.dropboxusercontent.com/s/rv0tbpx6fmtr4vi/texture.jpg') repetir ;
acolchado : 10px ;
}
p {
relleno : 30px ;
mezclar - mezclar - modo : multiplicar ;
sombra de texto : 5px 4px 11px rgb ( 0 , 0 , 0 ) , 0 2px 5px rgb ( 0 , 0 , 0 );
alinear texto : centro ;
}
Conclusión
Las sombras de texto se usan ampliamente en sitios web y son bastante fáciles de implementar. Puede elegir directamente cualquiera de las sombras de texto que figuran en esta publicación y mejorar sus diseños. También puede crear el suyo dando diferentes colores y otras variaciones tomando idea de estas sombras. Pronto publicaremos una publicación que analizará los consejos y trucos para crear los efectos de texto que se ofrecen aquí.
0 Comentarios