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 :)
Update
Da dieser Post einer der meistbesuchten ist und mittlerweile etwas veraltet ist, hab ich ihn jetzt überarbeitet.
Since this post is one of the most popular and a little old already, I decided to revise it.
Die Blogger-Attribution. Man kann zwar sein eigenes Copyright hinzufügen, aber powered by blogger und die Information welche Vorlage man verwendet, bleiben vorhanden. Mich hat das früher, als ich noch die Blogger-Templates verwendet habe, immer extrem genervt und deswegen habe ich mein eigenes Copyright geschrieben. Wie ihr das macht, zeige ich euch in diesem Tutorial.
The Blogger Attribution. You can add your own text, but there still remains information about the template and who powers the site. I never liked it, so I wrote my own copyright information. It is done very easily. Just follow these simple steps.
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
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
So, nach einer gefühlten Ewigkeit mal wieder ein kleiner Quicktip. Ich wurde gefragt, wie ich zwei Bilder nebeneinander platziere. Das möchte ich euch jetzt kurz zeigen.
Ich hab total viele Tutorials zu dem Thema gelesen, diese beiden Versionen kommen aber am häufigsten zu Gebrauch.
After what seems like forever a new quicktip. I've been asked how to place two images next to each other. That's what I want to explain to you today.
I searched like a hundred tutorials about that, but the two solutions I show you here work best for me.
Social Media Buttons sind ein ziemlich grosses Ding momentan. Heute möcht ich euch zeigen, wie ihr welche mit purem CSS und ohne ein einziges Bild gestalten könnt.
Das ganze beinhaltet natürlich hover-Effekte die sich auch auf jede andere Art von Text anwenden lassen.
Man sieht es oft auf Blogs. Das Datum under dem Posttitel. Dazu habe ich bereits einen Post gemacht (hier), doch warum nur das Datum? Warum nicht auch die Kommentare, wer den Post verfasst hat und Labels. Optisch wirkt es schlank und was im Post-Footer unorganisiert wirkt, bekommt dadurch plötzlich Ordnung. Wie ihr so eine UnterPostTitelInforBar bekommt, zeige ich euch jetzt.
Edit: Da es nun schon eine Weile her ist, seit dieser Post on kam und er in letzter Zeit doch immer öfter angeklickt wurde (und immer wieder mal mitgeteilt wurde, dass es nicht mehr richtig klappt, hab ich den Post nun komplett überarbeitet. Jetzt sollte es eig. wieder problemlos klappen.
Ich weiss ja nicht, wie es euch geht, aber ich mag das Archiv-Gadget einfach nicht. Anfangs habe ich es benutzt, aber ich war immer total eifersüchtig auf Oliver's Archiv (Dort ist übrigens jeder Link klickenswert!) und irgendwann hab ich ihn einfach mal gefragt, wie er das macht.
Die Lösung nennt sich JavaScript, der Grundgedanke extrem simpel.
In jeden Blogger-Blog ist ein RSS-Feed integriert, der sich wie folgt aufbaut
DEINESEITE.blogspot.com/feeds/posts/default
Mithilfe des JavaScript liest man die Titel und den Link aus und stellt sie in einer Liste dar.
Ich dacht ja eigentlich immer, dass das nur ein Problem ist, das bei mir auftaucht, aber als ich die letzten Tage bisschen durch die Blogs gewandert bin, ist es mir doch noch bei einigen aufgefallen. Der "Hintergrund-Bug" von Blogger.
Das Problem, das fixierte Hintergrundbild fliesst im Header-Band immer noch mit und hinterlässt eine hässliche Naht. Manchen Leuten fällt es vielleicht nicht auf, aber es ist so ein kleines Detail, das mich persönlich immer in den Wahnsinn treibt.
Mir ist der Fehler einige Male passiert und ich bin ihm nun endlich auf die Schliche gekommen.
I actually allways thought it was a problem only occuring to me, but while I was browsing through some blogs I noticed some other blogs had the "headbandbug" as well.
The problem ist, that the header-band has kinda like its own background which results in ugly seams or even just a band with another background pattern.
This thing happened quite often to me, until I was finally able to find its root.
Hallöchen alle zusammen. :D
So, mal wieder ein Tutorialchen ^^
Ich wurde von einer Bloggerin gefragt, wie man denn ein Bild unter dem Posttitel platzieren könne. Ich hab die CSS für sie geschrieben und weil ich denke, dass es ganz interessant werden kann, hab ich gedacht ich schreib ein Tutorial darüber.
Das Endergebnis schaut zum Beispiel so aus:
Als erstes braucht ihr ein Bild, das ihr platzieren möchtet, das kann ein Pattern sein, oder ein einzelnes Bild, das euren Vorstellungen entspricht, das ladet ihr dann hoch und dann geht es in den HTML-Bereich.
Um den Titel anzusprechen benutzen wir .post h3, das Hintergrundbild wird mit einem pseudoelement platziert.
Als erstes müssen wir allerdigns nur das h3-Element vorbereiten, das machen wir mit einer relativen Platzierung.
.post h3{
position: relative;
}
Haben wir das, können wir schon das pseudoelement beschreiben. Der Content muss wie so gut wie immer leer sein, die Position absoulute und 100% von oben, also direkt unterhalb des Posttitels. left muss 0 sein und dann noch Höhe und Breite des Bildelements. Und das Bild wird durch den Bildlink verlinkt.
Das wär's eigentlich, allerdings kann es dann vorkommen, dass das Bild in den Text reicht, also müsst ihr im ersten Teil noch eine margin einfügen, die der Höhe eures Bildes entspricht in meinem Fall sehe die obere CSS also so aus:
Auf Wunsch heute ein kleines Tutorial zum Thema Übersicht in Bildern, auch "Wie man Bilder in Blogger" nebeneinander platziert etc.
Unser Endergebnis wird ausschauen wie die statischen Seiten die ihr unter Rezepte und DIY findet. Aber weil ich grad noch was mit dem Hover ausprobieren wollte, hab ich trotzdem ein DEMO geschrieben, die Bilder wurden mit der gleichen Technik nebeneinander platziert.
Okay. Zu Beginn braucht ihr eure Bilder, die direkt die richtige Grösse haben sollten. Ich mag quadratisch und denke, dass 200px Breite eigentlich reichen.
Halli Hallo Leutesche ^^
So, nach einer gefühlten Ewigkeit wieder einmal ein Tutorial. Kein DIY, sondern mein erstes Photoshop Elements/Zeichnen Tutorial.
Warum das es hier ist? Ich denke, ich werde die Bildbearbeitungs-Tuts doch wieder hier einstellen, weil ich gesehen hab, dass auf der Tutseite zum Teil Werbung drin ist (was ich nicht gesehen hatte, wegen Werbeblocker - übrigens empfehlenswert ^^) und das ist vielleicht etwas mühsam. Ich werde die TUtorials, bei denen ich Code verwende, allerdings trotzdem noch immer dort veröffentlichen, einfach weil Blogger da immer noch zu sehr einschränkt. Aber die anderen Tuts kommen wieder her, in den nächsten Tagen wird das also noch geändert. :)
So, nun aber zum eigentlichen Tutorial. So, Photoshop Elements. Ich hatt's ja zusammen mit meinem Graphic Tablet bekommen und gemeint, dass es nur gewisse Vorzüge hat, weil es ja im Gegensatz zu CS6 (oder ältere CS-Versionen) nur eingeschränkt ist, was zum Beispiel Layer Styles angeht. Da ich nun aber herausgefunden habe, dass ich Styles importieren kann, bin ich jetzt doch ganz happy damit und die Brush-Packs sind auch etwas, was ich mit Gimp nicht machen kann. Wie man einen Brush definiert, kann ich euch aber auch noch für Gimp zeigen, wenn ihr wollt. Dann schreib ich noch einen Nachtrag.
Das Vorgehen mit dem Zeichnen, Scannen und "ausbessern" funktioniert aber eigentlich genau gleich, wie in PSE.
Okay. Ich fang an mit dem Defnieren eines Brushes (hab das dann auch noch in Video, dann könnt ihr es euch anschauen. Allerdings Musik- und Kommentarlos. Mit Musik wird in Deutschland ja nie richtig angezeigt. Also GEMA ist wirklich scheisse bei euch -.-'') und dann nachher noch, wie die Blumis gezeichnet werden. Es ist eigentlich nur der klassische Aufbau und ich zeig euch das dann einfach mit einem Blümchen. Ich glaube Muster kann jeder irgendwie zeichnen. Und ich war so im Fluss, dass ich vergessen habe Fotos zu schiessen... *ascheübermeinhaupt*
Okay, genug gelabert. Let's begin.
Was ihr braucht: Papier, schwarze Filzstifte (am besten zwei, einen dicken und einen dünnen für Ausmalen und Detailarbeit), einen Scanner (oder Fotoapparat), PSE (/oder Gimp, dann aber bitte nen Kommi mit dem Wunsch schreiben!), etwas Geduld, das Zeichnen nimmt etwas Zeit in Anspruch.
Und jetzt noch in Videoform :)
Joa, ihr seht das geht eigentlich ganz schnell. Der Hauptteil ist das Zeichnen der Blumis. Die ich übrigens gemacht habe, weil ich so Freude an meinem Doodle-Bild hatte, dass ich fand eigentlich wär ein pattern ganz cool davon (was ihr schön im HG sehen könnt ;D) und darum braucht ich die PNGs, wenn ich die schon hatte waren Brushes naheligend xD Also, zeichnen.
