Photoshop

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.

5 Kommentare

  1. Ralph sagt

    @david Sie sind nicht mehr in Mode. Aber ich werde sie ausgiebig nutzen, um das 10 jährige Jubiläum des Blogs, den 1000sten Artikel und jeden anderen Mist anzukündigen. Hattest Du mal einen Ribbon aufgeschaltet?

  2. Hallo Ralph,
    vielen Dank für die vielen nützlichen Tipps in Deinem Blog. Ich bin auch ein Fan von den „schrägen“ digitalen Bannern. Hab das Tool gleich mal ausprobiert… und …siehe da: nun habe ich auch einen auf meiner Seite http://www.yogabasics.de. Und auch als ehemaliger Lomo-Fan habe ich mir die zwei apps gleich mal auf mei IPhone gezogen und werde es gut nutzen.

    Stellst auch Blogger mit einer DE-Domain vor ;-) ?

  3. Ich hatte mal einen geschaltet. Das war damals als der Löi Kulturminister werden wollte. Und für meine Sammelaktion für rouge.ch hab ich selbst mal einen gemacht.

  4. Saubere Sache! Habe gerade mal einen Ribbon in meinen Blog eingebaut. Was alt ist, muss nicht schlecht sein. Auch Lance Armstrong hat während der Tour de France einen Ribbon im Twitterprofil geschaltet und seiner Community zur Verfügung gestellt. Die Aktion war äusserst erfolgreich und erhöhte den Bekanntheitsgrad seiner Stiftung „Livestrong“ in Europa.

Kommentare sind geschlossen.