Vor einer Weile habe ich beschlossen, für meine Buttons ein Sass Mixin zu schreiben, nur ist mir dabei aufgefallen, dass ich mehrere Farben brauche, die sich nicht ganz so einfach generieren liessen, wie anfangs gedacht. Und dann gab es noch das Problem der Schriftfarbe, welche entweder weiss oder schwarz sein sollte, je nach dem, was sich halt besser lesen liess. Man hätte mit mehreren Variabeln lösen können, aber ich hab beschlossen, mit Funktionen zu spielen und das Problem auf diese weise zu lösen.
Verfasser:
Myriam
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
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
Verfasser:
Myriam
Da ihr den ersten Post in dieser Reihe gut fandet, kommt jetzt schon der nächste (hatte Zeit ^^).
Diesmal geht es um das Tutorial, das wohl am meisten Resonanz erhielt. Das Aufgespaltene Datum. Es hat schon vielen Problemen bereitet, aber viele haben es doch ganz gut hinbekommen, und weil die Möglichkeiten hier so gross sind, habe ich mal ein paar Beispiele gesammelt und sie für euch zusammengestellt.
Date Collection
Since you liked the first post in this series there's already the next one (had some time ^^).
This time it's about the Tutorial that got most attention by people. The split up date. It has caused a lot of problems, but a lot of people still made it. And because there are endless possibilities on how to style these, I collected a few examples for you.
Date Collection
Diesmal geht es um das Tutorial, das wohl am meisten Resonanz erhielt. Das Aufgespaltene Datum. Es hat schon vielen Problemen bereitet, aber viele haben es doch ganz gut hinbekommen, und weil die Möglichkeiten hier so gross sind, habe ich mal ein paar Beispiele gesammelt und sie für euch zusammengestellt.
Date Collection
Since you liked the first post in this series there's already the next one (had some time ^^).
This time it's about the Tutorial that got most attention by people. The split up date. It has caused a lot of problems, but a lot of people still made it. And because there are endless possibilities on how to style these, I collected a few examples for you.
Date Collection
Verfasser:
Myriam
Hallo Zusammen :)
Ich dachte ich fang mal mit einer neuen Serie an, die ich "Ready To Use CSS" nenne.
Es gibt mittlerweile viele Techniken, die ich hier schon veröffentlicht habe, die sich aber schön personalisieren und ausbessern lassen.
Ich dachte mir, ich könnt euch von Zeit zu Zeit ein paar verschiedene Styles und Übersichten geben. Gebt mir doch Bescheid, ob ihr das gut findet und mehr davon wollt.
In diesem Fall handelt es sich um eine Menu-Sammlung, in der ich alle Menus, die ich in meinen Tutorials schon einmal erläutert habe, gefeatured habe, ein paar davon mit neuen hover-Effekten. Einfach auf den Button klicken, um mehr zu sehen. :D
Menu Collection
Hey Guys :)
I though I'd start a new series, which I'm gonna call: "Ready To Use CSS".
There are loads of techniques that I've shared with you so far, that can be personalized and taken to the next level.
What I wanna do in this series is to share some new styles and collections with you. Tell me, if you like it and want to have some more of that.
In this case it's about menus. I featured every menu I made so far in my tutorials, a few with stylish new hover styles. Just click on the button below to see more. :D
Menu Collection
Ich dachte ich fang mal mit einer neuen Serie an, die ich "Ready To Use CSS" nenne.
Es gibt mittlerweile viele Techniken, die ich hier schon veröffentlicht habe, die sich aber schön personalisieren und ausbessern lassen.
Ich dachte mir, ich könnt euch von Zeit zu Zeit ein paar verschiedene Styles und Übersichten geben. Gebt mir doch Bescheid, ob ihr das gut findet und mehr davon wollt.
In diesem Fall handelt es sich um eine Menu-Sammlung, in der ich alle Menus, die ich in meinen Tutorials schon einmal erläutert habe, gefeatured habe, ein paar davon mit neuen hover-Effekten. Einfach auf den Button klicken, um mehr zu sehen. :D
Menu Collection
Hey Guys :)
I though I'd start a new series, which I'm gonna call: "Ready To Use CSS".
There are loads of techniques that I've shared with you so far, that can be personalized and taken to the next level.
What I wanna do in this series is to share some new styles and collections with you. Tell me, if you like it and want to have some more of that.
In this case it's about menus. I featured every menu I made so far in my tutorials, a few with stylish new hover styles. Just click on the button below to see more. :D
Menu Collection