Skip to main content
Mundo Web

Efectos CSS decorativos para textos

By 23/07/2016enero 16th, 20175 Comments

Sé que no es necesario que escriba esto, puesto que el código html y css siempre es visible con las herramientas de desarrollador de los navegadores. Pero he decidido escribirlo para por una parte acceder más rápido al código en cuestión y por otra parte, facilitaros a vosotros también algunas cosas que al menos para mí son útiles.

Efecto texto con contorno:

EFECTO CONTORNO

.tuclase {
text-align: left; 
font-family: Arial Black; 
font-weight: bold; 
font-size: 30px; 
color: #fff; 
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

Efecto texto 3D:

EFECTO 3D

.tuclase {
text-align: left; 
font-family: Arial Black; 
font-weight: bold; 
font-size: 30px; 
color: #fff; 
text-shadow: 0 1px 0 #ddd, 0 2px 0 #ccc, 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 0 #acacac, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.2), 0 20px 20px rgba(0,0,0,0.15);
}

 

Efecto de texto desenfocado:

Efecto Blur

.tuclase {
text-align: left; 
font-family: Arial Black; 
font-weight: bold; 
font-size: 30px; 
color: rgba(255, 255, 255, 0); 
text-shadow: 0 0 9px #8E59A9; 
text-transform: uppercase;
}

 

Efecto texto con relieve:

EFECTO RELIEVE

.tuclase {
text-align: left; 
font-family: Arial Black; 
font-weight: bold; font-size: 30px; 
background: #202020; 
-webkit-background-clip: text; 
-moz-background-clip: text; 
background-clip: text; 
color: transparent; 
text-shadow: 0px 3px 3px rgba(255,255,255,0.4),0px -1px 1px rgba(0,0,0,0.3);
}

 

Efecto texto con resplandor:

EFECTO NEÓN

.tuclase {text-align: left; 
font-family: Arial; 
font-size: 30px; 
COLOR: #1278BF; 
text-shadow: 0px 0px 9px #508AD3;
}

 

Efecto de sombra alargada:

Sombra Alargada

.tuclase{
text-align: left; 
font-family: Comic Sans MS; 
font-weight:bold; 
font-size: 30px; 
color: #EBD758; 
text-shadow: -1px 0 #414D68, 0 1px #414D68, 1px 0 #414D68, 0 -1px #414D68, -2px 2px 0 #414D68, 2px 2px 0 #414D68, 1px 1px #414D68, 2px 2px #414D68, 3px 3px #414D68, 4px 4px #414D68, 5px 5px #414D68; 6px 6px #414D68, 7px 7px #414D68, 8px 8px #414D68, 9px 9px #414D68;
}

 

Iré incluyendo más efectos decorativos, que casi todos, como veis son efectos con sombras, lógicamente eres libre de copiar y usar lo que quieras jajaja, y si por supuesto quieres aportar tu código, no dudes en hacerlo, en los comentarios puedes usar html y css inline para hacerlo.

Ahh un aclaración, lo del css inline, ya sabéis que no son buenas prácticas, pero no pasa nada por ser un poco traviesos, ¿no?

Join the discussion 5 Comments

Leave a Reply