[CSS] Triangle Mania ✤✤✤

Irgendwie ist der Post schon seit zwei Monaten in meinen Entwürfen. Ich hab ja schon über Dreiecke geschrieben, hier geht es aber nur um die Dreiecke und was man damit so machen kann...
Ausserdem ist mir aufgefallen, dass in den letzten zwei Monaten meine Seite extrem oft übersetzt angeguckt worden ist und joa, aus irgendeinem Grund hat man ja Englisch als Hauptfach und geht's im Sommer studieren, also gibt's mich jetzt neu in zweisprachig. :)

Hallo zusammen!
Heute möchte ich mit euch über CSS Dreiecke sprechen.

Hey Ya!
Some time ago I realized how often my site is visited from foreign countries, especially the US and since English is my main subject and I'm gonna study it at Uni, starting this fall. I figured I could just start throwing some english text here as well, because it's horrible what google translater spits out...
Okay, so here's my first bilingual post. :)

Today I wanna talk to you about triangles.

Intro

Wie oft habe ich mich schon darüber aufgeregt. Die Seite lädt und lädt und lädt und läd... ihr wisst was ich meine. Das Problem langer Ladezeiten liegt meist daran, dass (zu) viele Bilder im Blogdesign selbst verarbeitet werden. Deswegen habe ich immer nach Möglichkeiten gesucht die Optik des Blogs mit so wenig wie möglich Bildern umzusetzen. Ein Glück gibt es CSS. Ein mächtiges Ding. Vor allem, wenn man ein kleines Geheimnis names Dreieck kennt. Mit Dreiecken lassen sich so viele Dinge machen, die ich auf vielen Blogs bereits mit Bildern gemacht gesehen habe. Aber wennn man nur ein kleines bisschen mehr Aufwand in den Code steckt, dann kann man's ohne. Und gleichzeitig wird dann beispielsweise ein farbliches Redesign des Blogs viel schneller gehen, denn man muss ja bloss die Farben ändern, anstelle gleich das ganze Bild. Grösser und kleiner geht ruckzuck. Das Umsteigen auf CSS ist also eigentlich voller Vorteile. Dennoch, ich gebe zu, es ist zum Teil etwas anspruchsvoll. Aber mit diesem Post möchte ich euch den Umgang mit Dreiecken etwas erleichtern.

How often have I been dissapointed. A page is loading and loading and loading...ya know what I mean. The problem behind long loading time is mostly the use of too many images used only in the blogdesign. Because I hate that, I searched for ways how to create an appealing look with as few images as possible. Luckily there's CSS. A very poweful tool. Especially if you know tha lil' secret called triangle. By using triangles a lot of thing can be done wihout the use of images. If you only put a little efford into coding, you can reduce pictures and make your visitors happy. And at the same time, you make your own life easier because you can switch up colors a lot faster, changing sizes happens in no time. Changing from Images to CSS only brings advantages. Even though I have to admit it can be a little demanding some time. But with this post I wanna try making the "upgrade" easier for ya.

Demo

Für diesen Post habe ich eine Seite geschrieben, die das "Zeichnen" von Dreiecken mittels CSS darstellt und auch ein paar Beispiele gibt. Ich werde zum Teil auf die Seite verweisen, also empfiehlt es sich, während dem Lesen das Demo in einem zweiten Tab zu öffnen und immer mal wieder einen kleinen Blick drauf zu werfen.

For the purpose of Demonstration I wrote a demo page where you can see how triangles are drawn using CSS and a few examples given. Since I am going to be referencing during the post I suggest opening it in a new tab so you can have a look from time to time.

View Demo

How to Draw Triangles

Border heisst das Zauberwort. Wenn ein Browser einen Rand zeichnet, dann werden die Ecken in einem 45°-Winkel geschnitten, was wir nutzen. Indem wir dem Container (in diesem Fall) eine Breite und Höhe von jeweils 0 geben, wird das ganze Objekt in vier Dreiecke aufgeteilt, wie ihr im Demo gleich sehen könnt. Die Breite der Ränder border-width definiert die Grösse der Dreiecke.
Normal entstehen vier rechtwinklige, gleichschenklige Dreiecke, doch wenn man weitere Breiten hinzufügt, kann nahezu jede Art von Dreieck gebaut werden.
Um eines (oder gleich drei) der Dreiecke auszublenden, muss entsprechene Farbe einfach durch das Attribut transparent ersetzt werden.
Mit den breiten Möglichkeiten, die border-style bietet, ist es auch möglich die Dreiecke optisch zu verändern. Das seht ihr ebenfalls im Demo.

Border's the magic word. If a browser draws a border every corner is cut in a 45°-angle, which is what we are gonna use. By giving a container (or other element) a width and height of zero the whole object is parted into triangles. Border-width gives you the actual size of the triangles.
If you don't change anything four isosceles right-angeled triangles are created, but if you keep on adding width attributes you can create nearly any kind of triangle you want. To remove one (or three) triangle(s) just replace the corresponding color with "transparent". By changing the border-style even more looks can be achieved.

Using Triangles

