Hoy en día CSS3 nos trae la posibilidad de jugar con los textos y tipografías creativamente, se pueden renderizar efectos que antes sólo se podían hacer en Photoshop, e incluso nos permite agregarle animaciones bastantes creativas.
En este post te presentamos algunos efectos para textos solo con Html y Css:
Texto solo con bordes y sombras:
<div class="bg-1"> <h1 class="t-stroke t-shadow">TITLE</h1> </div>
.bg-1{
background: linear-gradient(to right, rgb(97, 67, 133), rgb(81, 99, 149));
height: 50vh;
padding-top: 150px;
}
.t-stroke {
color: transparent;
-moz-text-stroke-width: 2px;
-webkit-text-stroke-width: 2px;
-moz-text-stroke-color: #000000;
-webkit-text-stroke-color: #ffffff;
}
.t-shadow {
text-shadow: 7px 7px #8dffcd;
}
Texto con color de fondo, bordes y sombras:
<div class="bg-2">
<h1 class="t-stroke-shadow">HELLO</h1>
</div>
.bg-2{
background: linear-gradient(to right, rgb(221, 94, 137), rgb(247, 187, 151));
}
.t-stroke-shadow {
color: #e8858e;
text-shadow: -3px 3px #ffffff, -3px -3px #ffffff, 3px -3px #ffffff, 3px 3px #f3f3f2, 6px 6px #6ac7c2;
}
Texto con borde y relleno con una imagen de fondo
Para este ejemplo utilizaremos el selector (::after) de css donde utilizaremos una imagen de fondo para llenar el texto, también se le incluyo una animacion al hacer hover.
<div class="bg-3">
<h1 class="t-stroke t-shadow-halftone">HELLO WORLD</h1>
</div>
.bg{
background: linear-gradient(to right, rgb(255, 110, 127), rgb(191, 233, 255));
z-index: 2;
background-size: cover;
transition: all 0.5s ease;
}
.t-stroke {
color: transparent;
-moz-text-stroke-width: 2px;
-webkit-text-stroke-width: 2px;
-moz-text-stroke-color: #000000;
-webkit-text-stroke-color: #ffffff;
}
.t-shadow-halftone {
position: relative;
}
.t-shadow-halftone::after {
content: "HELLO WORLD";
font-size: 10rem;
letter-spacing: 0px;
background: url('bg.jpg') 50% 47%
repeat;
background-size: 150%;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
-moz-text-stroke-width: 0;
-webkit-text-stroke-width: 0;
position: absolute;
text-align: center;
left: 8px;
right: 0;
top: 6px;
z-index: -1;
transition: all 0.5s ease;
}
Texto con borde, fondo y sombra.
<div class="bg-4">
<h1 class="t-stroke t-shadow-halftone2">AWESOME TEXT</h1>
</div>
.bg-4{
background: linear-gradient(to right, rgb(240, 152, 25), rgb(237, 222, 93));
}
.t-stroke {
color: transparent;
-moz-text-stroke-width: 2px;
-webkit-text-stroke-width: 2px;
-moz-text-stroke-color: #000000;
-webkit-text-stroke-color: #ffffff;
}
.t-shadow-halftone2 {
position: relative;
}
.t-shadow-halftone2::after {
content: "AWESOME TEXT";
font-size: 10rem;
letter-spacing: 0px;
background-size: 100%;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
-moz-text-stroke-width: 0;
-webkit-text-stroke-width: 0;
position: absolute;
text-align: center;
left: 0px;
right: 0;
top: 0px;
z-index: -1;
background-color: #ff4c00;
transition: all 0.5s ease;
text-shadow: 10px 2px #6ac7c2;
}
Animando sombras del texto
<div class="bg-5">
<h1 class="animated-shadow">SOME TEXT</h1>
</div>
.bg-5{
background: linear-gradient(135deg, rgb(227, 227, 227) 0%, rgb(93, 104, 116) 100%);
}
.animated-shadow {
color: #ffffff;
font: normal 140px Varela Round, sans-serif;
height: 140px;
left: 0;
letter-spacing: 5px;
text-align: center;
text-transform: uppercase;
width: 100%;
animation: move linear 2000ms infinite;
z-index: 2
}
/*Animación para rotar las sombras*/
@keyframes move {
0% {
text-shadow:
4px -4px 0 #da0641,
3px -3px 0 #da0641,
2px -2px 0 #da0641,
1px -1px 0 #da0641,
-4px 4px 0 #13f1fc,
-3px 3px 0 #13f1fc,
-2px 2px 0 #13f1fc,
-1px 1px 0 #13f1fc
;
}
25% {
text-shadow:
-4px -4px 0 #13f1fc,
-3px -3px 0 #13f1fc,
-2px -2px 0 #13f1fc,
-1px -1px 0 #13f1fc,
4px 4px 0 #da0641,
3px 3px 0 #da0641,
2px 2px 0 #da0641,
1px 1px 0 #da0641
;
}
50% {
text-shadow:
-4px 4px 0 #da0641,
-3px 3px 0 #da0641,
-2px 2px 0 #da0641,
-1px 1px 0 #da0641,
4px -4px 0 #13f1fc,
3px -3px 0 #13f1fc,
2px -2px 0 #13f1fc,
1px -1px 0 #13f1fc
;
}
75% {
text-shadow:
4px 4px 0 #13f1fc,
3px 3px 0 #13f1fc,
2px 2px 0 #13f1fc,
1px 1px 0 #13f1fc,
-4px -4px 0 #da0641,
-3px -3px 0 #da0641,
-2px -2px 0 #da0641,
-1px -1px 0 #da0641
;
}
100% {
text-shadow:
4px -4px 0 #da0641,
3px -3px 0 #da0641,
2px -2px 0 #da0641,
1px -1px 0 #da0641,
-4px 4px 0 #13f1fc,
-3px 3px 0 #13f1fc,
-2px 2px 0 #13f1fc,
-1px 1px 0 #13f1fc
;
}
}
Efecto glitch en textos
Para lograr este efecto utilizamos los selectores ::after y ::before donde se duplica el texto con sombras de distintos colores y se le agrega una animación para que aparezcan y desaparezcan rápidamente y de manera alterna, creando el efecto de error en el texto. Pueden lograrlo siguiendo el siguiente ejemplo.
<div class="bg-6">
<div class="glitch" data-text="GLITCH EFFECT">GLITCH EFFECT</div>
</div>
.bg-6{
background-color: #000000;
}
.glitch {
color: white;
font-size: 100px;
position: relative;
width: 800px;
margin: 0 auto;
font-family: 'Varela', sans-serif;
}
.glitch:after {
content: attr(data-text);
position: absolute;
left: 16px;
text-shadow: -1px 0 red;
top: 0;
color: white;
background: black;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim 2s infinite linear alternate-reverse;
}
.glitch:before {
content: attr(data-text);
position: absolute;
left: 8px;
text-shadow: 1px 0 blue;
top: 0;
color: white;
background: black;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim-2 3s infinite linear alternate-reverse;
}
@keyframes noise-anim {
0% {
clip: rect(51px, 9999px, 28px, 0);
}
5% {
clip: rect(70px, 9999px, 19px, 0);
}
10% {
clip: rect(92px, 9999px, 13px, 0);
}
15% {
clip: rect(85px, 9999px, 49px, 0);
}
20% {
clip: rect(45px, 9999px, 56px, 0);
}
25% {
clip: rect(26px, 9999px, 31px, 0);
}
30% {
clip: rect(62px, 9999px, 73px, 0);
}
35% {
clip: rect(34px, 9999px, 11px, 0);
}
40% {
clip: rect(26px, 9999px, 61px, 0);
}
45% {
clip: rect(34px, 9999px, 71px, 0);
}
50% {
clip: rect(35px, 9999px, 69px, 0);
}
55% {
clip: rect(92px, 9999px, 81px, 0);
}
60% {
clip: rect(26px, 9999px, 85px, 0);
}
65% {
clip: rect(2px, 9999px, 68px, 0);
}
70% {
clip: rect(54px, 9999px, 79px, 0);
}
75% {
clip: rect(35px, 9999px, 85px, 0);
}
80% {
clip: rect(70px, 9999px, 60px, 0);
}
85% {
clip: rect(32px, 9999px, 26px, 0);
}
90% {
clip: rect(94px, 9999px, 53px, 0);
}
95% {
clip: rect(99px, 9999px, 92px, 0);
}
100% {
clip: rect(42px, 9999px, 27px, 0);
}
}
@keyframes noise-anim-2 {
0% {
clip: rect(21px, 9999px, 49px, 0);
}
5% {
clip: rect(27px, 9999px, 52px, 0);
}
10% {
clip: rect(21px, 9999px, 70px, 0);
}
15% {
clip: rect(65px, 9999px, 25px, 0);
}
20% {
clip: rect(24px, 9999px, 10px, 0);
}
25% {
clip: rect(61px, 9999px, 64px, 0);
}
30% {
clip: rect(34px, 9999px, 47px, 0);
}
35% {
clip: rect(46px, 9999px, 93px, 0);
}
40% {
clip: rect(46px, 9999px, 9px, 0);
}
45% {
clip: rect(67px, 9999px, 36px, 0);
}
50% {
clip: rect(72px, 9999px, 20px, 0);
}
55% {
clip: rect(79px, 9999px, 26px, 0);
}
60% {
clip: rect(13px, 9999px, 87px, 0);
}
65% {
clip: rect(10px, 9999px, 25px, 0);
}
70% {
clip: rect(85px, 9999px, 11px, 0);
}
75% {
clip: rect(94px, 9999px, 35px, 0);
}
80% {
clip: rect(50px, 9999px, 86px, 0);
}
85% {
clip: rect(74px, 9999px, 67px, 0);
}
90% {
clip: rect(1px, 9999px, 40px, 0);
}
95% {
clip: rect(3px, 9999px, 48px, 0);
}
100% {
clip: rect(90px, 9999px, 23px, 0);
}
}
Texto con gradientes animadas
<div class="bg-7">
<h1 class="t-stroke">TEXT GRADIENT</h1>
</div>
.bg-7 h1{
position: relative;
}
.bg-7 h1::after {
content: "TEXT GRADIENT";
font-size: 10rem;
letter-spacing: 0px;
background-size: 150%;
background: linear-gradient(135deg,#fcdf8a,#f38381);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
-moz-text-stroke-width: 0;
-webkit-text-stroke-width: 0;
position: absolute;
text-align: center;
left: 8px;
right: 0;
top: 6px;
z-index: -1;
-webkit-animation: pulse-delay 8.5s linear 0.5s infinite alternate;
animation: pulse-delay 8.5s linear 0.5s infinite alternate;
}
@keyframes pulse-delay {
0% {
background: -webkit-linear-gradient(315deg,#fcdf8a,#f38381);
background: -o-linear-gradient(315deg,#fcdf8a 0,#f38381 100%);
background: linear-gradient(135deg,#fcdf8a,#f38381);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
4.16667% {
background: -webkit-linear-gradient(315deg,#c3ec52,#0ba29d);
background: -o-linear-gradient(315deg,#c3ec52 0,#0ba29d 100%);
background: linear-gradient(135deg,#c3ec52,#0ba29d);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
8.33333% {
background: -webkit-linear-gradient(315deg,#13f1fc,#0470dc);
background: -o-linear-gradient(315deg,#13f1fc 0,#0470dc 100%);
background: linear-gradient(135deg,#13f1fc,#0470dc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
12.5% {
background: -webkit-linear-gradient(315deg,#ce9ffc,#7367f0);
background: -o-linear-gradient(315deg,#ce9ffc 0,#7367f0 100%);
background: linear-gradient(135deg,#ce9ffc,#7367f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
16.6667% {
background: -webkit-linear-gradient(315deg,#f36265,#961276);
background: -o-linear-gradient(315deg,#f36265 0,#961276 100%);
background: linear-gradient(135deg,#f36265,#961276);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
20.8333% {
background: -webkit-linear-gradient(315deg,#184e68,#57ca85);
background: -o-linear-gradient(315deg,#184e68 0,#57ca85 100%);
background: linear-gradient(135deg,#184e68,#57ca85);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
25% {
background: -webkit-linear-gradient(315deg,#fad961,#f76b1c);
background: -o-linear-gradient(315deg,#fad961 0,#f76b1c 100%);
background: linear-gradient(135deg,#fad961,#f76b1c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
29.1667% {
background: -webkit-linear-gradient(315deg,#f2d50f,#da0641);
background: -o-linear-gradient(315deg,#f2d50f 0,#da0641 100%);
background: linear-gradient(135deg,#f2d50f,#da0641);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
33.3333% {
background: -webkit-linear-gradient(315deg,#f54ea2,#ff7676);
background: -o-linear-gradient(315deg,#f54ea2 0,#ff7676 100%);
background: linear-gradient(135deg,#f54ea2,#ff7676);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
37.5% {
background: -webkit-linear-gradient(315deg,#0ff0b3,#036ed9);
background: -o-linear-gradient(315deg,#0ff0b3 0,#036ed9 100%);
background: linear-gradient(135deg,#0ff0b3,#036ed9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
41.6667% {
background: -webkit-linear-gradient(315deg,#17ead9,#6078ea);
background: -o-linear-gradient(315deg,#17ead9 0,#6078ea 100%);
background: linear-gradient(135deg,#17ead9,#6078ea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
100% {
background: -webkit-linear-gradient(315deg,#17ead9,#6078ea);
background: -o-linear-gradient(315deg,#17ead9 0,#6078ea 100%);
background: linear-gradient(135deg,#17ead9,#6078ea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}