Toller CSS3-Trick: Hover-Effekt bei Buchstaben

CSS3 Mouseover-Effekt mit Animation von Buchstaben

CopePen-Code-Snippets

Auf der Webseite von CodePen kann man eine große Anzahl von Code-Snippets in HTML, CSS und JavaScript finden. Die Community lädt ein zum Entdecken und Teilen von interessanten Code-Beispielen mit einem Editor und einer direkten Vorschau im Browser.

Cooler Hover-Effekt für Buchstaben des Alphabets

Ein super interessantes Beispiel ist da das Code-Snippet „Opening Type“ von Diego Pardo. Er bezeichnet darin seinen CSS Hover Effekt mit „Just hover on letters“.

Ganz einfach erklärt, zeigt es eine Animation von Buchstaben, welche bei einem Drüberfahren mit der Maus aufklappen. Zusätzlich zeigt der Hover-Effekt einen tollen Schatten und sieht dabei echt gut aus!

Demobeispiel ansehen oder als Zip-Datei herunterladen


[Beispiel ansehen: Grafik anklicken!]

Sie können das Beispiel von Diego Pardo auch hier ansehen oder aber als Zip-Datei (28 KB) herunterladen!

Mein Musterbeispiel ansehen

Ich habe das Beispiel bearbeitet und möchte Ihnen meine Version der CSS Mouseover-Animation zeigen. Klicken Sie dazu auf die nachstehende Grafik oder auf den Link unter dem Bild!


Musterbeispiel ansehen!!

Hier finden Sie den HTML- und CSS-Code für meine Demo

HTML-Code:

<div class="foo">
  <span class="letter" data-letter="A">A</span>
  <span class="letter" data-letter="B">B</span>
  <span class="letter" data-letter="C">C</span>
  <span class="letter" data-letter="D">D</span>
  <span class="letter" data-letter="E">E</span>
  <span class="letter" data-letter="F">F</span>
  <span class="letter" data-letter="G">G</span>
  <span class="letter" data-letter="H">H</span>
  <span class="letter" data-letter="I">I</span>
  <span class="letter" data-letter="J">J</span>
  <span class="letter" data-letter="K">K</span>
  <span class="letter" data-letter="L">L</span>
  <span class="letter" data-letter="M">M</span>
  <span class="letter" data-letter="N">N</span>
  <span class="letter" data-letter="O">O</span>
  <span class="letter" data-letter="P">P</span>
  <span class="letter" data-letter="Q">Q</span>
  <span class="letter" data-letter="R">R</span>
  <span class="letter" data-letter="S">S</span>
  <span class="letter" data-letter="T">T</span>
  <span class="letter" data-letter="U">U</span>
  <span class="letter" data-letter="V">V</span>
  <span class="letter" data-letter="W">W</span>
  <span class="letter" data-letter="X">X</span>
  <span class="letter" data-letter="V">V</span>
  <span class="letter" data-letter="Z">Z</span>
</div>

CSS-Anweisungen:

*, *:before, *:after{
  box-sizing:border-box;
}
body{
  font-family: 'Verdana', sans-serif;
}
div.foo{
  width: 90%;
  margin: 0 auto;
  text-align: center;
  background-color: #ddd;
  border: 10px solid #000;
}
.letter{
  display: inline-block;
  font-weight: 900;
  font-size: 6em;
  margin: 0.2em;
  position: relative;
  color: #00B4F1;
  transform-style: preserve-3d;
  perspective: 400;
  z-index: 1;
}
.letter:before, .letter:after{
  position:absolute;
  content: attr(data-letter);
  transform-origin: top left;
  top:0;
  left:0;
}
.letter, .letter:before, .letter:after{
  transition: all 0.3s ease-in-out;
}
.letter:before{
  color: #fff;
  text-shadow:
    -1px 0px 1px rgba(255,255,255,.8),
    1px 0px 1px rgba(0,0,0,.8);
  z-index: 3;
  transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
}
.letter:after{
  color: rgba(0,0,0,.11);
  z-index:2;
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
}
.letter:hover:before{
  color: #fafafa;
  transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
}
.letter:hover:after{
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
}
Näheres zu CodePen erfahren Sie hier: t3n.de
Tweet about this on TwitterShare on Google+1Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *