Was wollen wir mit diesem Rezept erreichen? Wir wollen eine hübsche, horizontale Navigation mit dem Sliding Doors Effekt; das mit möglichst wenig Markup und dazu noch so flexibel wie möglich. So soll es dann bei uns nachher aussehen:

Das Ergebnis

Und hier noch die Live-Ansicht der HTML-Seite.

Fangen wir mit dem Markup an. Der HTML-Teil für unsere Navigation ist nur eine Unordered List:

<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>&Uuml;ber mich</a></li>
<li><a href=”#”>Bilder</a></li>
<li><a href=”#”>Kontakt</a></li>
<li><a href=”#”>Extra langer Link</a></li>
</ul>

Das war schon der gesamte HTML-Teil. Beginnen wir nun mit dem Styling per CSS. Fangen wir mit dem ul-Tag an:

ul {
list-style: none;
width: auto;
height: auto;
overflow: hidden;
}

Das overflow: hidden; dient dazu, den Float der Listenelement ohne zusätzliches Markup wieder aufzulösen. Denn die einzelnen Listenelemente werden wir mittels float: left nebeneinander setzen:

li {
float: left;
width: auto;
margin-right: 2px;
background: url(images/right.jpg) no-repeat right;
}

Der Hintergrund ist die rechte Tür unserer Sliding Door:

Nun brauchen wir noch die linke Kante unserer Sliding Door, dann sind wir auch schon fertig:

li a {
width: auto;
height: 27px;
line-height: 27px;
padding: 0px 20px;
background: url(images/left) no-repeat left;
color: # 333;
}

Das Bild für die linke Tür:

Wie es funktioniert:

Wir haben dem Listenelement ein Hintergrundbild mit ausreichender Breite und einem no-repeat Befehl gegeben. Außerdem soll das Bild rechts im Listenelement angeschlagen werden. Verbreitert sich das Listenfeld auf Grund eines längeren Link-Textes so wird einfach mehr vom Hintergrundbild sichtbar.

Der Hintergrund des eigentlichen Links ist das linke Bild der Sliding Door und links angeschlagen. Es liegt über dem Hintergrund des Listenelements und verdeckt diesen. Dadurch wandert dieses Ende immer mit der Größe des Feldes mit. Durch den Befehl des paddings kann man zusätzlich den Innenabstand verändern und den Linktext zentrieren.

Alle Zutaten zu diesem Rezept herunterladen

Heute veröffentlicht Pixel-Kingdom ein neues kostenloses Webseiten Template. Reines CSS, valides HTML und CSS. Von der Struktur auch für WordPress geeignet. Das Template kann kostenlos für kommerzielle und nicht kommerzielle Zwecke verwendet werden. Allerdings muss der Hinweis im Copyright Hinweis im Footer zusammen mit dem Link zu Pixel Kingdom erhalten bleiben. Diesen kann man aber entfernen, wenn man eine Kopie des Templates kauft. Dazu einfach eine Mail an info@pixel-kingdom.com schreiben.

Hier gehts zum Download

Hier gehts zum Demo

Die kosten- und serifenlosen Schriften für einen Webdesigner

1. Geo Sans Light

Die Geo Sans Light besitzt zwei Schriftschnitte: Regular und Kursiv.

2. Cicle

Die Cicle kommt mit stattlichen 7(!) Schriftschnitten daher: Regular, Kursiv, Fett, Fett Kursiv, Semi, Semi-Kursiv und “Shadow”. Eine wirklich schöne, klare Schrift.

3. Alte Haas Grotesk

Ups, sieht die nicht der Helvetica, bzw. Helvetica Inserat sehr ähnlich? Nur etwas mitgenommen? Ja, vielleicht, vielleicht ist das auch der Grund, weshalb sie in meiner Liste auftaucht.

4. Blue Highway

Da ist sie wieder, mein Favorit! Wunderschöne Schrift in Anlehung an die Interstate, die amerikanische Version der DIN-Schrift.

5. Florencesans

Diese wunderschöne serifenlose Schrift kommt mit stattlichen 24(!) Schriftschnitten daher und ist ein absolutes Muss für jeden Webdesigner.

6.Enigmatic

Diese Schriftart ähnelt stark der Eurostyle, einer sehr beliebten Serifenlosen Schrift.

7.Share

Wunderschöne Schrift, leider existiert nur ein Schriftschnitt.

8.Vera Humana 95

Wunderschöne Schriftmit vier Schriftschnitten. Erinnert ein wenig an die Optima.

9.Lacuna

Kommt mit zwei Schriftschnitten.

10.Wendelin

Kommt mit acht Schriftschnitten.

Die kostenlosen, serifenbetonten Schriftarten für Webdesigner

11.Liberation Serif

Elegante, schöne Serifenschrift. Kommt mit vier Schriftschnitten.

12. Sanford

Leider nur ein Schriftschnitt…

13. Bodoni XT

Ein Bodoni-Clon, was soll man mehr dazu sagen, als: “Jetzt unbedingt herunterladen!”.

14. Gentium

Ich mag einfach diese klassischen Serifen, kommt mit vier Schriftschnitten daher.

15. Charpentier Renaissance Pro

Habe ich eben gesagt, ich mag klassische Serifenschriften? Tja, wenn man ein klassisches Buch digital kopieren möchte, ist diese Schriftart genau richtig.

16. Bullpen

Auch wenn sie hier jetzt nicht wirklich gut reinpasst, ist sie dennoch eine schöne Serifenschrift.

Die kostenlosen Handschriften für einen Webdesigner

17. Scriptina

Meiner Meinung nach die schönste, kostenlose Handschrift.

18. Jane Austin

Die Schrift der gleichnamigen Autorin von Stolz und Vorurteile, sehr schöne Handschrift.

19. Windsong

Schöne Handschrift, wie häufig besitzt sie nur einen Schriftschnitt. Aber wer brauch schon eine kursive Version einer Handschrift?

20. Freebooter Script

21. Estrya’s Handwriting

22. Honey Script

Kostenlose Grunge/Trash Schriften für Webdesigner

23. Hawaii Killer

Leider besitzt diese Schriftart keine Umlaute, da muss man dann selber ran…

24. WC Roughtrad

Hübsche Sketchbook Schrift, einmal als Regular und einmal in Bold.

25. Sketch Rockwell

Im ersten Teil meines Artikels “Top Fonts für Webdesigner” biete ich eine kleine Auswahl an schönen, serifenlosen Schriftarten an, die kostenlos im Internet zum Download bereit stehen. Ich habe darauf geachtet, dass die Schriften auch über Umlaute verfügen, was ja nicht immer der Fall sein muss.

Platz 1: Blue Highway

Meiner Ansicht nach die schönste kostenlose Schriftart. Sie ähnelt stark der kostenpflichtigen Schriftart “Interstate” und kommt mit 5 Schriftschnitten daher: Regular, Bold, Condensed, Grunge und Kapitel.

Hier gehts zum Download von Blue Highway

Platz 2: Geo Sans Light

Die Geo Sans Light ähnelt sehr stark der Gill Sans, eine wirklich schöne und sehr filigrane Schrift. Die Geo Sans Light kommt mit zwei Schriftschnitten daher, der Regular und der Italic.

Hier gehts zum Download von Geo Sans Light

Platz 3: Pilsen Plakat

Eine schöne Plakat Schrift, die man für Überschriften im Retro Stil benutzen kann. Allerdings besitzt die Pilsen Plakat nur den Regular-Schriftschnitt.

Hier gehts zum Download von Pilsen Plakat

Platz 4: Vera Humana 95

Die Vera Humana 95 ähnelt sehr stark der Optima, in meinen Augen die eleganteste serifenlose Schriftart. Die Vera Humana 95 hat vier Schriftschnitte zu bieten: Regular, Regular Italic, Bold und Bold Italic.

Hier gehts zum Download der Vera Humana 95

Platz 5: Wendelin

Ebenfalls ein schöner serifenloser Font. Die Wendelin kommt mit stattlichen 8 Schriftschnitten: Regular, Regular Italic,  Semibold Italic, Semibold, Kapitel, Bold Extended, Bold und Bold Italic.

Hier gehts zum Download von Wendelin

Dieses Texturen-Packet beinhaltet 4 Backsteintexturen. Die Texturen sind alle 1600×1200 Pixel groß. Allerdings sind sie nicht kachelbar, dass heißt man kann sich nicht nahtlos aneinander fügen. Aufgenommen wurden sie damals mit einer Fuji Finepix S5000 mit einer Aufläsung von circa 6 Megapixeln.

Die Benutzung der Texturen ist absolut kostenlos. Einzige Voraussetzung ist eine Erwähnung von Pixel-Kingdom.com bei kommerziellen und nicht kommerziellen Projekten.

Danke!

Texturen jetzt herunterladen!