[CSS] Ribbons, Triangles and what you can do with 'em ✤✤✤

Ich gestehe, der Titel ist etwas lang, aber genauso lang ist die Reihe der Gedankengänge, die ich nun schon mit Ribbons und Dreiecken verbracht habe.
Also möchte ich heute noch einen Post zu diesem Thema schreiben. Ein paar coole Anwendungen die ich im Netz gefunden habe, die echt richtig toll sind, zum Teil aber noch von mir verändert wurden, weil ich das lieber anders machen wollte und weil mir noch zu viel HTML im Spiel war :D

Ich habe ein tolles Video gefunden, das zeigt, wie man Dreiecke zeichnet und gleichzeitig hat es mich noch auf eine wahnsinnig tolle Seite geführt. Auf CodePen könnt ihr coden und das Ergebnis direkt angucken. Damit üb' ich jetzt immer schön alles, auch wenn die Platzierungen nicht wirklich so funktionieren, wie ich wollte. Deswegen gab's vor ein paar Tagen auch so ein kleines Chaos mit meinen Follow-Ribbons, die ich gemacht habe. Die sind fast zwei Stunden lang irgendwo rumgeflattert, bevor ich gesehen habe, dass der Fehler an einem "position: relative;" anstelle "absolute" lag. Hat mich ziemlich genervt. Ich such das Video noch, sobald ich es wiederfinde, werde ich den Link nachreichen.
So, legen wir los. Ich mach das alles schön direkt in einem CodePen, brauchen wir kein ganzes Demo zu, damit geht's schneller ^^
Wir beginnen mit einer anderen Version für ein Ribbon, zwei um genau zu sein. Zum einen möchte ich kurz erklären, wie ich meine Follow-Ribbons gemacht habe. Und dann machen wir noch ein gezacktes Ribbon.
Es geht nicht konkret um den Einbau, sondern nur um die Gestaltung, soll beim reduzierten HTML bleiben und bloss dem Gestaltungs-CSS. Den hover füge ich dennoch ein, aber beim konkreten Einbau kann ich sonst auch noch in den Kommentaren helfen. :)
Ansonsten muss ich sagen, dass ich die Prefixes die man für gewisse CSS3-Befehle braucht, zum Teil etwas faul war. In der konkreten Anwendung müssten dann immer alle verwendet werden. Zu den Bildern, sind sie jeweils auf 600px verkleinert, aufgrund der Farbe ist es allerdings relativ schwer alles zu erkennen, darum müsstet ihr draufklicken, um die volle Version zu sehen. :)

Follow-Ribbon

(Titel sind jeweils Links zum ansehen C= )
Angefangen hat das alles damit, dass ich mir mal die Grundmasse für mein Ribbon überlegt habe, dann habe ich die Logos gebastelt und auf picasa hochgeladen. Das sind alles weisse pngs. Bloglovin' zum Beispiel schaut so aus click.
Soviel zur Vorbereitung, der Rest wird in CSS und ohne Bilder gemacht. Ein Plus könnte man theoretisch auch ohne Bilder machen, aber für die anderen könnte das etwas schwer werden. ^^
Wir beginnen mit dem HTML, das einen Link um einen div-Container baut, der die id="bloglovin" trägt.

Im nächsten Schritt definieren wir für den Container eine Breite, Höhe und Hintergrundfarbe. Und dann ist "position: relative" sehr wichtig. Der Rest ist für den Hover-Effekt, dass das Ribbon, wie so rauskommt. :)

Wir definieren den Hover

Und jetzt kommt das Dreieck unten dran. Wir machen das wieder mit einem Pseudoelement. After.

Eigentlich ready für den Einbau des Bildes, doch wenn wir hovern, schaut das so aus:

Um das zu flicken müssen wir das after-element während des hovers definieren.

Okay, jetzt kommen wir zu :before. Hier wird das Bild als Hintergrundbild definiert. Und dann sind wir fertig. :)




Wie gesagt, ansehen könnt ihr euch das ganze auch noch "live" wenn ihr auf den Titel dea Abschnitts klickt. :)

Gezacktes Ribbon

Eine etwas andere Variante, wie man die Zacken machen kann, die ich schon im letzten Post über Ribbons gefeatured hatte. Was euch besser gefällt, müsst ihr selbst entscheiden, ich mag diese Version eigentlich ganz gern. :)
Wir starten mit einem div-Container und einem Heading. Obendrüber habe ich noch ein Webfont eingebunden, aber das braucht euch nicht weiter kümmern :)

CSS. Wir definieren eine Box um das Heading. Das wird unser Ribbon-Body.

In den :before und :after-Elementen des Containers definieren wir zwei Dreiecke, die wir auf einer Seite so platzieren, das es aussieht, als würde ein Dreieck herausgeschnitten werden. Den vollständigen Code seht ihr gleich, zu Beginn muss ich aber auf das seltsame Rendering von Firefox hinweisen. Firefox macht um die Dreiecke eine dunkle Linie. Das kann nur dadurch behoben werden, dass wir den Border, den wir für das Dreieck nicht brauchen eben doch defnieren und zwar mit einer gepunkteten Linie.


