Mundo Web

Efectos CSS decorativos para textos

Por 23/07/2016 enero 16th, 2017 Aún sin comentarios

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?

Anímate a comentar

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.