Texte, Projekte und Fundsachen rund um Medien, Bildung und Computer

Flexible Glossy-Buttons mit Inkscape und CSS
Erstellt am: 30 Apr. 2007

Vor einiger Zeit habe ich auf der Webseite von Firefox einen Bildknopf gesehen, der nicht nur gut aussah, sondern sich in der Größe anpasst und ohne Javascript auskommt. Mit meinem Lieblingstool inkscape will ich zeigen, wie es geht.

Das Prinzip

Das Prinzip ist so einfach, wie genial und schon seit Langem bekannt. Ein CSS-Element wird mit einer Hintergrundgrafik versehen. Ein link "a" (anchor) kennt verschiedene Zustände je nach dem ob der Mauszeiger über dem Link ist (hover) oder angeklickt wurde (active).

Das Ganze sieht danach so aus: button.html

Zuerst einmal wird ein Bereich mit einem Hintergrund versehen. Dieser Hintergrund wird oben links platziert. Danach wird ein Bereich als Element von button definiert und das Hintergrundbild unten links platziert. Durch die Verschachtelung schieben sich die beiden Hintergrundbilder übereinander. Das Element hat zwar eine feste Breite, aber es passt sich der Höhe des Textes bis zu einem gewissen Grad an.

/* fancy button */
button,
p.button {
width: 232px;
margin: 0;
}

span.button-text {
padding-left: 20px;
}

.button a span.blue-button {
background: url(blue-button.png) no-repeat bottom left;
display: block;
min-height: 20px;
padding: 10px;
}

.button a {
background: #5c72d2 url(blue-button.png) no-repeat top left;
display: block;
color: #dadada;
text-decoration: none;
}

.button a:hover span.blue-button,
.button a:active span.blue-button {
background: url(blue-button.png) no-repeat bottom right;
}

.button a:hover,
.button a:active {
background: #233dae url(blue-button.png) no-repeat top right;
color: #ffffff;
cursor: pointer;
}
....

<a href="#">
Impress me
</a>

Mit dieser Technik lassen sich nicht nur Knöpfe, sondern auch Kästen mit abgerundeten Ecken, Verläufen oder Schattenwurf erstellen. Die Grafik muss entsprechend länger sein oder man arbeitet mit 2 unterschiedlichen Hintergrundgrafiken. Jeweils eine für Oben und Unten.

Tutorial: In 4 Schritten zum eigenen Button

Dies ist das erste Tutorial zum Thema Webseitengestaltung mit Inkscape. Insgesamt sind 4-5 geplant, die ich Beizeiten reinstellen werde. Ich empfehle euch außerdem den Text 3D- und Beveleffekte mit Inkscape als Grundlage.

Schritt 1: Wir zeichnen ein längliches Rechteck

Zuerst einmal brauchen wir Inkscape. Das Vektorgrafik-Programm gibt es kostenlos für fast alle Betriebssysteme.

Nach dem Start sollten wir unter "Datei » Dokumenteneigenschaften" das Zeichengitter einblenden und das Einrasten auf den Gitterpunkten einschalten. Nun klicken wir auf das Rechteck-Tool und ziehen eine längliche Box auf. Wenn wir nun "Shift+Strg-F" drücken, dann erscheint ein Dialogfenster zum Einstellen der Füllung und Kontur der Box. Wir sollten die gewünschte Grundfarbe wählen, die Deckung auf 100% setzen und einen kleinen schwarzen oder grauen Rahmen hinzufügen.

Wenn wir abgerundete Ecken wollen, dann klicken wir einfach auf den rechten, oberen Eckpunkt des Rechtecks und ziehen ihn etwas nach unten.

Schritt 2: Eine verkleinerte Kopie mit Farbverlauf erstellen

Nun folgt ein etwas kniffliger Teil. Ihr solltet euch dafür ein wenig mit Farbverläufen in Inkscape auskennen.

Wir klicken auf unser Rechteck und erzeugen mit "Strg+D" eine Kopie. Diese verkleinern wir ein wenig, indem wir ein- bis zweimal "Strg-(" drücken. Danach rufen wir mit "Shift-Strg+F" den Fülldialog auf und setzen die Füllung auf Weiß und die Gesamtdeckkraft auf 0,5. Den Rahmen um das Rechteck löschen wir.

Zurück zu unserem hellen Rechteck. Mit "Strg+F1" rufen wir das Verlaufstool auf und ziehen einen kleinen Verlauf von der Oberkante unseres Rechtecks ein wenig nach unten. Wer es plastisch mag, der kann jetzt noch den Verlauf verändern, indem er auf Verlauf » Bearbeiten klickt und den Verlauf so verändert, dass die 2. Farbe volle Deckkraft hat und ein wenig heller ist, als die Grundfarbe des unteren Rechtecks.

Schritt 3: Grafik kopieren und Verlauf anpassen

Wir markieren unsere Grafik "Strg+A" und verdoppeln sie "Strg-+D". Diese Kopie setzen wir rechts, bündig an unsere erste Box. Nun klicken wir einmal auf die rechte Box um das Rechteck mit dem Verlauf auszuwählen. Danach mit "Shift-Strg+F" den Fülldialog aufrufen und die Gesamtdeckkraft über den Schieber auf ca. 0,22 stellen. Gegebenenfalls kann auch der Verlauf noch ein wenig gestaucht werden.

Schritt 4: Grafik exportieren und anpassen

Inkscape bietet an, Grafiken im PNG-Rastergrafik Format abzuspeichern. Wir gehen auf "Datei»Exportieren" und wählen die Breite doppelt so groß wie gewünschte Breite der Buttons (z.B. 460 bei 230px Größe).

Nun muss diese Grafik noch angepasst werden. Es ist auch möglich, diesen Schritt in Inkscape zu machen, aber nicht so unkompliziert wie in Gimp oder Photoshop.

Vorgehensweise: Zuerst fügt man ein Ebene zu und füllt diese mit der von der Webseite verwendeten Hintergrundgrafik (z.B. Weiß). Danach verschiebt man die Ebene in den Hintergrund und verbindet beide Ebenen miteinander. Jetzt schneidet man einen Bereich von der Mitte der Grafik bis oberhalb der unteren Ecken der Boxen (transparent) aus.

Damit das Tutorial nachvollzogen werden kann, hier noch einmal die SVG-Datei für Inkscape:

button.svg (63 KB)

Popup-Menüs ohne Javascript

Was mit CSS möglich ist, zeigt auch die Seite der Financial Times Deutschland. Dort werden Popup-Menüs nur über Stylesheets realisiert.

Artikel Bookmarken bei...

0 Kommentar(e)

Keine Kommentare bis jetzt.

Beitrag kommentieren

Ich freue mich jederzeit über Fragen, Anmerkungen und Kritik. Also gebt euch einen Ruck und kommentiert diesen Artikel.

zur Übersicht

Aktuelle Projekte

Immoblienmakler Berlin - Hauptstadtmakler

Lehranstalt für Gartenbau und Floristik Großbeeren

Name
eMail	optional für Antworten: wird nicht veröffentlicht!
Webseite	optional
Kommentar
Kontrollcode	Spamvermeidung: bitte den Code im Bild eingeben