Meistkommentierte Artikel
[CSS3] Spielereien mit „transform“
Es ist schon beeindruckend welche Möglichkeiten CSS3 bietet. Wo wir früher ein Grafikprogramm bemühen mussten, können wir das gleiche Ergebnis heute mit reinem CSS Code erzeugen. Wie wäre es beispielsweise mit einen animierten Stern (keine Ahnung, wie man das Ding sonst nennen soll), den wir als Button verwenden können.
So wird unser Endergebnis aussehen. CSS pur, keinerlei Bilddateien…
Was werden wir machen? Wir legen sechs gleich große Quadrate übereinander. Das erste bleibt unverändert; das zweite drehen wir um 15 Grad, das dritte um 30 Grad und so weiter. So erhalten wir mit sechs Quadraten einen vollständigen Stern. Darüber werden wir einen weiteren Stern legen, wiederum bestehend aus sechs Quadraten. Beschriftung, Animation und Schatten hinzugefügt und fertig ist der Sternen-Button.
Habt ihr Lust? Dann mal los.
Basics
Wir benötigen zunächst ein Div, in welches wir alle weiteren Elemente einfügen werden.
.container {
margin: 20px auto;
padding: 0;
width: 200px;
height: 200px;
}
Nun definieren wir zwei weitere Divs, in die später der äußere sowie der innere Stern platziert werden.
.outer_boxes {
position: relative;
z-index: -1;
}
.inner_boxes {
position: relative;
z-index: 1;
width: 200px;
height: 200px;
}
Wir müssen für diese beiden Elemente einen z-index definieren. Der äußere Stern soll unten, der innere Stern darüber angeordnet werden. Der innere Stern benötigt also einen höheren z-index als der äußere.
Kommen wir nun zu den Elementen des äußeren Sterns, den sechs Quadraten. Wir definieren Größe, Position und Hintergrundfarbe:
.outer_boxes .box1, .outer_boxes .box2, .outer_boxes .box3, .outer_boxes .box4, .outer_boxes .box5, .outer_boxes .box6 {
position: absolute;
width: 200px;
height: 200px;
background: #3f4c6b;
}
Damit haben wir die sechs Quadrate übereinander angeordnet. Um einen Stern zu erhalten, müssen wir die einzelnen Quadrate drehen. Das erste (box1) bleibt unverändert, die weiteren fünf drehen wir wie folgt:
.outer_boxes .box2 {
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
.outer_boxes .box3 {
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.outer_boxes .box4 {
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.outer_boxes .box5 {
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.outer_boxes .box6 {
-moz-transform: rotate(75deg);
-webkit-transform: rotate(75deg);
-o-transform: rotate(75deg);
-ms-transform: rotate(75deg);
transform: rotate(75deg);
}
Ergebnis:
Das gleiche wiederholen wir für den inneren Stern:
.inner_boxes .box1, .inner_boxes .box2, .inner_boxes .box3, .inner_boxes .box4, .inner_boxes .box5, .inner_boxes .box6 {
position: absolute;
top: 15px;
left: 15px;
width: 170px;
height: 170px;
background: #258dc8;
z-index: -1;
}
Und die Drehung der einzelnen Quadrate:
.inner_boxes .box2 {
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
.inner_boxes .box3 {
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.inner_boxes .box4 {
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.inner_boxes .box5 {
-moz-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-o-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.inner_boxes .box6 {
-moz-transform: rotate(75deg);
-webkit-transform: rotate(75deg);
-o-transform: rotate(75deg);
-ms-transform: rotate(75deg);
transform: rotate(75deg);
}
Damit haben wir die beiden übereinanderliegenden Sterne fertiggestellt. So schaut’s aus:
Widmen wir uns nun der Beschriftung. Unser Beispiel soll zu einem Downloadbutton für WordPress werden. Wir definieren zunächst ein Div, in das wir den Text platzieren werden:
.text {
width: 200px;
margin: 0 auto;
padding: 20px 0;
font-size: 24px;
font-weight: normal;
font-family: 'Segoe UI', Geneva, Arial, Helvetica, sans-serif;
text-align: center;
line-height: 1;
color: #333;
text-shadow: 1px 1px 5px #111;
}
Der Text wird einen Link auf die WordPress-Webseite enthalten. Allerdings wollen wir nicht, dass dieser wie ein Link formatiert wird. Wir wollen keine Unterstreichung:
.text a {
text-decoration: none;
}
Die Beschriftung besteht aus drei Teilen, die wir wie folgt formatieren:
.text .dl {
margin: 10px auto;
}
.text .wp {
margin: 0 auto;
font-size: 36px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 5px #333;
}
.text .now {
margin: 10px auto;
}
Bringen wir nun noch etwas Bewegung ins Spiel. Wir animieren den inneren Stern mittels transition. Bei :hover soll dieser einmal um 360 Grad gedreht werden. Dazu ergänzen wir folgendes für das bereits bestehende Div .inner_boxes:
.inner_boxes {
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
Neu fügen wir hinzu:
.inner_boxes:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
Als Abrundung werden wir nun dem äußeren Stern noch einen Schlagschatten verpassen. Achtet aber darauf dem Schatten die Farbe der äußeren Quadrate zu geben, ansonsten… na probiert es doch aus.
Das definieren wir bei den Quadraten des äußeren Sterns. Wir erweitern den vorhanden Code um folgenden Eintrag:
.outer_boxes .box1, .outer_boxes .box2, .outer_boxes .box3, .outer_boxes .box4, .outer_boxes .box5, .outer_boxes .box6 {
-moz-box-shadow: 0 0 15px #3f4c6b;
-webkit-box-shadow: 0 0 15px #3f4c6b;
box-shadow: 0 0 15px #3f4c6b;
}
So, das war’s im Stylesheet.
In die Webseite einbinden
Wie kriegen wir das nun in unsere Webseite eingebunden?
... <div class="container"> <div class="outer_boxes"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> </div> <div class="inner_boxes"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> <div class="box6"></div> <div class="text"><a href="http://de.wordpress.org"> <div class="dl">Download</div> <div class="wp">WordPress 3.2.1</div> <div class="now">now</div></a> </div> </div> </div> ...
Hier könnt ihr den Button live in Aktion erleben:
Und hier könnt ihr den Button herunterladen:
Zugegeben, ein Haufen Code für einen Button. Aber: Text wiegt nicht so schwer wie Grafik. Während wir mit dem CSS-Code auf wenige Kilobytes kommen (wenn überhaupt), würde eine Grafik ein vielfaches davon verschlingen.
Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite:
