Breaking

Post Top Ad

Your Ad Spot

viernes, 25 de octubre de 2019

25 efectos de sombra de texto creativo CSS3 que no te puedes perder

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í?
Visite  Cómo crear texto borroso con CSS  para aprender diferentes formas de crear texto borroso.
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í.

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas