Effetto di testo “impossibile” CSS

Un bellissimo effetto sul testo che potrebbe dare un bel colpo d’occhio al tuo sito. Poche righe di codice per vedere un rettangolo che si soprappone al tuo testo che ha un bel effetto ombra su di esso. QUi sotto metto il codice CSS e HTML

Codice HTML

<a class="digita" href="https://www.digita.org" target="_blank">digita.org</a>

Sono privo di fantasia 🙂

Codice CSS

@keyframes tipsy {
  0 {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(360deg);
  }
}

body {

  background-color: #2e2e31;
}

.digita {
  color: #fffbf1;
  text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31;
  font-size: 80px;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: -3px;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.digita:before,
.digita:after {
  content: '';
  padding: .9em .4em;
  position: absolute;
  left: 50%;
  width: 100%;
  top: 50%;
  display: block;
  border: 15px solid red;
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  animation: 10s infinite alternate ease-in-out tipsy;
}

.digita:before {
  border-color: #d9524a #d9524a rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  z-index: -1;
}

.digita:after {
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #d9524a #d9524a;
  box-shadow: 25px 25px 25px rgba(46, 46, 49, .8);
}

Come vedete sono davvero quattro righe di codice CSS e si sfrutta after e before per la transizione tipsy, nel @keyframes tipsy su. Ora metto questo effetto sul testo sotto, spero che vi agrada.

See the Pen
Impossibly Tipsy by James Mellers (@jamesmellers)
on CodePen.