Webdesign- und Freeware-Tipps
3D-Button mit CSS - erhabener dreidimensionaler Effekt
Wenn du deine Navigationsbuttons, die du mit CSS gestaltet hast, etwas aufpeppen möchtest, bietet sich eventuell ein 3D-Effekt an. Dieser lässt sich ganz einfach erzeugen. Ich habe zuerst in Fireworks einen solchen Button immitiert, um das spätere Aussehen vorher zu testen.
1. Schritt:
Ziehe ein Rechteck auf und verändere dessen Größe danach manuell auf 40 x 100 Pixel. Wähle eine Grundfarbe für deinen Button aus.
2. Schritt:
Wende den Effekt "Innerer Schlagschatten" mit folgenden Werten an: Opazität: 100%, Abstand: 3, Weichheit: 0, Winkel: 315. Als Farbe wählst du zuerst ebenso die Grundfarbe aus. Dann wählst du erneut das Tool zum Farbwechsel und klickst auf das Symbol für die System-Farbtabelle 
. In dieser schiebst du den rechten Regler in den hellen Bereich der Farbe und wählst einen helleren Ton als deine Grundfarbe, der aber noch einen erkennbaren Unterschied zu weiß (Vorausgesetzt weiß ist deine Website-Hintergrundfarbe) hat.
3. Schritt:
Wiederhole Schritt 2 mit den Werten Winkel: 135 und einer dunklereren Nuance der Grundfarbe und sonst gleichen Einstellungen.
4. Schritt:
Füge dem Rechteck einen Farbverlauf hinzu: Von der Grundfarbe bis hin zu der helleren Nuance des inneren Schlagschattens oben und links.
Beginnen sollte der vertikale Farbverlauf etwas über dem Button und enden sollte er kurz vor dem Ende der Fläche (siehe dazu auch die Fireworks-Datei).
5. Schritt:
Je nachdem welche Farbe du benutzt hast, füge noch einen Text in der gewünschten Schriftart ein und wähle eine passende lesbare und kontrastreiche Farbe.
6. Schritt:
In Fireworks muss nun der Verlauf als Grafik exportiert werden, damit er als Hintergrund im Button verwendet werden kann. Dazu legt man ein Segment mit 1 Pixel Breite an und passt die Höhe des Segmensts der Höhe des Buttons (ohne die inneren Schlagschatten) an. Dann wird dieses Segment markiert (eventuell zoomen) und bei Optimieren stellt man GIF und Exakt ein, damit der Verlauf auch fließend gespeichert wird. Mit einem Rechtsklick auf das markierte Segment und "Ausgewähltes Segment exportieren" kann dieses als einzelne GIF-Grafik abgespeichert werden.
7.Schritt:
Im folgenden wollen wir diesen Button mit Hilfe von CSS umsetzen. Als erstes definierst du für einen Link das Grundgerüst des CSS.
a.dreidbutton{
color: #FFF; /* Hintergrundfarbe */
display: block; /* damit kompletter Bereich anklickbar, für IE */
width: 70px; /* leider muss für den IE eine Breitenangabe gemacht werden */
background: #9C0; /* Grundfarbe des Buttons */
padding: 10px 15px; /* Dem Text etwas Raum geben */
text-align: center; /* Text zentrieren */
font-family: Tahoma; /* Schriftart */
font-size: 0.7em; /* Schriftgröße */
text-decoration: none; /* Linkunterstreichung entfernen */
font-weight: bold; /* Text fett machen */
}
8. Schritt:
Dann erweiterst du den CSS-Code mit folgenden Angaben:
a.dreidbutton{
color: #FFF;
display: block;
width: 70px;
background: #9C0 url(button_bg.gif) top repeat-x;
padding: 10px 15px;
text-align: center;
border-top: #DBFF6C 2px solid; /* Farbe und Art des oberen Rands */
border-left: #DBFF6C 2px solid; /* linker Rand */
border-bottom: #698C00 2px solid; /* unterer Rand */
border-right: #698C00 2px solid; /* rechter Rand */
font-family: Tahoma;
font-size: 0.7em;
text-decoration: none;
font-weight: bold;
}
a.dreidbutton:hover{
/* hier werden die Farben der entsprechenden Ränder genau umgekehrt, damit beim Überfahren mit der Maus ein eingedrückter Effekt entsteht. */
border-bottom: #DBFF6C 2px solid;
border-right: #DBFF6C 2px solid;
border-top: #698C00 2px solid;
border-left: #698C00 2px solid;
/* Um den Effekt des Eindrückens zu verstärken wird auch der Text durch verändern des Innenabstands um 1 Pixel verrückt */
padding: 11px 14px 9px 16px;
}
9. Schritt:
Hier seht ihr den umgesetzten Button in der LIVE-Ansicht. Die Klasse wird so auf einen Link angewendet:
<a href="http://www.3dbuttons.de" class="dreidbutton">3D-Buttons</a>.
Spielt mit dem Code und der Fireworks-Datei einfach mal ein bisschen herum, z.B. kann man die Randstärke verringern oder erhöhen, die Randart verstellen und andere Hintergrundgrafiken verwenden. Viel Spaß!