Wie und Wo Dreiecke verwendet werden können, ob bei einem Drop-Down, einem Button, um das Menü zu verschönern, "Follow-Ribbons" oder Sprechblasen, Dreiecken kommen vielerorts zum Gebrauch.
Was für mich das grösste Problem war, dieses Wissen über Dreiecke umzusetzen. Es fiel mir schwer, die Dreiecke einzubauen.
Hier sind zwei Dinge wichtig, zwei Möglichkeiten, wie man mit Dreiecken arbeiten kann.
1. HTML verschachteln
2. Pseudoelemente verwenden
Das eine vergrössert den HTML Code etwas, das andere erweitert die CSS um etwas mehr.
In den Beispielen seht ihr beide Arten, oft muss man für sich selbst einen Kompromiss finden.
Ich mag es eigentlich, den HTML-Code so gering wie möglich zu halten. Vor allem wenn man beispielsweise Gadget-Titel mit Ribbons versehen will, ist es relativ anspruchsvoll die Gadget-Titel um einen div-Container zu erweitern. In diesem Fall, ist der Gebrauch von pseudoelementen wie :before
und :after sehr empfehlenswert.

Where and how R triangles used? Wether it's in a dropdown, a button to fancy up a menu, create "follow-ribbons" or speechbubbles. Triangles can be used everywhere.
Hardest for me was to find out how to put my theoretical knowledge of triangles into practical use, I had problems building them into something.
When working with triangles Two things are important, two different ways are possible. you could:
1. Makie your HTML more complex
2. Use pseudo-element
Logically one magnifies your HTML, the other one enlarges your CSS.
In the examples given in my demo you can see both versions, you have to find the best way for yourself, it's your own choice.
I like to keep my HTML as short as possible. Especially if you wanna ad your triangles for examples to Widget-Titles it can be hard. In that case the use of pseudoelements is much easier.



Nun, es ist wahrscheinlich reltaiv schwer für "unerfahrenere" CSSer aus meinen Beispielen schlau zu werden, wenn man nur den Code hat, also möchte ich den Gebrauche der Pseudoelemente kurz einführen, da es mir anfangs sehr schwer fiel diese beiden Elemente zu verstehen.
Ich mache das am Beispiel einer einfachen Sprechblase.

Als Ausgangslage benötigen wir einen div-Container, den wir mit unserem Text füllen.

Now, it's probably not easy for people unpractised to using CSS to understand anything by seeing my examples. THat's why I just wanna quickly introduce the use of pseudoelements, because at the beginning I had a lot of problems understanding how they work.

We start with a div-container, in which we ad some text.

Da das wahrscheinlich nicht der einzige div-Container in unserem Blog ist, geben wir dem Container eine Klasse und gestalten den Container etwas.

Since it is not the only div-container in our blog, we'll add a class and give it some style.

Damit wir das Pseudoelement platzieren können, müssen wir weiter position: relative; hinzufügen. Genau verstanden wieso hab ich auch noch nicht, aber ohne diese Definition ist es unmöglich das Pseudoelement absolut zu platzieren.
Gut, jetzt kommt das Pseudoelement, ich nehme :after.

To be able to place our element we have to add "position: relative;" to the parrent element.
Okay, now for the pseudoelement, I take :after.

Ein Pseudoelement enthält immer einen content. Wenn der content nicht definiert ist, funktionert es nicht. Das vergisst man schnell mal, darum immer gleich als erstes definieren. Zeitgleich auch gerade die Höhe und Breite, also 0, wie wir es vorher gesehen haben

A pseudoelement has to have a content, if you don't add this attribut the element won't show. I like to forget it, so it's actually allways the first thing I write. At the same time add the width and height of zero, just how you saw before.

Jetzt kommt das Dreieck dran.

Now for the triangle.

Das hängt jetzt irgendwo rum, also muss es positioniert werden. absolut mit Angaben von oben und links.

Okay, that's just floatin' in the air now, so we have to position it. With abolute and information form top and left.

Und dann wär's das. Es ist relativ einfach, wenn man weiss, wie man vorgehen muss.
Am besten ist es immer, in einer "sauberern" Umgebung das ganze auszuprobieren, also auf Seiten wie Codepen oder JFiddler. Das beste dabei ist, dass man sein Ergebnis immer sehen kann.
Sobald es auf einer leeren Seite geklappt hat, ist es auch in einem Blog machbar.

Anwendungsbeispiele findet ihr wie gesagt im Demo (wo ich auch zwei Tutorials verlinkt habe)

Falls es Fragen gibt, funktioniert es gleich wie immer. Schreibt einen Kommentar und ich antworte darauf und versuche euer Problem zu lösen. Falls der Wunsch nach mehr Anwendungsbeispielen besteht, kann ich ja vielleicht nochmals ein Tutorial dazu schreiben.

Ich hoffe der Post hat euch ein paar neue Möglichkeiten geöffnet und vielleicht baut ihr ja jetzt etwas mehr mithilfe von CSS anstelle Bildern.

And that's it. It's relatively easy if you only know what to do.
It's allways easiest if you work in a "clean" eviroment first, on pages like CodePen JFiddler or Dabblet. As soon as you manage to get it there, embedding into the blog is easy.

If there's any questions, just ask. I try to help.

Also I hope my English is okay and you were able to understand me. :)

---

Triangle Mania Reloaded with SASS Mixins