3D Text Tower

Haben Sie sich David Desandros Seite angesehen? Sie ist ziemlich schick. Sein Footer ist besonders spaßig

Die Technik ist clever in ihrer Einfachheit. Schauen wir sie uns an.

Mehrere Textschatten

Das wichtigste befähigende Konzept hier ist die CSS3-Eigenschafttext-shadow. Typischerweise ist es so

.shadow {
   text-shadow: 2px 2px 4px #000;
}

Diese vier Eigenschaften sind

[X-Offset] [Y-Offset] [Weichzeichnergröße] [Farbe]

Beachten Sie, dass es keine Vendor-Präfixe gibt, was gut ist (Verwandt: Debatte über Vendor-Präfixe). Sie können auch mehrere Schatten auf denselben Text anwenden

.shadow {
   text-shadow: 1px 1px 0 black, 
                2px 2px 0 black;
}

Mehrere Schatten entstehen durch die Verwendung einer kommagetrennten Liste. Im obigen Code gibt es zwei Schatten, einen mit einem Offset von 1 Pixel auf beiden Achsen ohne Weichzeichnung, den zweiten mit einem Offset von 2 Pixel auf beiden Achsen ohne Weichzeichnung.

Sehen Sie den Trick? Wir können mehrere Schatten anwenden, die jeweils um 1 Pixel versetzt sind, um einen Schatten im "Turm"-Stil darunter zu erzeugen. Standardmäßig werden die Schatten immer tiefer unter dem Text angewendet, aber wir können den Eindruck erwecken, dass er "hervorspringt", indem wir die Schatten nur beim Hovern erscheinen lassen und den Text um die gleiche Tiefe des Schattens nach oben und links verschieben.

.shadow { 
   color: white; 
   font: bold 52px Helvetica, Arial, Sans-Serif;
   text-shadow: 1px 1px #fe4902, 
                2px 2px #fe4902, 
                3px 3px #fe4902;
}
.shadow:hover {
   position: relative; 
   top: -3px; 
   left: -3px; 
   text-shadow: 1px 1px #fe4902, 
                2px 2px #fe4902, 
                3px 3px #fe4902, 
                4px 4px #fe4902, 
                5px 5px #fe4902, 
                6px 6px #fe4902;
}

Übergänge

Wie der obige Code es zulässt, springt der "Turm" beim Rollen sofort hervor. Aber wir können ihn stattdessen "wachsen" lassen, da die meisten modernen Browser jetzt Übergänge unterstützen (d. h. Animationen von einem Erscheinungszustand zu einem anderen). Diesmal haben wir mit den Vendor-Präfixen nicht so viel Glück. Es gibt drei, die wir abdecken müssen

.shadow { 
   color: white; 
   font: bold 52px Helvetica, Arial, Sans-Serif;
   text-shadow: 1px 1px #fe4902, 
                2px 2px #fe4902, 
                3px 3px #fe4902;
   -webkit-transition: all 0.12s ease-out;
   -moz-transition:    all 0.12s ease-out;
   -ms-transition:     all 0.12s ease-out;
   -o-transition:      all 0.12s ease-out;
}
.shadow:hover {
   position: relative; 
   top: -3px; 
   left: -3px; 
   text-shadow: 1px 1px #fe4902, 
                2px 2px #fe4902, 
                3px 3px #fe4902, 
                4px 4px #fe4902, 
                5px 5px #fe4902, 
                6px 6px #fe4902;
}

Hinweis: Sehen Sie sich CanIUse.com für die Browserunterstützung von CSS-Übergängen an.

Spaß mit Skalierung

Der mittlere Abschnitt des Footers hat einen anderen, netten Effekt. Wenn man über die verschiedenen Zeilen fährt, wachsen sie in der Größe. Dies ist ein weiterer CSS3-Effekt: Transform. Wieder mit Vendor-Präfixen

div:hover { 
   -webkit-transform: scale(1.1); 
   -moz-transform:    scale(1.1);
   -ms-transform:     scale(1.1); 
   -o-transform:      scale(1.1); 
   text-shadow: 3px 3px 0 #333; 
}

Fallback-Optionen

Was passiert also in Internet Explorer? Textschatten funktioniert nicht, aber die Positionierung schon.

Demo und Download

Demo ansehen   Dateien herunterladen

Wenn Sie dies irgendwo verwenden möchten, lassen Sie sich von der Idee und der Technologie inspirieren, reißen Sie nicht einfach Davids Footer ab.