12 scene di paesaggi costruite interamente con CSS e SVG

Puoi fare cose piuttosto pazze con gli SVG. È possibile per gli sviluppatori codificare la grafica su una pagina senza file di immagine semplicemente utilizzando la funzione SVG e canvas.

Questo porta a progetti davvero interessanti come i paesaggi SVG puri che ho raccolto qui.

Tutti questi progetti sono totalmente gratuiti da modificare e utilizzare. Funzionano su codice SVG insieme ad alcuni CSS e JS di base per creare animazioni, distorsioni ed effetti di parallasse.

Baia di Hawke

Questo esempio di un bellissimo paesaggio della baia è stato sviluppato da Louis Coyle. Segue un aspetto in polistilo che imita la visualizzazione del poligono che si trova tipicamente nel rendering 3D.

È un effetto popolare con SVG e JavaScript, ma non è certamente semplice da realizzare.

Louis usa la libreria TweenMax per creare le animazioni che sono eleganti sia nello stile che nel codice.

Se hai mai desiderato scavare nel codice SVG grezzo, questo frammento ha molto da cui imparare.

Paesaggio a basso numero di poli

Ecco un altro paesaggio modellato sull'aspetto low poly.

Questo viene dallo sviluppatore Luke Reid e pone un focus molto più forte sugli effetti 3D. L'intero layout sembra molto reale e il gradiente del cielo cosparso di stelle dà vita a questo design.

Se guardi il codice JavaScript vedrai che le posizioni delle stelle sono generate casualmente. Questo è un effetto interessante se stai progettando uno sfondo SVG o uno stile di intestazione dell'eroe.

Animazione del paesaggio in formato SVG

Evan Winston ha sviluppato questa animazione personalizzata che mostra lentamente tutti gli elementi visibili.

È un effetto piuttosto interessante, ed è qualcosa che chiunque potrebbe creare. Certo, questo potrebbe non essere così utile come un'enorme illustrazione di sfondo, principalmente a causa del tempo necessario per il completamento dell'animazione.

Ma potresti fare qualcosa di simile con le icone SVG personalizzate su un sito web. Ci sono molti tutorial là fuori per aiutarti a progettare SVG di base e quindi animarli usando il codice dallo snippet sopra (in esecuzione anche su TweenMax).

Paesaggio marino

Per una vista di base sul lago, sto davvero scavando questo frammento di SVG. Mette in mostra alcune animazioni di pagina di base come le onde nell'acqua e le nuvole sullo sfondo.

Tutte queste cose sono abbastanza facili da fare con un po' di JavaScript. Ma noterai che questo frammento è realizzato con CSS puro , il che lo rende ancora più impressionante!

La moderna animazione CSS3 è molto utile nei siti Web con animazioni UI/UX, ma puoi usarla anche per paesaggi o illustrazioni. È metà del divertimento di essere uno sviluppatore.

Paesaggio invernale

Questo paesaggio invernale ricorda la neve bianca e nitida che vediamo ogni anno.

Andrey Sorokin ha creato questa animazione di base solo con codice SVG e un po' di JavaScript. L'animazione può essere lenta, quindi potrebbe essere necessario concedergli un minuto per vedere l'effetto completo.

Sono molto impressionato dalla qualità degli effetti di allentamento e dal modo in cui funziona nel browser.

Sulla base di quanti elementi si stanno animando in vista, avrei assunto un po' di lentezza, ma si carica incredibilmente velocemente considerando quanto sta succedendo.

Per non parlare dell'animazione del sole che esce dall'albero è semplicemente deliziosa.

Scenario SVG

Abbiamo assistito a una crescita massiccia delle tendenze del design piatto e dei design semi-piatti che utilizzano tutti colori di base senza sfumature.

Questo frammento segue lo stesso stile con bordi netti per le ombre e gli angoli.

È un bellissimo snippet e sicuramente uno dei paesaggi solo SVG più facili con cui lavorare. Anche se non hai mai utilizzato il codice SVG prima, questo snippet offre molto da esaminare e molti attributi SVG/XML che puoi cercare su Google per saperne di più.

Paesaggio naturale

Lo sviluppatore Amr Zakaria ha creato un design piatto simile con questo paesaggio utilizzando barche e aerei animati per attirare la tua attenzione.

Il tutto funziona su CSS puro e funziona con alcune animazioni di fotogrammi chiave CSS piuttosto chiare.

Tutto questo può essere replicato per uno sfondo su una pagina Web se hai la pazienza di farlo funzionare. La parte più difficile è far sì che questo sia completamente reattivo per gli schermi mobili.

Luci di parallasse

Tra tutti gli effetti di parallasse sul web, questo è molto semplice. Tuttavia è anche abbastanza impressionante dal momento che l'intera cosa funziona solo su CSS , senza bisogno di script.

Tutti gli elementi compresi i lampioni sono progettati con forme SVG ed effetti CSS.

Se guardi molto da vicino, noterai che le lampade utilizzano effettivamente l'effetto ombra CSS per creare un bagliore realistico.

Animazioni di base

In questo panorama SVG aggiornato troverai una sfilza di elementi personalizzati che rimbalzano in vista.

Il creatore Stef van Dijk presta molta attenzione a ogni animazione aggiungendo effetti di rimbalzo e gravità con ogni pezzo. Ad esempio, quando le montagne diventano visibili, noterai un effetto di rimbalzo dal suolo.

Questo è ciò che ottieni quando presti molta attenzione ai dettagli ed è per questo che sono un grande fan delle moderne animazioni web.

SVG e CSS

Dai un'occhiata a questa penna per un'animazione di sfondo di grandi dimensioni. L'intera cosa funziona su SVG e CSS puri senza JavaScript.

Gli strati del paesaggio vengono lentamente visualizzati e tutti hanno le proprie animazioni di fotogrammi chiave. Ma una volta che sono in vista, noterai che alcuni elementi continuano a muoversi (come il sole e le nuvole).

Progettare qualcosa del genere richiede molto tempo. Ma ti farà anche familiarizzare con la sintassi SVG insieme alle basi dell'animazione CSS.

Erba

Sebbene questo panorama sia molto semplice, penso anche che sia un ottimo insegnante per i nuovi programmatori di frontend.

Felix De Montis ha costruito questo progetto da zero con una piccola quantità di codice SVG per erba, colline e alberi. È abbastanza facile replicarlo e cambiare anche le posizioni usando i CSS.

Nel complesso, se ti piacciono i semplici progetti SVG, questo è un ottimo punto di partenza. Felix usa anche il preprocessore LESS se stai cercando qualcosa oltre il CSS di base.

Pagina di parallasse

Chris Gruber ha sviluppato questo immacolato paesaggio di parallasse che si muove in base ai movimenti del mouse.

Ma insieme a ciò ha anche animato alcuni elementi della pagina come la barca a vela e le nuvole sullo sfondo.

Tutto ciò richiede pochissimo JavaScript poiché opera su meno di 20 righe di jQuery. Tanto più impressionante considerando quanto sia dettagliato.