So schaut's dann schon viel schöner aus:

Als nächstes kommen wir zum Heading, das wir definieren.

Ihr fragt euch jetzt, wie wir die andere Seite mit den Dreiecken ausstatten, wenn wir doch beide :after und :before-Elemente des Containers für eine Seite verwendet haben? Ganz einfach: wir verwenden einfach die pseudo-Elemente des h2-Tags. :)


Und das ist dann auch schon wieder alles. Ich mag diese Ribbons. Sie sind toll :)

Stiching

Eine Naht, am Rand eines Ribbons, das wär doch toll. Das einzige Problem ist, dass man Dreiecken keinen border geben kann, den man dazu braucht, weil sie selbst auf einem Border bestehen. Das Video (welches ich noch nicht gefunden habe, aber ich weiss noch welche Seite es war, ich find's noch!) hat eine andere Möglichkeit gezeigt, wie man Dreiecke kreiren kann. Wenn sie an eine Box gesetzt werden, funktioniert das problemlos. Und zwar mit einem rotierten Quadrat.
Die Form ist die gleiche wie bei meinen Follow-Ribbons, jetzt nur mit Naht.
Wir beginnen wieder meit einem div-Container und der Basis-CSS.

Im :after-Element zeichnen wir ein Quadrat. Ich bin ehrlich, ich habe keine Formel für die Grösse des Quadrats, es entstand durch "trial and error" wie man so schön sagt. Ihr müsst einfach für eure Grösse probieren, bis es irgendwie passt.

Wir rotieren das Quadrat um 45° und platzieren es dann so, dass es direkt an unser Basis-Quadrat anschliesst.

Nun erweitern wir unser HTML, um einen div-Container im bereits stehenden Container. Der wird unsere Naht enthalten.
Es gäbe die Möglichkeit das alles im bestehenden Container zu lösen, mit einem box-shadow, der den Rand darstellen würde, aber ich hab mich hier für das grössere HTML entschieden, weil es weniger Konfusionen gab, und weil ich das auch noch mit einem Border-Dreieck ausprobieren will und dann will ich das alles nicht nachträglich bauen müssen. :D

Okay, was machen wir jetzt damit?
Wir definieren die Grösse so, dass wir auf jeder Seite einen Rand von fünfzig Pixel haben. Diesen Container zentrieren wir innerhalb des anderen. Dann definieren wir Schrift und -grösse des Inhalts und einen "dashed" border, and allen Seiten, bis auf die untere, da dort das Dreieck ist.

Im :after-Element machen wir das gleiche, nur mit dem Quadrat :)

Das ist es eigentlich schon. Und weil ich gerade Freude dran hatte, habe ich dann noch bisschen mit dem HTML gespielt. Die CSS bleibt die selbe. Ich hab die Platzierungen dann aber direkt im HTML gemacht :D

Tag

Und ich sehe, der Post wird wiedermal lange...
Aber das ist der letzte Punkt. Ich fand das nur so toll als ich es gesehen habe, dass ich es gleich selbst ausprobieren musste. Der Code und alles ist eigentlich so gut wie 1:1 übernommen von hier aber ich dacht ich schreib jetzt doch noch eine Version für ein einzelnes Tag, die dann auf Deutsch ist.
Mithilfe von Dreiecken wird hier eine Rundung aus dem Tag ausgeschnitten, das ist echt cool!
Wir beginnen mit einem div-Container, der ein span, sowie einen Link enthält. Ihr könnt den span auch zu einem div und den Link zu einem Heading machen, wie ihr wollt. :)

Die Basis wird als nächstes definiert.

Im ersten pseudoelement möcht ich euch jetzt die zwei Dreiecke zeigen. Die schauen so aus:

Diese Dreiecke werden jetzt abgerundet.

Dann bekommen sie die Farbe des Hintergrundes und niemand ahnt, dass dahinter Dreiecke stecken. Ich find das extrem faszinierend!

Gleiches wird auch mit dem anderen pseudoelement gemacht.

Als nächstes defineren wir den Link. Hier ist der Link ebenfalls kleiner als der äussere Container, das Stiching wurde also sozusagen auf die gleiche Weise gemacht, wie bei mir. Hier konnte allerdings zusätzlich mit outline eine weitere Linie hinzugefügt werden, um eine art 3D-Effekt für den "Faden" zu erzeugen. Im vorherigen Beispiel ist dies nicht möglich, da wir nicht die kompletten Elemente umrahmen.

Und die Pseudoelemente des Links werden für die anderen beiden Ecken verwendet.


Und dann noch das Loch.


Und das war's dann auch schon. :)
Ich denke, dass Dreiecke wahnsinnig grosses Potential haben, das war das Ziel dieses Post. Gleichzeitig habe ich aber auch bemerkt, wie viel man mit pseudoelementen machen kann. Ich habe sie früher nicht oft verwendet, aber in letzter Zeit bin ich nahezu besessen von diesen Dingern. Und es gibt so viele. Wenn man einmal zu wenige hat, dann fügt man eben einfach noch ein zusätzliches, leeres Element ein und schon hat man noch was, das man verwenden kann. :)