Schicke CSS3 Elemente - Buttons ausschließlich mit CSS3 stylen

von Blacklist | 0 | 30500 Aufrufe

Anzeige Hier werben

Der Marktanteile der Browser, die HTML5 und CSS3 unterstützen, wächst immer weiter. War es damals für Entwickler noch schwerer, modulare Buttons zu schreiben bzw. bei Änderungen neue Hintergrundbilder zuschneiden zu müssen, erleichtern heute die neuen Funktionen von CSS3 den Alltag. Im folgenden Artikel werden einige Funktionen näher beschrieben und schließlich ein eigenes Button-Set erstellt.

Ziel ist es, ausschließlich mit CSS3 einen ansprechenden modularen Button beschreiben zu können. Hier eine Vorschau, was möglich ist:

Bild zu Schicke CSS3 Elemente - Buttons ausschließlich mit CSS3 stylen
Beispielbild der Buttons

CSS3 Grundlagen

Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
Titel

Abgerundete Ecken (border-radius)

border-*-radius

Benutzt wird der border-*-radius um einzelne Ecken abzurunden. Die Einstellungen des border-*-radius kann entweder einen oder zwei Werte in Form einer Länge oder Prozentangabe einer einzelnen Ecke annehmen. Da allerdings nicht alle Browser Prozentangaben unterstützen, sind Pixelangaben vorzuziehen.

Die Syntax:

border-*-*-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?

Beispiele:

Das folgende Beispiel zeigt die Abrundung der rechten oberen Ecke mit 10px in der horizontalen und vertikalen Ebene.

 
css
1
border-top-right-radius: 10px;
Bild zu Schicke CSS3 Elemente - Buttons ausschließlich mit CSS3 stylen

Bei der Definition durch zwei Werte wird der horizontale und vertikale Radius der 1/4-Ellipse dargestellt. Wird nur ein Wert definiert, wird dieser dann auf beide Radien gleich angewendet. Wenn ein Wert 0 ist, gibt es eine Ecke und keine Rundung.

 
css
1
border-top-left-radius: 5px 10px;
Bild zu Schicke CSS3 Elemente - Buttons ausschließlich mit CSS3 stylen
Vergrößerte Darstellung des Radiuses
border-radius

Die Einstellungen des border-radius wird benutzt, um alle vier Ecken gleichzeitig abzurunden, wobei ein oder zwei Wertesets verwendet werden, welche jeweils eins bis vier Längen- oder Prozentangaben beinhaltet.

Die Syntax:

border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

Beispiele:
 
css
1
2
border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px; 

Das unter Beispiel zeigt eine Abrundung aller Ecken mit 10px in horizontalen und vertikalen Ebene, bis auf die linke obere und rechte untere Ecke, die in der horizontalen Ebene nur 5px statt 10px besitzt.

 
css
1
border-radius: 5px 10px / 10px;
Bild zu Schicke CSS3 Elemente - Buttons ausschließlich mit CSS3 stylen

Das erste Set mit 1-4 Werten definiert die horizontalen Radien aller vier Ecken. Das optionale zweite Set, welches durch einen '/' vom ersten Set getrennt wird, definiert die vertikalen Radien. Wird nur ein Set benutzt, gelten die Angaben für die horizontalen und vertikalen Radien.

Für jedes Werteset gilt folgendes:
Sind alle vier Werte angegeben, repräsentieren diese die top-left, top-right, bottom-right und bottom-left Radien. Wenn der Wert für bottom-left weg gelassen wird, besitzt er den selben Wert wie top-right und wenn bottom-right fehlt, wird der Wert von top-left übernommen. Wenn nur ein Wert angegeben wird, gilt dieser für alle vier ecken für die horizontalen und vertikalen Radien.

Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
Titel

Schattenwurf (box-shadow)

Die box-shadow Eigenschaft akzeptiert mit einem Komma getrennte Schatten-Listen, welche jeweils 2-4 Werte besitzen. Die Werte setzen sich wie folgt zusammen: horizontale Versatz, vertikaler Versatz, optionale Weichzeichnung und optionale Ausbreitungsdistanz. Zusätzlich kann noch ein Farbwert und das Keywort ‘inset‘, welches für den inneren Schatten verantwortlich ist, angegeben werden.

Die Syntax:

box-shadow: none | <shadow> [ , <shadow> ]*
<shadow> = inset? && [ <length>{2,4} && <color>? ]

Beispiele:
 
css
1
2
3
4
box-shadow: 10px 10px;
box-shadow: 10px 10px 5px #888;
box-shadow: inset 2px 2px 2px 2px black;
box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600; 
Der klassische Schattenschlag

Ein äußerer box-shadow wirft einen Schatten, als ob die border-box des Elements licht undurchlässig wäre. Der Schatten wird nur außerhalb der Randkante gezeichnet.

Das Beispiel zeigt einen grauen Schatten ohne Versatz und mit einer Weichzeichnung von 5px einer Ausbreitungsdistanz von 5px.

 
css
1
box-shadow: 0 0 5px 5px #888; 
Bild zu Schicke CSS3 Elemente - Buttons ausschließlich mit CSS3 stylen
Der innere Schatten

Eine innere box-shadow wirft einen Schatten, als ob alles bis auf die Box licht undurchlässig wäre. Der innere Schatten wird nur innerhalb der Randkante gezeichnet.

