CSS (SASS) Long-Shadow Style

image 

In einer meiner letzten Schulungen kam die Idee auf den aktuellen modernen “Long-Shadow” in CSS nachzubauen und das möglichst elegant und wiederverwendbar. Im Prinzip kein großes Ding, wenn man masochistisch veranlagt ist. Um einen Long-Shadow-Effekt hinzubekommen, muss man den jeweiligen Schatten ca. 100-300 mal hinzufügen und das würde unglaublich viele Tastenanschläge bedeuten. Also habe ich mich für SASS entschieden, in welchem man Funktionen & Kontrollstrukturen in CSS verwenden kann.

HTML-Struktur

Einfach ein paar Div-Elemente eingefügt mit einigen Buchstaben um einen guten Effekt zu erzielen.

  1: <div>
  2:   MT
  3: </div>
  4: 
  5: <div>
  6:   LS
  7: </div>
  8: 
  9: <div>
 10:   DEV
 11: </div>
 

CSS (SASS)

Hier fängt es an interessant zu werden, ist aber definitiv einfacher als zuerst vermutet. Durch die Funktionalität, welche man durch SASS erhält, ist der gewünschte Effekt in wenigen Zeilen erstellt. Im Prinzip benötigt man hierzu ein Mixin und eine Function.

Das Mixin wird unser letztendliches “Endprodukt” sein, welches man bei beliebigen CSS-Rules über @include ‘MIXIN-NAME’ einbinden und verwenden kann.

Die Function sorgt dafür, dass wir den gewünschten Long-Shadow-Effekt erhalten und generiert uns eine Menge an ‘Xpx Xpx #farbe’-Werten für die Text-Shadow-Deklaration. Man könnte diese auch auf z. B. die Box-Shadow-Eigenschaft anwenden.

  1: @function create-long-shadow($color) {
  2:   $ts: 0px 0px $color;
  3:   @for $i from 1 through 300 {
  4:     $ts: #{$ts}, #{$i}px #{$i}px #{$color};
  5:   }
  6:   @return $ts;
  7: }
  8: 
  9: @mixin long-text-shadow($color) {
 10:   text-shadow: create-long-shadow($color);
 11: }

Im Mixin ‘Long-Text-Shadow’ übergebe ich einen Parameter an dieses und reiche diesen an die Funktion ‘Create-Long-Shadow’ weiter um die Farbe des Schattens zu bestimmen. In der Funktion erstellen wir nun einfach eine For-Schleife, welche von 1 bis einschließlich 300 zählt (1 to 300 = 1 bis 300) und die jeweiligen Shadow-Werte generiert.

Nun müssen wir nur noch das Mixin an den gewünschten Stellen einbinden und das war's dann auch schon.

  1: $blue: #428bca;
  2: 
  3: div
  4: { 
  5:   background: $blue;
  6:   @include long-text-shadow($blue - #1c1c1c);
  7: }
So einfach lässt sich der allseits bekannte Long-Shadow Effekt in CSS mit ein wenige Hilfe von SASS nachbauen.
Hier noch ein Link zur Demo.
 
Viel Spaß damit!
Kommentare sind geschlossen