Be KreaTief

[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!
edit

5 comments:

  1. Nochmal ein riesengroßes 'Danke!' für den Post, ich find ihn wirklich spitze! :))
    Und ich finds echt cool, dass du mal ein Tutorial zu diesen Links gemacht hast! Ich würd die ja auch gerne bei meinem Blog benutzen, weil mir mein jetziges Menü schon seit längerer Zeit ziemlich auf den Wecker geht, aber ich will nicht, dass das irgendwie 'geklaut' aussieht :(
    Also, wenn du sagst: 'Kein Problem', dann probier ichs mal aus, wenn nicht, dann lass ichs :D

    ReplyDelete
    Replies
    1. Kein Problem. :)
      Freut mich echt, dass er dir gefällt.
      Und *räusper* Ich sage definitiv: Probier's aus! :)
      Bin gespannt wie's ausschaut.

      Grüssis
      myri

      Delete
  2. So ein tolles Tutorial. Ich bin immer wieder überrascht, dass auch ganzen Geschreibsel html etwas so Schönes wird...

    ReplyDelete
  3. das ist ja echt eine ziemlich coole design idee. das muss ich mir wirklich merken.

    ReplyDelete
  4. Ich bin zu blöd dafür :D
    Egal was ich mache, entweder man sieht gar nichts oder das gesamte Menü klebt zerstückelt irgendwo auf der Seite :D
    Ich versteh aber nicht warum, ich hab den Code von dir übernommen und nur das 'h2' gegen eine andere Klasse asúsgetauscht, sonst nichts :(

    ReplyDelete

Fragen, Feedback oder anderes, was du loswerden willst?
Kommentiere über das alte Kommentarsystem (check wieder vorbei um zu sehen, ob ich geantwortet habe) oder G+

Questiosn, Feedback or something else you want to tell me?
Comment using the old system or G+ and make sure to check back to see if I answered