la codeteca
Compartir:

Letras y titulos con sombras

Sombra sólida

		h2{
		   text-shadow: 1px 2px #999;
		} 

Ejemplo:

TITULO CON SOMBRA SOLIDA


Sombra desenfocada


		h2{
		   text-shadow: 3px 3px 2px #696;
		   color: #666;
		} 
	

Ejemplo:

TITULO CON SOMBRA DESENFOCADA


Varias sombras en un mismo elemento


		h3{
		   text-shadow: 10px 8px #ccf, -10px 12px #fcf, -8px -12px #cfc, 12px -5px #fc9;
		   color: #999;
		} 
	

Ejemplo:

Titulo con varias sombras


Efecto Fuego

		h2{
		   text-shadow: 0 0 20px #fefcc9, 
		   2px -2px 3px #feec85, 
		   -4px -4px 5px #ffae34, 
		   5px -10px 6px #ec760c, 
		   -5px -12px 8px #cd4606, 
		   0 -15px 20px #973716, 
		   2px -15px 20px #451b0e;
		   color: #666;
		}

Ejemplo:

TITULO CON EFECTO DE FUEGO.


Sombra Gigante

		h2{
		   text-shadow: #f83 -1px 1px, #f83 -2px 2px, #f83 -3px 3px, #f83 -4px 4px, #f83 -5px 5px;
		   color: #060;
		   letter-spacing: 1px;
		} 

Ejemplo:

Titulo con una sombra gigante.


Contorno

		h2{
		   text-shadow: -1px 0 #090, 1px 0 #090, 0 1px #090, 0 -1px #090;
		   color: #fff;
		} 

Ejemplo:

Titulo con una sombra en el contorno.


Titulo en Relieve

		h2 {
		   text-shadow: 1px 1px white, -1px -1px #333;
		   background-color: #ddd;
		   color: #ddd;
		   padding: 10px;
		} 

Ejemplo:

Titulo en relieve.


Efecto Pixlart

		h2.pixelart{
		   text-shadow: 1px 1px #666, 2px 2px #86D6D3, 3px 3px #666, 4px 4px #86D6D3;
		   color: #ccc;
		} 

Ejemplo:

TITULO CON EFECTO PIXLART