Long Shadows, il nuovo design di tendenza

Riusciranno le long shadows a diventare la nuova moda del web? Oppure già lo sono? Intanto vediamo cosa sono e come realizzarle in css attraverso alcune risorse online.
Long Shadows, il nuovo design di tendenza

Cosa sono le long shadows?

Come dal nome, long shadow significa ombra lunga, e maggiormente si estende di almeno 2,5 volte la diagonale di un elemento. In questo utlimo periodo il fenomeno si sta diffondendo velocemente ed è spesso utilizzato per dare quel tocco in più nella realizzazione delle icone.

La tecnica nasce dalla fotografia, dove i fotografi le utilizzavano per dare un senso di drammaticità all’oggetto. Nel design moderno invece vengono aggiunte ad immagini caratterizzate da una tinta piatta. In ambito web la maggior parte delle ombre cade verso destra su un angolo di 45°, ed hanno bordi netti, in modo da associare all’elemento un livello di maggiore profondità. La progettazione di una long shadow si basa su semplici forme, dove la base dell’elemento principale sono spesso colori forti e luminosi il quale possono essere impiegati anche per creare l’ombra stessa, ma con tonalità più scure e a volte sfumate.

Qualche esempio di long shadows

Vediamo di seguito qualche realizzazione. Le immagini le ho recuperate su dribbble.com.

1
2
3
4
5

Come faccio a realizzarli in css?

Per realizzare interamente da zero un effetto di long shadow in css è al quanto faticoso, ricorre molta pazienza. Principalmente è tutto un susseguirsi di gradient e box shadow. A mio avviso, per costruire questo tipo di design, ricorrerei senz’altro ad un tool. Ho effettuato un po di ricerche e ne ho trovati un paio, se ne conoscete altri mi raccomando condivideteli 😉

Long Shadow Generator – by Juani

Questo tool online realizzato da Juani Ruiz Echazú permette di creare le ombre lunghe su un’icona o su un testo. Dopo ever copiato il codice ovviamente lo si può personalizzare a nostro piacere.

Long Shadow Generator – by @awesomephant

Questo non è un vero e prorpio tool, si tratta di una soluzione creata con il framework Sass in cui
si utilizza un ciclo for per creare una serie di box-shadows con una posizione leggermente diversa.

Altri esempi di long shadows

In ogni caso vi sono diversi esempi online che riproducono il design da cui prendere spunti creativi:
Google Fonts CSS longshade Icon
An other long shadow flat icon

  • Scusa ma il link al tool di Juani Ruiz, rimanda alla sua pagina Twitter, sono io che non lo vedo?

    • Stefano Vollono

      Ciao Mara, il link al tool lo trovi al rigo sopra cliccando su “Long Shadow Generator – by Juani”, mentre sul suo nome è linkato il profilo twitter. Comunque questo è il link che cercavi http://sandbox.juan-i.com/longshadows/ … a disposizione per qualsiasi cosa!

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github