Website Ribbons – Diagonale Banner mit CSS erstellen

Diagonale Banner oder Ribbons diagonal von rechts nach links und umgekehrt waren lange DER Hype. Von Zeit zu Zeit gibt es aber Gelegenheiten, zu denen der Einsatz von diagonalen Ribbons echt passt. Hier alles was es dazu braucht.

 screenshot ribbons

Die beste Art diagonale Banner oder eben Ribbons zu machen, ist noch immer gutes Handwerk. Mit Photoshop, ein bisschen HTML und CSS. Für die Ungeduldigen gibt es auch einige Generators, die einem einen diagonalen Banner inklusive Programmcode erstellen.


Ribbon / Banner Generatoren

image
Screenshot Website Ribbon Generator

Quick and Dirty geht es mit den verschiedenen Generators.

Photoshop Tutorial – Diagonales Banner selbst erstellen

Ein gutes Photoshop Tutorial für die diagonalen Ribbons habe ich bei boxedart.com gefunden.

Ribbons / Banner Vorlagen

ribbon_selbermachen 
Credits: 10ch auf flickr.

CSS Code für diagonales Banner

#topright { position: absolute; right: 0; top: 0; display: block; height: 125px; width: 125px; background: url(http://domainname.com/images/bannername.png) no-repeat; text-indent: -999em; text-decoration: none;}
Quelle: Exploding-Boy.com

 

That’s it. So einfach geht das Du.

Autor: Ralph

Ralph Hutter. Schreibt über Web 2.0 Trends, Fotografie, Netzkultur, geeky Gadgets, iPhone Apps und neue Medien.