Ein super einfaches responives 1-level Menu, mit Flexbox und gaaanz wenig JS.

A super simple 1-level menu with flexbox and just a teeny tiny bit of JS.

See the Pen responsive 1-Level Menu by Myri (@bekreatief) on CodePen.

Damit es hier auch mal wieder was zu lesen gibt, ausser das Versprechen, dass es denn bald wieder losgeht, schreibe ich jetzt mal wieder ein kleines Tutorial. Die ganzen Deadlines und der Weihnachtsstress haben mich nun doch etwas sehr eingeholt, aber als ich heute Morgen gefragt wurde, wie man denn einen Header macht, der sozusagen hinter dem Content liegt, wollte ich unbedingt eine Anleitung dazu für euch schreiben. Und hier kommt sie nun.

First of all so sorry for being a little lazy with my English in the posts, but the neglecting will hopefully end really soon. There are just a couple of deadlines and the necessary Christmas Stress right now that have been keeping me a little too busy. But when I was asked today how you'd create a header that lies behind the content, I wanted to write it for you.

Ich wurde letztens gefragt, wie ich denn meine Navigation sticky gemacht habe und habe versprochen, dass ich dazu einen Post schreibe.
Eigentlich wollte ich euch das Script präsentieren, das ich für mein Menu geschrieben habe. Da ich dieses in letzter Zeit für mehrer Projekte verwendet habe, ist mir aber aufgefallen, dass es ein bisschen Probleme macht. Das ist nicht das Problem meines sticky scripts, es ist das Problem von vielen Scripten. Nach Recherche und viel Trial und Error, habe ich nun ein Script zusammengestellt, dass das Problem nicht aufweist.

Ich wurde gefragt, wie man es macht, dass man bestimmte Posts aus dem Kontext nimmt, sie also nicht auf der Startseite anzeigt, dafür aber irgendwo anders anzeigen kann, nicht nur auf der Postseite selbst, sondern sozusagen "mehrere einzelne Blogs" hat. Das ist eigentlich ziemlich einfach und geht auch gar nicht so lange. Was wir machen ist mit einem einzelnen Label zu arbeiten, welches wir hidden nennen. Damit können wir beliebige Posts aus dem Kontext nehmen. Um dann unter den versteckten Labels noch zu sortieren, sortieren wir dann in der URL nach bestimmten Labels.

I was asked, how you take out certain posts out of the context, so that they will not be displayes on the index page, but still be showing on item and label pages, so you kinda get a "second blog". That's pretty simple and it takes almost no time. What we do is work with a label, to which we'll add a bit of jquery.

Dass ich und JavaScript uns nicht besonders gut verstehen, habe ich glaub ich schon ein paarmal erwähnt. Trotzdem versuche ich ja in letzter Zeit so bisschen damit zu arbeiten. Heute bei der Arbeit musste ich einen Turn off the lights button schreiben und habe festgestellt, dass kein Script das gemacht hat, was ich wollte. Irgendwie hab ich mir dann aus sechs verschiedenen Scripten selbst was zusammengebastelt, dass dann am Ende das getan hat, was ich haben wollte. Und weil ich eigentlich gar nicht sooo viel haben wollte, sondern eigentlich nur das, was in den Kommentaren der jeweiligen Posts auch gefragt wurde (und dann eigentlich nie beantwortet wurde...) habe ich beschlossen meinen Button mit euch zu teilen :)

Me and javaScript haven't really been best friends. that's a fact most of you probably will now about. Still, I try to get a little closer to it, and try writing some simpler scripts. Today at work I had to create a turn off the lights button and realized that all over the internet I could not find one script that did what I wanted. So I had to mix about six different ones until I got the result I was looking for. And since I did not have wishes like noone else but had the same questions usually asked in the comment section of each of the tutorials I decided to share my script with you.

Nach einer gefühlten Ewigkeit wieder einmal ein Gimp-Tutorial. Letztens habe ich mithilfe von verschiedenen Actions in Photoshop einen Effekt hinbekommen, der mir richtig gut gefallen hat und ich hab mich gefragt, ob man das wohl in Gimp rekonstruieren kann.
Das Ergebnis hat mir dann sogar noch besser gefallen als die Photoshop-Version, also musste ich es euch zeigen :D

After what feels like an eternity a new gimp-tutorial. A few days ago I was playing around with actions in photoshop and achieved an effect that I really liked and I asked myself if I could recreate it in Gimp.
I ended up liking the end result even more than the photoshop version so I had to show you guys :D

Okay, ein bisschen geschummelt habe ich. SVG steht für Scalable Vector Graphics aber meine Definition stimmt eher :D
Um Vektoren geht es, nicht wegrennen Mathefeinde, das hier ist nämlich richtig cool! Mathekenntnisse sind keine vorhanden, dafür gibt es Inkscape.
SVG unterscheiden sich von herkömmlichen Bild-Formaten dadurch, dass sie nicht auf Pixeln basieren. Man kann sie so gross aufblasen wie man will, ohne dass sie je verpixelt werden. Ausserdem sind SVGs der Schlüssel zu eigenen Icon-Fonts, doch heute möchte ich euch erst einmal erklären, wie der Arbeitsverlauf ist, und wie ihr den von Inkscape generierten Code nachher aufräumt.

Okay, I tricked a little bit. SVG does not really stand for superb vector goodness but scalable vector graphics, which tells you something about it, but my definition is more attractive. It screams Check us out, which you really should, because these graphics are great. Even if it says vector, you don't have to do the maths, my new buddy inkscape does that. SVG are different from usual images because they are not pixel-based. They are made out of vectors, so out of lines. What that means is that you can blow them up, scale like crazy and they'll still look the same, just bigger. Also, SVG is the key to creating an icon-font, but today I want to show you the workflow and how to clean up the code inkscape puts out.

Oh Mann, der letzte Post hier ist auch schon Ewigkeiten her...
Die Inspiration hat mich momentan etwas verlassen, aber heute hab ich mit meinem neuen Photoshop CS6 (es leben Studentenrabatte von -80%!) etwas herumexperimentiert. Und weil ich fand, dass dieser Effekt für einen Header eigentlich sicher schön funktionieren könnte, möchte ich ihn mit euch teilen. :)

Man, it's been ages since my last post...
Inspiration has decided to leave me for a while, so it seems. But today I was experimenting with my new Photoshop CS6 (thanks to student reduction from 80 percent!) and since I really liked the end results and though it might look really nice as a header I wanted to share it with you :)