Le monde naturel a toujours \u00e9t\u00e9 une grande source d'inspiration. Et nous pouvons voir certaines de ses merveilles les plus \u00e9tonnantes en regardant le ciel.<\/p>\n
Un ciel bleu cristallin par une journ\u00e9e ensoleill\u00e9e, les \u00e9toiles scintillent la nuit. De m\u00eame, les pens\u00e9es d'exploration spatiale et de notre galaxie enflamment \u00e9galement notre imagination. Ce qui est au-dessus de nous apporte \u00e0 la fois une r\u00e9alit\u00e9 quotidienne et une curiosit\u00e9 pour l'inconnu.<\/p>\n
Sans surprise, certains d\u00e9veloppeurs tr\u00e8s cr\u00e9atifs ont utilis\u00e9 le ciel et l'espace comme sujet d'exp\u00e9rimentation. L'utilisation potentielle de la lumi\u00e8re, de la couleur, du mouvement et des derni\u00e8res technologies Web est un choix naturel.<\/p>\n
Aujourd'hui, nous allons vous pr\u00e9senter quelques exemples \u00e9tonnants qui, d'une mani\u00e8re ou d'une autre, utilisent le ciel et l'espace. Ils vont de la pr\u00e9cision scientifique \u00e0 la pure fantaisie. Profitez-en!<\/p>\n
L'effet de d\u00e9calage de parallaxe est partout de nos jours. C'est une de ces tendances qui a pris vie. Cependant, c'est l'un des exemples les plus uniques et les plus convaincants que nous ayons vus. Faire d\u00e9filer la page entra\u00eene un d\u00e9filement 3D des nuages, tandis qu'une couleur d'arri\u00e8re-plan changeante donne l'impression que vous tombez vers la Terre.<\/p>\n
Voir le stylo
D\u00e9mo Canvallax: Fond de ciel parallaxe par Shaw<\/p>\n
Ce qui rend cette carte d'\u00e9toiles si int\u00e9ressante, c'est l'interactivit\u00e9 bas\u00e9e sur CSS et JavaScript. Cliquez sur un syst\u00e8me et concentrez-vous, avec des transitions fluides comme la soie. La carte montre \u00e9galement une trajectoire d'orbite simul\u00e9e et des emojis amusants comme la cerise sur le g\u00e2teau.<\/p>\n
Voir le stylo
Cartes d'\u00e9toiles CSS par Scott Weaver (@ sweaver2112)<\/p>\n
L'une des v\u00e9ritables merveilles de l'univers, les aurores bor\u00e9ales (aurores bor\u00e9ales) sont quelque chose que peu d'entre nous voient en personne. Mais au moins, nous pouvons essayer de recr\u00e9er l'exp\u00e9rience. Ici, une version CSS pure d'un ciel nocturne vert et violet vif peut \u00e9clairer votre \u00e9cran.<\/p>\n
Voir le stylo
Aurores bor\u00e9ales CSS pures? \ud83d\ude0e par Jhey<\/p>\n
Un coucher de soleil impressionnant est, au contraire, quelque chose que presque tout le monde peut vivre. Mais cela ne le rend pas moins \u00e9blouissant. Cet extrait vous permet de mettre le coucher de soleil en mouvement \u00e0 tout moment de la journ\u00e9e, simplement en cliquant sur la grande sph\u00e8re jaune. Les couleurs changeantes cr\u00e9ent un effet saisissant.<\/p>\n
Voir le stylo
Aleksandra Sunset<\/p>\n
Voulez-vous savoir quand la pleine lune brillera \u00e0 Paris, en France? Cette charmante animation vous le dit et vous donne une vue sur la fen\u00eatre de la Tour Eiffel. Le seul myst\u00e8re ici est de savoir si le chat noir douillet fait quelque chose de sp\u00e9cial lorsque l'\u00e9v\u00e9nement arrive.<\/p>\n
Voir le stylo
Pleine lune \u00e0 Paris? par Paulina Hetman<\/p>\n
Les anneaux de Saturne sont une source massive de fascination parmi nous, les humains. Cette repr\u00e9sentation CSS uniquement de la plan\u00e8te offre une vue l\u00e9g\u00e8rement diff\u00e9rente. Il fait sombre et les anneaux ne sont pas aussi saillants que d'habitude. Mais il fournit un bel exemple de la fa\u00e7on dont les d\u00e9grad\u00e9s CSS peuvent nous aider \u00e0 produire un art incroyable.<\/p>\n
Voir le stylo
Saturn \ud83e\ude90 par Luciano Felix<\/p>\n
L'utilisation de WebGL rend cette animation solaire hors de ce monde. Lorsque le soleil tombe du haut de l'\u00e9cran, remarquez les effets flous autour de son bord. Le niveau de d\u00e9tail ici est tout simplement incroyable. Heureusement, il n'y a pas de chaleur \u00e0 travers l'\u00e9cran.<\/p>\n
Voir le stylo
Scott Weaver Solar<\/p>\n
Notre collection est compl\u00e9t\u00e9e par un fragment un peu plus utilitaire. Il s'agit d'un ensemble de magnifiques d\u00e9grad\u00e9s CSS que vous pouvez utiliser pour reproduire diff\u00e9rentes combinaisons de couleurs de ciel. Vous trouverez tout de l'obscurit\u00e9 de la nuit, le lever du soleil, le coucher du soleil et le bleu parfait de midi.<\/p>\n
Voir le stylo
Gradients du ciel par zessx<\/p>\n
Comme le montrent les extraits de code ci-dessus, le ciel et l'espace peuvent ajouter des \u00e9l\u00e9ments de plaisir et de beaut\u00e9 au Web. Qu'ils recr\u00e9ent notre monde ou cherchent \u00e0 nous en montrer de nouveaux, ils offrent un moyen unique d'am\u00e9liorer l'exp\u00e9rience utilisateur.<\/p>\n
Int\u00e9ress\u00e9 \u00e0 voir plus d'exemples? D\u00e9couvrez notre collection CodePen!<\/p>\n