12 scènes de paysage entièrement construites avec CSS et SVG

Vous pouvez faire des trucs assez fous avec les SVG. Il est possible pour les développeurs de coder des graphiques sur une page sans aucun fichier image en utilisant simplement la fonction SVG & canvas.

Cela conduit à des projets vraiment sympas comme les paysages SVG purs que j'ai rassemblés ici.

Tous ces projets sont totalement gratuits à modifier et à utiliser. Ils travaillent sur du code SVG avec quelques CSS et JS de base pour créer des animations, des distorsions et des effets de parallaxe.

Baie de Hawke

Cet exemple d'un magnifique paysage de baie a été développé par Louis Coyle. Il suit un aspect poly-stylé imitant l'affichage des polygones que l'on trouve généralement dans le rendu 3D.

C'est un effet populaire avec SVG et JavaScript, mais ce n'est certainement pas simple à réaliser.

Louis utilise la bibliothèque TweenMax pour créer des animations élégantes à la fois dans le style et le code.

Si vous avez toujours voulu creuser dans le code SVG brut, cet extrait a beaucoup à apprendre.

Paysage Low Poly

Voici un autre paysage inspiré du look low poly.

Celui-ci vient du développeur Luke Reid et met beaucoup plus l'accent sur les effets 3D. L'ensemble de la mise en page semble très réel et le dégradé du ciel parsemé d'étoiles donne vie à cette conception.

Si vous regardez le code JavaScript, vous verrez que les positions des étoiles sont générées de manière aléatoire. C'est un effet sympa si vous concevez un arrière-plan SVG ou un style d'en-tête de héros.

SVG Paysage Animation

Evan Winston a développé cette animation personnalisée qui fait lentement apparaître tous les éléments visibles.

C'est un effet plutôt cool, et c'est quelque chose que n'importe qui pourrait créer. Certes, cela peut ne pas être aussi utile qu'une énorme illustration d'arrière-plan, principalement en raison du temps nécessaire à la réalisation de l'animation.

Mais vous pouvez faire quelque chose de similaire avec des icônes SVG personnalisées sur un site Web. Il existe de nombreux didacticiels pour vous aider à concevoir des SVG de base, puis à les animer à l'aide du code de l'extrait ci-dessus (fonctionnant également sur TweenMax).

Paysage marin

Pour une vue basique au bord du lac, je creuse vraiment cet extrait SVG. Il arbore quelques animations de page de base comme les vagues dans l'eau et les nuages ​​en arrière-plan.

Tout cela est assez facile à faire avec un peu de JavaScript. Mais vous remarquerez que cet extrait est fait avec du CSS pur , ce qui le rend encore plus impressionnant !

L'animation CSS3 moderne est plus utile dans les sites Web avec des animations UI/UX, mais vous pouvez également l'utiliser pour les paysages ou les illustrations. C'est la moitié du plaisir d'être développeur.

Paysage d'hiver

Ce paysage hivernal rappelle la neige blanche et croustillante que nous voyons chaque année.

Andrey Sorokin a créé cette animation de base avec juste du code SVG et du JavaScript. Il peut être lent à animer, vous devrez donc peut-être lui donner une minute pour voir le plein effet.

Je suis très impressionné par la qualité des effets d'accélération et par leur efficacité dans le navigateur.

En fonction du nombre d'éléments qui s'animent, j'aurais supposé un peu de lenteur, mais cela se charge incroyablement rapidement compte tenu de tout ce qui se passe.

Sans oublier que l'animation du soleil sortant de l'arbre est tout simplement délicieuse.

Paysage SVG

Nous avons vu une croissance massive des tendances de conception à plat et des conceptions semi-plates qui utilisent toutes des couleurs de base sans dégradés.

Cet extrait suit le même style avec des bords durs pour les ombres et les coins.

C'est un bel extrait et certainement l'un des paysages uniquement SVG les plus faciles à utiliser. Même si vous n'avez jamais utilisé de code SVG auparavant, cet extrait offre de nombreuses possibilités d'examen et de nombreux attributs SVG/XML que vous pouvez rechercher sur Google pour en savoir plus.

Paysage naturel

Le développeur Amr Zakaria a créé un design plat similaire avec ce paysage utilisant des bateaux et des avions animés pour attirer votre attention.

Le tout fonctionne sur du CSS pur et fonctionne avec des animations d'images clés CSS assez claires.

Tout cela peut être reproduit pour un arrière-plan sur une page Web si vous avez la patience de le faire fonctionner. Le plus difficile est de faire en sorte que cela soit entièrement réactif pour les écrans mobiles.

Lumières de parallaxe

Parmi tous les effets de parallaxe sur le Web, celui-ci est très basique. Cependant, c'est aussi assez impressionnant puisque tout fonctionne uniquement sur CSS , aucun script n'est requis.

Tous les éléments, y compris les lampadaires, sont conçus avec des formes SVG et des effets CSS.

Si vous regardez de très près, vous remarquerez que les lampes utilisent en fait l'effet d'ombre CSS pour créer une lueur réaliste.

Animations de base

Dans ce paysage SVG mis à jour, vous trouverez une multitude d'éléments personnalisés qui rebondissent dans la vue.

Le créateur Stef van Dijk accorde une attention particulière à chaque animation en ajoutant des effets de rebond et de gravité à chaque pièce. Par exemple, lorsque les montagnes apparaissent, vous remarquerez un effet de rebond du sol.

C'est ce que vous obtenez lorsque vous portez une attention particulière aux détails et c'est pourquoi je suis un grand fan des animations Web modernes.

SVG et CSS

Jetez un œil à ce stylo pour une animation d'arrière-plan surdimensionnée. Tout cela fonctionne sur des SVG et du CSS pur sans aucun JavaScript.

Les couches du paysage apparaissent lentement, et elles ont toutes leurs propres animations d'images clés. Mais une fois qu'ils sont en vue, vous remarquerez que certains éléments continuent de bouger (comme le soleil et les nuages).

Concevoir quelque chose comme ça prend beaucoup de temps. Mais cela vous familiarisera également avec la syntaxe SVG ainsi qu'avec les bases de l'animation CSS.

Herbe

Bien que ce paysage soit très simple, je pense aussi que c'est un excellent professeur pour les nouveaux codeurs frontaux.

Felix De Montis a construit ce projet à partir de zéro avec une petite quantité de code SVG pour l'herbe, les collines et les arbres. Il est assez facile de reproduire cela et de modifier également les positions à l'aide de CSS.

Dans l'ensemble, si vous aimez les conceptions SVG simples, celle-ci est un excellent point de départ. Felix utilise également le préprocesseur LESS si vous recherchez quelque chose au-delà du CSS de base.

Page Parallaxe

Chris Gruber a développé ce paysage de parallaxe immaculé qui se déplace en fonction des mouvements de votre souris.

Mais parallèlement à cela, il a également animé certains éléments de la page comme le voilier et les nuages ​​​​en arrière-plan.

Tout cela nécessite très peu de JavaScript puisqu'il fonctionne sur moins de 20 lignes de jQuery. D'autant plus impressionnant compte tenu de la façon dont cela est détaillé.