Il y a beaucoup à faire avec seulement CSS et un navigateur Web. Les grands développeurs adorent pousser l'enveloppe et montrer à quel point c'est possible.

Bien que les projets expérimentaux ne soient pas toujours utiles sur les sites de production, ils sont incroyablement inspirants et éducatifs.

Nous avons organisé une poignée de projets CSS qui mettent en valeur la véritable puissance de CSS. Celles-ci sont toutes hébergées sur CodePen afin que vous puissiez même étudier et cloner le code source pour voir comment elles fonctionnent.

1. Barres de chargement dégradées

Ce Sass page de chargement utilise des dégradés animés et des éléments redimensionnables pour créer un effet de chargement répété.

La plupart des gens devraient reconnaître cette animation de chargement de Facebook qui utilise une version plus petite de ce chargeur de barres vertical. Mais la plupart des chargeurs Web utilisent des GIF animés, car les images sont plus compatibles avec tous les navigateurs.

Cette barre de chargement CSS3 prouve qu'avec une certaine créativité, on peut reconstruire presque tous les styles d'animation que vous voulez.

Voir le stylo Barres de chargement par MaxStalker ( @MaxStalker ) sur CodePen .

2. Animation du système solaire

Voici l'un des projets CSS les plus complexes que j'ai pu trouver en ligne. Cette dynamique conception du système solaire par Malik Dellidj fonctionne sur CSS pur sans aucune image .

Chaque planète est rendue en CSS, y compris les vitesses de rotation. Ce projet se veut un modèle précis du système solaire et présente même un arrière-plan interstellaire réaliste.

Je ne peux pas imaginer combien de temps cela a pris juste pour faire les icônes de la planète, et encore moins pour obtenir les vitesses d'animation correctes. Mais où il y a une volonté, il y a un moyen.

Voir le stylo Animation du système solaire - Pure CSS par Malik Dellidj ( @kowlor ) sur CodePen .

3. Pure CSS Minesweeper

Je n'ai jamais pensé que je verrais le jour où le démineur de Windows classique pourrait être joué en utilisant du CSS pur . Pourtant, grâce au promoteur Bali Balo, ce jour est arrivé.

Notez que cela ne fonctionne pas exactement comme le démineur traditionnel car il ne conserve pas le score correctement. Mais il suit le temps avec précision et n'utilise pas un lick de JavaScript.

D'une certaine manière, même l'interface semble étonnamment proche de l'interface utilisateur de Minesweeper d'origine et tout fonctionne sur CSS. Bien que ce ne soit pas une réplique parfaite, elle est assez proche pour me permettre de jouer quelques tours.

Voir le stylo Pure CSS minesweeper par Bali Balo ( @bali_balo ) sur CodePen .

4. jour et nuit bascule

À la surface cet interrupteur à bascule peut sembler assez simple. Il traverse une entrée de case à cocher et transmet des données au backend, bien que ce ne soit pas vraiment la partie impressionnante.

Cette bascule dispose de quelques fonctionnalités qui en font l’un des meilleurs commutateurs front-end:

  • L'icône de bascule passe du soleil à la lune
  • Les étoiles et les nuages ​​s'animent en changeant
  • Il est conçu avec du CSS 100% pur

D'une manière ou d'une autre, ce commutateur d'activation / désactivation intercepte chaque clic de l'utilisateur et utilise cet événement pour animer la zone de changement jour / nuit. Le design des icônes du soleil et de la lune est également bien stylisé, car il ne fonctionne que sur du CSS.

Voir le stylo Pure Css "jour et nuit" bascule par Benjamin Réthoré ( @bnthor ) sur CodePen .

5. Suivi de la souris CSS

Le suivi traditionnel de la souris est le travail de JavaScript qui rapporte les coordonnées X / Y de l'utilisateur sur la page.

Techniquement, vous avez encore besoin de JavaScript pour rassembler ces coordonnées et faire tout ce qui est utile avec elles. Mais cet extrait montre que vous pouvez concevoir une fonctionnalité de suivi de la souris CSS qui suit chaque mouvement de l'utilisateur.

Je ne peux pas vraiment penser à une utilisation pratique pour cela, mais ça pourrait être amusant sur un site de farce.

Voir le stylo Suivi de souris CSS purement expérimental par Momcilo Popov ( @Momciloo ) sur CodePen .

6. Parc d'attractions plat

Nous avons tous vu des icônes vectorielles et des illustrations Conçu pour le web . Mais qu'en est-il des illustrations vectorielles pleine page conçues avec du code CSS et SVG brut?

