Effetto di testo “impossibile” CSS

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.

Articolo creato 255

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.

Articoli correlati

Inizia a scrivere il termine ricerca qua sopra e premi invio per iniziare la ricerca. Premi ESC per annullare.

Torna in alto