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!
-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!
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!
-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!
-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