Home CSS Effetto di testo “impossibile” CSS

Effetto di testo “impossibile” CSS

456
0

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.

Previous articleFeed di notizie RSS con PHP e MySQL
Next articleCome rendere il testo Fade in CSS

LEAVE A REPLY

Please enter your comment!
Please enter your name here