Efectos de textos con CSS

martes, 13 de noviembre de 2018 a las 12:29hs por Valentina Echezuria

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;
}
}

Relacionado

Categoria CSS3 | Etiquetas: CSS, efectos, textos

Programando a medianoche

Efectos de textos con CSS

Texto solo con bordes y sombras:

Texto con color de fondo, bordes y sombras:

Texto con borde y relleno con una imagen de fondo

Texto con borde, fondo y sombra.

Animando sombras del texto

Efecto glitch en textos

Texto con gradientes animadas

Me gusta esto:

Relacionado

1 comentario »

Deja un comentarioCancelar respuesta

Buscar

Entradas recientes

Programando a medianoche

Efectos de textos con CSS

Texto solo con bordes y sombras:

Texto con color de fondo, bordes y sombras:

Texto con borde y relleno con una imagen de fondo

Texto con borde, fondo y sombra.

Animando sombras del texto

Efecto glitch en textos

Texto con gradientes animadas

Comparte esto:

Me gusta esto:

Relacionado

1 comentario »

Deja un comentarioCancelar respuesta

Buscar

Entradas recientes