Be KreaTief

[CSS] Ribbons ✤✤✤

Verfasser:
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!

[QuickTip] Farben mit Transparenz ✤

Verfasser:
Farben mit Transparenz
Heute geht es um den Farbcode!

Es gibt ja mehrere Möglichkeiten im CSS Farben anzugeben, da hätten wir zum einen den Farbnamen, den Hexadezimalen-Code und den rgb-Wert.
Um also den Rechnern in aller Welt zu sagen, dass man bspweise rot haben möchte, gibt es folgende Möglichkeiten:
Rouge
Rosso
Rot
Optisch nicht zu unterscheiden, codemässig allerdings schon:
<span style="color: red;">Rouge</span>
<span style="color: FF0000;">Rosso</span>
<span style="color: rgb(255,0,0);">Rot</span>

Bei einfachen, klaren Farben ist es definitv am schnellsten einfach den Farbnamen einzugeben oder einfach schnell den Hexa-Code zu suchen. Ich selbst hab nie rgb benutzt.
Als ich allerdings auf der Suche nach einer Möglichkeit war mit halbtransparenzen zu arbeiten, da kam mir rgba in den Sinn, welches ich in meinem CSS-Buch stehen hatte.

rgb ≠ rgba

Die beiden Werte haben einen kleinen Unterschied. Zum einen ist rgba neuer. Es wird erst in CSS3 benutzt und ist somit mit den alten IEs nicht verwendbar, aber da ist sowieso alles scheisse, also bitte Internet Explorer-Nutzer, tut euch das nicht an und besorgt euch einen richtigen Browser oder IE8+

Der kleine Unterschied macht das a, welches für Alpha steht. Hier kommt die Transparenz ins Spiel.

Eine rgba-Farbe setzt sich folgendermassen zusammen.

rgba([Rotwert 0-255],[Grünwert 0-255],[Blauwert 0-255],[Transparenzwert 0-1] )

Hier also im folgenden ein kleines Beispiel mit drei inneinanderliegenden div-Containern.


Und etwas blablatext der unter den beiden Farben drunterliegt...

zuoberst liegt das gelbe Quadrat mit 50% Transparenz, darunter das rote mit gleichem Alpha und dann der dummi-Text.

Solche Halbtransparenzen kann man toll benutzen, wenn man beispielsweise den Inline-Text verwendet und einen halbtransparenten Balken drüberlegen möchte.
Oder aber man könnte auch ein Gradient machen, welches von Farbe zu Transparenz verläuft, wie hier:

GradientBalken

Transparenzen sind tollig!
Probiert es einfach mal aus =)
Quadrate-Code

Gradient-Code

Oh und falls ihr zu faul seid den Code selbst zu machen, gibt es hier einen Generator mit dem ihr die rgbas machen könnt, dort findet ihr auch den Gradient-Generator verlinkt.
CSS3 Generator