[CSS] Ribbons ✤✤✤

Bevor ich jetzt mit meinem technischen Tutorial loslege, wollte ich sagen, dass ich bei der liebe Mara einen kleinen Gastpost zum Thema Buttercreme geschrieben habe. Schaut doch mal vorbei :)

So, jetzt kann ich anfangen über Ribbons zu sprechen. Ich hab diese Technik im Rahmen meines neuen Blogdesigns gelernt und ich war so begeistert, weil ich viele tolle Templates kenne, die diese Technik verwenden, allerdings Bilder benutzen. Und ja, ich gesehe, ich hab mich diesen Leuten dann überlegen gefühlt. Nur so ganz wenig xD
Okay, ich hab die einzelnen verschiedenen Ribbons während des Verfassens des DEMOs dokumentiert. Es sind nur zum Teil die Endversionen gezeigt, ich hab nachher noch einen kleinen "Feinschliff" vorgenommen. Aber die endgültige CSS hab ich euch noch in die div-Container gepackt.
Das ganze Geheimnis der Ribbons liegt in Dreiecken. Der ganze Effekt entsteht durch Dreiecke, wie wir zeichnen. Und die Technik lässt sich relativ einfach in Blogger-Blogs einbauen. Einfach jeweils die Pseudoelemente ansprechen, und es sollte klappen.
Die pseudoelemente sind :before und :after und wir haben sie ja schon ein paar Mal verwendet. Auch bei den Speechbubbles, die ich vorher hatte, gab es ein Dreieck, das im :after-Element steckte. :D

Okay, genug gelabert, bei Wichtigem erwähne ich das gleich.
Beginnen wir mit dem Markup.
In meinem Fall hab ich vier Arten auf's Mal demonstriert, die Ribbons sollten im oberen Teil von hellen Kästchen sein, in denen dann der Code angezeigt werden sollte. Angefangen hat es aber mit den div-Containern, die eine ID erhalten haben. Und h2-Tags, die die späteren Ribbons darstellen sollten.



Die CSS für die weissen Kästchen und dann zeigt sich schon die Grundform. Das müsst ihr jetzt nicht machen, wenn ihr das einfach nur auf ein Heading in eurem Blog anpassen wollt.





Als nächstes wird der Titel allgemein gestaltet. Bei mir hatten sie alle eine gemeinsame Farbe, gemeinsame Schrift, Hintergrund etc. Die spezifischeren Angaben folgen.





Okay, so viel zur Basis, jetzt geht es ans eigentliche Gestalten der Schleifen.
Angefangen hat es mit einer beidseitigen Schleife. Damit die Schleife nachher hinter dem weissen herkommt, muss das Heading breiter als der Container sein, wenn er etwas unterhalb hängt schaut's auch etwas besser aus, damit noch etwas weiss übersteht.
Ganz wichtig ist aber die Angabe: POSITION: RELATIVE. Ohne diese relative Platzierung wird das mit dem Platzieren der Pseudoelemente schwer.





Und jetzt fügen wir die Dreiecke hinzu:



Dann ist es eigentlich schon fertig, aber ich hab noch einen Rand hinzugefügt:







Und dann ist Ribbon Nummer 1 schon fertig. Es ist wirklich keine Hexerei. :)

Ala nächstes kommt das rechts platzierte Ribbon. Hier mit Rand, danach kommt der allerdings wieder weg, für das kleine Extra.





Hier brauchen wir nur eines der Elemente.





Unser Basic-Ribbon ist wieder getan, warum machen wir jetzt aber nicht noch etwas mehr.
Mit dem anderen pseudoelement legen wir ein Dreieck in der Hintergrundfarbe über den Rand. Damit das dann allerdings gut aussieht, müssen wir den Rand entfernen. (ich hab ihn auskommentiert, aber man kann ihn genausogut einfach löschen.)







Und jetzt schaut's doch schon viel interessanter aus.

Beim links platzierten Schleifchen zu Beginn wieder mit Rand, dann aber ohne.









In dem Fall hab ich ein kleines Stückchen hinter dem Dreieck platziert. Im Beispiel noch mit alpha-Wert im Demo ohne, weil sich die beiden überlappen und es schaut mit einheitlicher Farbe besser aus. Aber ihr könnt euch das sicher vorstellen.







Und zum Schluss noch eine letzte Schleife in der die Dreiecke oben platziert werden.









Und das ist schon alles. Ich denke, ich muss nicht zu jeder CSS etwas sagen, habt ihr aber dennoch noch irgendwelche Fragen zu bestimmten Eigenschaften, dann schreibt einfach einen Kommentar. :)
Probiert's mal aus!