Twitter Facebook RSS Feed

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

1 comentario »

  1. Analia dice:

    Qué letra es la que utilizás en la primera foto? Gracias!

Deja un comentario

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