Be KreaTief

Vielleicht erinntert ihr euch noch an meinen Triangle Mania Post, den ich vor etwas über einem Jahr geschrieben habe. Dort habe ich euch gezeigt, wie ihr mit CSS Dreieicke zeichnet und was ihr damit schönes machen könnt. Vor einer Weile habe ich auf Codepen etwas mit den Dreieicken gespielt und mir gedacht, dass es eigentlich total cool wäre, wenn ich dafür ein Mixin hätte. Am besten Grösse, Farbe und Richtung eingeben und dann ist das ganze da, weil jedes Mal zu überlegen, wie ich das jetzt genau machen muss, ist mühsam und nimmt enorm viel Zeit in Anspruch.
Gesagt, getan. Und weil mir ein simples Dreiieck nicht genug war, habe ich noch Rechtwinklige Dreiecke gemacht und mich an gleichseitige herangewagt. Und da ich gerade so schön in Fahr war, folgte noch ein Mixin für Fähnchen.
Das alles habe ich dann für euch in einer Demo zusammengestellt, die ich euch hiermit nicht vorenthalten möchte. Viel erklärt ist nicht, wenn ihr Triangle Mania gelesen habt, wisst ihr, wie man Dreiecke zeichnet. Die Mixins veralgemeinern dass dann nur noch.

Maybe you remember my Triangle Mania Post, I wrote a little over a year ago. There I showed you how to create CSS triangles and what you can use them for. A while ago I was playing around with triangles on codepen and though it would be so much cooler to have a mixin for them. Like giving size color and direction and then the whole code is just there.
So I wrote one. And since a simple triangle was not enough I added right angled triangles and finally did some math to create equilateral triangles. And just because I was already on it I also wrote a mixin for flags.
All of that got together in a demo, which I want to show you guys now. I don't need a lot of explanation, if you read Triangle Mania, you will know how a triangle is created, the mixins just make your work a lot faster.

Triangle Mania Reloaded

Read More

Leute, ihr könnt euch niccht vorstellen, was für ein Chaos es war, bis ich diesen Post hier fertig hatte.
Ich wollte mal wieder ein Video machen, hab alles schön gefilmt. Der Teil vor der Pause war okay und dann hat mein Programm entschieden, dass es meinen Laptop und den externen Monitor beide auf ein Verhältnis von 16:9 bringen will (obwohl ich gesagt habe nur Bildschirm 1). Wie auch immer, ich habe dann einfach einen Tag später noch einmal gefilmt, sodass ich euch jetzt trotzdem das Video präsentieren kann.
Worum geht es? Um Parallax.
Wahrscheinlich habt ihr schon die schönen Seiten gesehen, die parallaxes Scrolling einsetzen, bei denen Animationen ablaufen, sobald ihr runter scrollt. Parallax kann man super für Storytelling einsetzen, aber auch "subtile" Effekte peppen eine Seite auf.
Um so einen "subtilen" Effekt geht es heute.

Read More