Das Beispiel zeigt einen grauen inneren Schatten ohne Versatz und mit einer Weichzeichnung von 5px einer Ausbreitungsdistanz von 5px.

 
css
1
box-shadow: inset 0 0 5px 5px #888; 
Bild zu Schicke CSS3 Elemente - Buttons ausschließlich mit CSS3 stylen
Mehrere Schatten

Der box-shadow erlaubt durch eine mit Komma getrennte Liste, dass Elemente mehrere Schatten haben. Wenn mehr als ein Schatten angegeben ist, werden die Schatten von vorn nach hinten übereinander geschichtet.

Das Beispiel zeigt fünf Schatten, die in der folgenden Reihenfolge beschrieben werden:
zuerst einen schwarzen Schatten mit einer Weichzeichnung und einer Ausbreitungsdistanz, zweitens ein hellgrünen Schatten mit Versatz nach rechts oben, drittens einen roten Schatten mit einer Weichzeichnung und einer Ausbreitungsdistanz nach rechts unten, viertens einen gelben Schatten mit Versatz nach links unten und schließlich einen blauen Schatten mit einer Weichzeichnung und einer Ausbreitungsdistanz nach links oben.

 
css
1
box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue; 
Bild zu Schicke CSS3 Elemente - Buttons ausschließlich mit CSS3 stylen
RGBa Schattenfarben mit Deckkrafteinstellung

Der box-shadow kann weiter mit der bei CSS3 RGBa Farben enthaltenen Deckkraftangabe verschönert werden.

Das Beispiel zeigt einen schwarzen Schatten mit Versatz und einer Deckkraft von 50%.

 
css
1
box-shadow: 5px 5px rgba(0,0,0,0.5); 
Bild zu Schicke CSS3 Elemente - Buttons ausschließlich mit CSS3 stylen
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Nein
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
Titel

Textschatten (text-shadow)

Die text-shadow Eigenschaft fügt Schatten zum Text hinzu. Er akzeptiert eine durch Komma getrennte Liste von Schatten der diese auf den Text und text-decoration des Elements anwendet.

Die Syntax:

text-shadow: none | <shadow> [ , <shadow> ]*
<shadow> = [ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]

Beispiele:
 
css
1
2
text-shadow: orange 0 -2px;
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; 
Bild zu Schicke CSS3 Elemente - Buttons ausschließlich mit CSS3 stylen

Beispiel-Button-Set mit CSS3

Nach diesem Grundeinstieg wird jetzt eigenes Button-Beispiel erstellt.
Zuerst wird eine Verlinkung mit einer Button-Klasse geschrieben.

<a href="" class="button">Button</a>

Zu empfehlen ist, für jede Styleart eine eigene Klasse zu schreiben. So hat man später eine modulare Kombinationsmöglichkeit. Ziel ist es, sich nur noch an folgenden html-Code-Aufbau zu orientieren.

<a href="" class="button green criss-cross">Green Button</a>

Für das Grundgerüst des Buttons wird folgender CSS-Code geschrieben:

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.button {
    background-color: #666666;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    margin: 0px 20px;
    margin-bottom: 40px;
    padding: 12px 20px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.button:hover {
    box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 15px rgba(255, 255, 255, 0.4) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
}

.button:active {
    box-shadow: 0 2px 0 #393939, 0 4px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.2) inset;
    top: 7px;
}
Bild zu Schicke CSS3 Elemente - Buttons ausschließlich mit CSS3 stylen

Für die einzelnen Farben werden die jeweiligen Klassen erstellt.

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
.green {
    background-color: #7EC244;
    box-shadow: 0 5px 5px #518631, 0 9px 0 #395F26, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
}

.green:hover {
    box-shadow: 0 5px 5px #518631, 0 9px 0 #395F26, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 15px rgba(255, 255, 255, 0.4) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
}

.green:active {
    box-shadow: 0 2px 0 #395F26, 0 4px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.2) inset;
}
Bild zu Schicke CSS3 Elemente - Buttons ausschließlich mit CSS3 stylen

Zum Schluss kommt noch der spezielle Border-Radius-Effekt.

 
css
1
2
3
.criss-cross {
    border-radius: 35px 5px 35px 5px;
} 
Bild zu Schicke CSS3 Elemente - Buttons ausschließlich mit CSS3 stylen

Mit ein wenig Kreativität lassen sich mit diesen Mitteln eine Vielzahl von verschiedenen modulare Buttons erstellen.

Bild zu Schicke CSS3 Elemente - Buttons ausschließlich mit CSS3 stylen

Zur Hilfestellung können alle hier gezeigten Beispiele heruntergeladen werden:

Downloads

Für diesen Artikel stehen zusätzliche Dateien zum Herunterladen bereit. Der Download ist nur für registrierte Benutzer möglich. Die kostenlose Registrierung dauert nur wenige Sekunden.

Fazit und Perspektive von CSS3

Mit den neuen CSS3-Funktionen lassen sich sehr schnell modulare und anpassungsfähige Buttons erstellen. Einzig die fehlende Unterstützung einiger Funktionen im Internet Explorer trüben das Bild. Dieses Problem sollte sich allerdings mit dem stetig wachsenden Benutzung der neuesten Browserversionen in nächster Zeit von alleine lösen.

Über den Autor: Blacklist
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten