Flat Style Breadcrumb Links mit CSS
Kommentare

CSS und CSS3 haben in den letzten Jahren große Fortschritte gemacht. Dazu gehört auch die Tatsache, dass Background Images mittlerweile vollständig durch CSS ersetzt werden können. Web Designer Chris

CSS und CSS3 haben in den letzten Jahren große Fortschritte gemacht. Dazu gehört auch die Tatsache, dass Background Images mittlerweile vollständig durch CSS ersetzt werden können. Web Designer Chris Sponner hat auf seinem Blog Line25 ein Tutorial zusammengestellt, das dies am Beispiel einer Reihe von Pfadnavigationslinks im Flat-Design-Stil veranschaulicht.

Pfad mit Pfeilen

Seine Breadcrumb-Links haben eine Chevron-Form – früher hätte man diese mit Background-PNGs erzeugt, Sponner macht’s ausschließlich mit CSS. Seine Links füllt er zunächst als ungeordnete Liste aus. Jeder Breadcrumb erscheint als

  • mit verschachteltem Anchor-Element. Mit initalem CSS Code stylt er anschließend jeden Anchor als blaues Rechteck, der Text wird zentral darin angeordnet.

    Damit Elemente auch noch später final angeordnet werden können, fügt er position: relative; hinzu, so dass die final positionierten Objekte relativ zum Parent-Element angezeigt werden.

    Um nun den Chevron-Effekt via CSS zu erzielen, wird der :after-Selektor benutzt, der ein zusätzliches Element erschafft, das individuell gestylt werden kann. Um die dreieickige Form hinzubekommen, werden verschiedene CSS Borders verwendet. Ein einfaches blaues Dreieck kann zum Beispiel über Top und Bottom Borders erreicht werden. Im Bild sind diese zu Demonstrationszwecken rot eingefärbt, später werden die Colour Values solid transparent gesetzt.

    Eine weitere Möglichkeit ist, die Left Border in der Hintergrundfarbe einzufärben, um Teile des Breadcrumb-Links zu überdecken.

    Umso länger der Navigationspfad wird, desto mehr Styling-Möglichkeiten kommen hinzu. Man kann zum Beispiel den Dreieck-Effekt am ersten und letzten Breadcrumb-Link entfernen: Dazu nutzt man die :first-child– und :last-child -Selectors, via border-radius rundet man die Ecken ab. Nicht vergessen die Farbe beim Hover zu ändern.

    Das Resultat könnte so aussehen:

    Das Tutorial von Chris Sponner zeigt eine vollständige Demo zum Stylen von Breadcrumb Links mit CSS. Viel Spaß!

  • Unsere Redaktion empfiehlt:

    Relevante Beiträge

    Meinungen zu diesem Beitrag

    X
    - Gib Deinen Standort ein -
    - or -