Ce conception de parc d'attractions est un projet expérimental qui ne fonctionne que dans les navigateurs compatibles SVG. Pourtant, dans les navigateurs modernes, il affiche parfaitement et chaque élément a un positionnement très réaliste sur la page.

Les animations sont certes impressionnantes mais c'est la précision des éléments SVG qui attirent également mon attention. Dans quelques années, nous pourrions trouver ces types d’illustrations sur le Web qui fonctionnent uniquement en code sans fichiers d’image.

Voir le stylo Parc d'attractions design plat svg par Lina (animation par CSS) par Vladimir Gashenko ( @gxash ) sur CodePen .

7. Möbius en 3D

Concevoir une animation CSS répétitive comme le concept de bande de Möbius est assez difficile Mais ajoutez des éléments 3D et des dégradés variables? Maintenant, vous avez un vrai défi.

Cet extrait est assez impressionnant compte tenu de son aspect lisse et du peu de code utilisé (seulement 90 lignes de CSS). Avec Haml, vous n'avez besoin que de 6 lignes de code pour créer le concept complet.

J'admets que ce ne serait pas très utile sur un vrai site Web, mais c'est un témoignage de ce que vous pouvez faire avec quelques dizaines de lignes de HTML et de CSS.

Voir le stylo Möbius 6hedrons (CSS pur) par Ana Tudor ( @lebabydino ) sur CodePen .

8. Créateur de carte personnalisé

Après avoir utilisé cette application Web pendant quelques secondes, vous pouvez être sûr qu’elle fonctionne en JavaScript. Les comportements dynamiques tels que la rotation 3D et le placement du terrain sont tous des signes d’une application Web JS.

Mais cette carte créateur UI par Vincent Durand est en fait 100% CSS pur. Les flèches pour la rotation, l'effet de rotation lui-même et toutes les fonctionnalités de click-to-place s'exécutent sur CSS.

Cela vaut la peine de mentionner comment ce concept entier est rendu en utilisant des cubes 3D aussi. Les blocs eux-mêmes fonctionnent comme des éléments 3D et vous pouvez faire pivoter les cubes simplement en les faisant passer.

Sans doute l'un des usages les plus fous de CSS que j'ai vu depuis longtemps.

Voir le stylo Créateur de carte CSS complet par Vincent Durand ( @onediv ) sur CodePen .

9. Icônes Pure CSS iOS 7

Ce projet est un peu moins interactif mais toujours aussi époustouflant. Le développeur Peter Schmiz a recréé tous les principaux Icônes d'applications iOS 7 en utilisant du HTML et du CSS purs.

Aucune de ces icônes n'utilise de fichiers SVG ou d'images. Chaque élément de chaque icône est codé en HTML avec un élément span / div, puis stylé en CSS. La partie la plus folle est à quel point elles sont précises!

L'ensemble comprend 22 icônes et elles sont toutes très jolies. Je suis très impressionné par l'attention portée aux détails pour les icônes comme Maps et Weather. Juste une preuve de plus qu'avec suffisamment de temps et de patience, vous pouvez pratiquement tout concevoir en CSS.

Voir le stylo Icônes iOS 7 avec CSS pur par Peter Schmiz ( @peterschmiz ) sur CodePen .

10. Chargeur à un seul élément

Recréer l'animation de chargement Slack avec CSS3 est vraiment impressionnant. Mais cet extrait recrée le chargeur Slack avec un seul élément sur la page. C'est ce que j'appelle la dédicace.

Le nombre total de CSS pour cet extrait de code est légèrement supérieur à 100 lignes, ce qui inclut les couleurs du logo Slack et les effets d'animation.

Je ne peux pas dire si cette idée fonctionnerait pour d'autres icônes de chargement de marque, mais je suis certainement impressionnée par celle-ci.

Voir le stylo Chargeur à élément unique par CrocoDillon ( @CrocoDillon ) sur CodePen .

11. Graphiques 3D animés

Vous trouverez des dizaines de designs de barres 3D personnalisés dans CodePen avec leurs propres animations. Mais ces barres 3D par Rafael González se démarquer pour tous les autres graphiques à barres CSS modernes.

Chacune de ces cartes courir sur flexbox pour les conteneurs, ils se taille automatiquement en fonction du nombre de barres ajoutées et de la taille du conteneur. De plus, chaque graphique à barres s'anime lorsqu'il est visualisé, le tout étant contrôlé par un CSS pur.

Et comme la taille de chaque barre s'exécute en em, vous pouvez ajuster chaque barre à l'échelle naturellement en fonction des tailles de police du navigateur. Un exemple astucieux prouvant que le CSS moderne est beaucoup plus flexible que jamais.

Voir le stylo Barres CSS pur par Rafael González ( @rgg ) sur CodePen .