[QT] Shadows ✤

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!