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.

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.

Ein Problem, das sich immer wieder einmal stellt. Man hat zwei Dinge, die man nebeneinander stellen will aber der Mist will sich einfach nicht nebeneinander anordnen. Zumindest ging es mir immer so.
Mit diesem Trick funktioniert es allerdings immer.

A problem I faced pretty often. You have to containers you wanna have next to each other but that crap just doesn't word. At least that's what I experienced.
But with this trick, it always works.

HTML. Oft gehe ich davon aus, dass es eine Selbstverständlichkeit ist. Dennoch gibt es viele, die davon bisher noch nichts gehört haben, oder zumindest keine Ahnung haben, wie sie so etwas schreiben sollten. In diesem QuickTip möchte ich einfach auf die wichtigsten Tags eingehen, die man so kennen sollte. Einfachste Formatierung, Bilder, Links, Listen, Spans und Absätze, sowie Div-Container.

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.

Box & Text Shadows

Schatten. Sie sind ein enorm beliebtes Style-Element heutzutage und es gibt immer weniger gestylete Elemente, die ohne shadows gestaltet werden.

Heut im Kurüberblick ein paar Möglichkeiten, wie man box.shadows verwenden kann.

Die Shadows lassen sich auf Text und "Boxen" anwenden. Zuerst den Text und dann die Boxen. Dafür brauchen wir etwas Text, dem wir ein basic-Styling geben.
(Ich probier was Neues aus, mit dem Einbinden des Codepens, gebt mir Bescheid, wie ihr das findet. Oben könnt ihr euch HTML und CSS ansehen)

Check out this Pen!

Okay, und jetzt gestalten wir das ganze mit text-shadow

Aussehen tut die CSS so:
text-shadow: (AbstandX-Achse)px (AbstandY-Achse)px (GradderVerwaschung)px (FARBE)

So können wir verschiedene Styles kreiren.

Subtil

Check out this Pen!

Oder auch etwas auffälliger:

Check out this Pen!

Das Tolle an Shadows ist, dass ihr mehrere Schatten hinzufügen könnt und dann Beispielsweise 3D-Text kreiren könnt, so wie ich es in diesem Post erklärt habe.

Zu den Boxshadows verhält es sich eigentlich ähnlich, nur haben wir hier eine Komponente mehr.

box-shadow: (AbstandX-Achse)px (AbstandY-Achse)px (Verwaschungsgrad)px (Schattenbreite)px (Farbe)

Ausgangslage:

Check out this Pen!

Mithilfe von Box shadows kann man beispielsweise verschiedene Rahmen machen, wie ich es hier im Blogbereich gemacht habe.
Oder natürlich sutile Schatten innen und aussen.

Check out this Pen!

Check out this Pen!

Gradient Lines

Euch sind normale horizontale Linien zu langweilig? Was das auf der Seite ausgeblendet wird, wäre viel toller?

Machen wir das doch. :)

Es gibt verschiedene Wege eine horizontale Linie zu produzieren.
Die einfachste ist über das

<hr>

-Tag.

Klassen, IDs und allg. CSS

OMG! Es gibt sie noch! Die QuickTips :)

Ich hatte es ja schon angekündigt, ich möchte ein paar kurze Tipps machen, die sich mit Basics beschäftigen, also für irgendwelche Wünsche, bitte einen kurzen Kommentar abgeben :)

Heute geht es um CSS. Und zwar ganz allgemein wie man Dinge styled, was Klassen und was eindeutige IDs sind.
Hier geht es weniger um die vielen Möglichkeiten, dazu hab ich ja schon einiges geschrieben, aber was bedeuten die Punkte oder #s vor den ganzen Namen die da definiert werden?

Zu Beginn aber ganz allgemein, wie definiert man CSS.

Ganz allgemein ist die CSS meistens in einem HTML-Bereich, also muss die CSS eingeleitet werden. Dies tut man, indem man die CSS in style Tags packt. Also so:
<style>
...
CSS
...
</style>
Haben wir allgemein Lust etwas zu formatieren, zum Beispiel alle Links auf unserer Seite, dann machen wir das so:

a:link{
color: blue;
}
a:hover{
color: black;
}

In diesem Fall wären all unsere Links blau und beim drüberhovern würden sie schwarz werden. Wie ihr sehen könnt, reicht es hier also einfach wenn wir den Namen des Tags schreiben, in dem der zu formatierende Text steht.
Wollen wir alle unsere Bilder formatieren, dann würden wir das einfach mit img tun.

img {
border: none;
...
}

You get it. Aber meistens wollen wir ja nicht allgemein was definieren, hier, das hat Blogger schon gemacht. Und wir zum Teil auch.
Fügen wir aber ein HTML-Gadget hinzu, oder wollen was hier im Post machen, zum Beispiel einen Button oder ein eigenes Copyright, machen wir das mit Klassen und IDs.
Was aber ist der Unterschied? Wann verwendet man was?

Das ist eigentlich sehr einfach zu sagen. Nehmen wir die eben genannten Beispiele. Als Button wollen wir beispielsweise einen Downloadbutton.
Den machen wir mit einem Link.
<a href="LINK">Download</a>
Wie aber verwandeln wir jetzt genau den Link in einen Button?
Bemerkung: Ein Downloadbutton wird noch einige Male verwendet werden, in jedem Post der einen Download anbietet, soll der Button gleich aussehen. (Keep that in mind)

Nummer zwei ist unser Copyright. Wir wollen einen div-container, der unser Copyright anzeigt, unten an der Seite. Und die Schrift soll dann nicht so riesig sein wie auf dem Rest der Seite.

Eine Lösung für beide Probleme wäre es, in die Tags ein style="definitionen..." einzufügen, doch das wollen wir nicht, weil es unsauber wird und unsere CSS ist vielleicht nicht ganz so lange.

Eine ID ist eindeutig, was bedeutet, dass sie nur einmal verwendet werden kann, auf einer Seite. Eine Klasse hingegen kann mehrmals vorkommen.
Ihr ahnt es wahrscheinlich schon: für den Button brauchen wir eine Klasse, für das Copyright eine ID.
Aussehen tut das also jeweils im HTML folgendermassen:
<a class="button" href="LINK">Download</a>

<div id="copyright"> &copy; by beKreatief. 2013</div>
Aber wie schaut jetzt die CSS aus?

Für Klassen werden Punkte verwendet, geht es um IDs verwenden wir ein Doppelkreuz (hab extra nach der richtigen Bezeichnung für euch gewikipediat :D), auch als Hashtag bekannt.

.button{
background: red;
}

#copyright{
font-size: 11px;
}

Und so ist das mit Klassen, IDs und allgemeiner CSS und ich hoffe, dass das irgendwie weiterhilft und ein bisschen mehr Logik in diese ganzen Zeichenteilers gebracht hat ^^