Spielereien mit CSS3


Bildquelle: Pexels @ pixabay

CSS3 gibt es nun schon drei Jahre – aber manche Funktionen habe ich bislang noch wenig genutzt. Durch ein Design für eine Kundin bin ich nun darauf gestoßen. Und bin begeistert, was sich mit CSS3 ganz einfach umsetzen lässt! Schatten, abgerundete Ecken, schräge Texte – all das ist nun ganz einfach. Hier mal ein paar Beispiele:

Schatten

Ein DIV mit Schatten zu hinterlegen, um es vom Hintergrund plastisch abzuheben, macht in vielerlei Hinsicht Sinn. Mit diesem einfachen Code gelingt das: Schatten-Box!

Schatten-Box!
-webkit-box-shadow: 10px 10px 30px 0px rgba(51,51,51,1); 
-moz-box-shadow: 10px 10px 30px 0px rgba(51,51,51,1);
box-shadow: 10px 10px 30px 0px rgba(51,51,51,1);

Abgerundete Ecken

Die Ecken noch abrunden? Dann müssen noch ein paar Codebefehle hinzugefügt werden: Schatten-Box mit abgerundeten Ecken!

Schatten-Box mit abgerundeten Ecken!
border-radius:10px;
-webkit-border-radius:10px;

Schräger Text

Und jetzt das ganze noch leicht schief stellen? Dann fehlen noch ein paar Zeilen im CSS: Schräge Schatten-Box mit abgerundeten Ecken!

Schräge Schatten-Box mit abgerundeten Ecken!
-moz-transform:skew(-10deg,10deg); /* Firefox 3.6 Firefox 4 */ 
-webkit-transform:skew(-10deg,10deg); /* Safari */ 
-o-transform:skew(-10deg,10deg); /* Opera */ 
-ms-transform:skew(-10deg,10deg); /* IE9 */ 
transform:skew(-10deg,10deg); /* W3C */

Beim Schräg-Stellen sollte man auf den Font achten – ein einfaches Verdana, wie hier, kann dabei leicht verzerrt aussehen. Dank Google-Fonts sind ja heute wesentlich mehr Schriftarten im Web möglich als nur die Standard-Schriftarten.

Gedrehter Text

Um einen Text komplett zu drehen, braucht man die folgenden CSS3-Befehle zur Rotation. Komplett gedrehter Text!

Komplett gedrehter Text!
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
writing-mode: tb-rl;

Toll, oder? Ich bin ganz fasziniert…. 🙂

Noch mehr Spielereien und ganz einfache Tools,
um den jeweiligen Code zu ermitteln, findet man bei www.css3maker.com


Scroll to top