Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Mastering CSS3. 7 Ejemplos de Text-Shadow que no te puedes perder
#1
Desde twitter me hicieron llegar un enlace hacia css.dzone.com donde me encontré con unos ejemplos de text-Shadow bastante imresionantes. Por lo que decidí compartirlos con ustedes.

Les dejo unos cuantos ejemplos, el resto lo pueden ver en la fuente.

Arcade Love
In our first sample we will try to draw some cool embossed text. We will start with a simple lime color text:
[Imagen: image001.png]

Código PHP:
colorhsl(8070%, 55%); 

Next let’s add some embossed effects by adding few shadows with 1px diagonal offset (note how the shadows color is defined comparing with the text color!):

[Imagen: image002.png]

Código PHP:
text-shadow: -1px -1px 0 hsl(8070%, 35%),
-
2px -2px 1px hsl(8070%, 35%); 

[Imagen: image003.png]

Código PHP:
text-shadow0 0 2px #fff,
 
-1px -1px 0 hsl(8070%, 35%),
 
-
2px -2px 1px hsl(8070%, 35%),
 
-
2px -2px 2px hsl(8010%, 15%); 


Next let’s add a substrate for our text. To make it happen we need to expand our shadow (here we are using the fourth parameter of the text-shadow rule — spray-distance):

[Imagen: image004.png]

Código PHP:
text-shadow: ...
 
-
3px -3px 0 7px hsl(6010%, 65%),
 
-
4px -4px 0 7px hsl(6010%, 65%),
 
-
5px -5px 0 7px hsl(6010%, 65%),
 
-
6px -6px 0 7px hsl(6010%, 65%); 

Finally to place our text on the background lets add a dark blurred shadow on the bottom of the substrate:

[Imagen: image005.png]

Código PHP:
text-shadow: ...
 
-
7px -7px 4px 8px hsl(6010%, 40%),
 
-
8px -8px 6px 9px hsl(6010%, 55%); 

Final result

[Imagen: image006.png]

Código PHP:
colorhsl(8070%, 55%);
 
text-shadow0 0 2px #fff,
 
/*embossed text */
 
-1px -1px 0 hsl(8070%, 35%),
 
-
2px -2px 1px hsl(8070%, 35%),
 
/*transition to substrate */ 
 
-2px -2px 2px hsl(8010%, 15%),
 
/*substrate */                           
 
-2px -2px 0 7px hsl(6080%, 95%),
-
3px -3px 0 7px hsl(6010%, 65%),
 
-
4px -4px 0 7px hsl(6010%, 65%),
 
-
5px -5px 0 7px hsl(6010%, 65%),
 
-
6px -6px 0 7px hsl(6010%, 65%),
 
/*
shadow for substrate */                           
 
-7px -7px 4px 8px hsl(6010%, 40%),
 
-
8px -8px 6px 9px hsl(6010%, 55%); 


FUENTE
[Imagen: fuente-alimentacion.jpg]
Código:
http://css.dzone.com/articles/mastering-css3-7-cool-text
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Efectos de sombra en los textos con text-shadow imgur 1 411 29-01-2015, 02:35 AM
Último mensaje: garcon
Bombilla [PUBLICO] Imágenes con descripción animada CSS3 AngelKrak 1 540 20-01-2015, 06:29 AM
Último mensaje: garcon
  Como hacer un menu horizontal con html5 y css3 torgar22 4 831 16-12-2014, 02:07 PM
Último mensaje: Demozz
  7 Efectos con CSS3 jlgarduza 0 323 23-11-2014, 06:03 AM
Último mensaje: jlgarduza
  Simple Shadow menu Pure Css by Spastox Spastox 0 380 20-04-2014, 09:01 PM
Último mensaje: Spastox
  [Css] Efectos Con CSS3 Usando Transciciones Adsense 0 457 04-12-2013, 02:18 AM
Último mensaje: Adsense
  Menu HTML5 - CSS3 gamesd 8 938 27-10-2013, 02:20 PM
Último mensaje: ilopezbdn
  Sublime Text o Adobe Dreamweaver fullposs 2 452 20-10-2013, 08:23 PM
Último mensaje: fullposs
  5 Nuevas Plantillas HTML5 y CSS3 lukas 13 2,701 12-09-2013, 06:40 PM
Último mensaje: lyo21
  Platillas HTML5 y CSS3 Gratis! lukas 4 1,452 02-09-2013, 09:28 PM
Último mensaje: davilro



Usuarios navegando en este tema: 1 invitado(s)