28 effets CSS3 avant-gardistes pour moderniser votre site web

On peut faire beaucoup de choses avec CSS : créer de jolis effets, faire des modèles, construire différentes formes, etc. Mettre du CSS parfait dans votre application n'est pas difficile de nos jours. Il y a des milliers d'effets et tutoriels disponibles sur Internet et c'est gratuit. Choisir la bonne combinaison d'effets idéaux est vraiment une tâche ardue et la plupart semblent un peu dépassés ou démodés. Nous avons rassemblé quelques effets CSS3 incroyables qui vous aideront à donner à votre site web un look moderne avec une excellente expérience utilisateur. Vous êtes libre de jouer avec le code pour générer de superbes résultats.

28. Texte 3D

Donnez à votre texte de titre un aspect 3D avec des polices cool et d'incroyables effets d'ombre.

27. Icônes plates

Le jeu d'icônes plates pure CSS Iconex (4 icônes), conçu par Alireza Attari.

26. Spectre de couleurs

C'est ce que vous obtenez en mélangeant les couleurs avec box-shadow. Le spectre de couleurs est une progression entre 3 couleurs.

25. Metro UI

L'interface Metro inspirée du design Windows 8, entièrement créée avec CSS3. Les icônes sont extraites de FontAwesome.

24. Trait élastique

C'est un trait élastique du texte avec un beau schéma de couleurs et les effets sont faits avec CSS et SVG.

À lire : 50+ magnifiques exemples de typographie pour votre inspiration

23. Formes en couches

Belles formes colorées en couches (entièrement écrites en CSS), conçues par Snhasani.

22. Spirale CSS

Une animation spirale nuageuse en CSS qui peut être utilisée comme icône de chargement.

21. Animation de texte

Yoann a créé cet incroyable effet de défilement avec animation de texte. L'effet de basculement du second mot est très cool.

20. Ombre longue plate

C'est le mixin d'ombre ultime avec variables de fondu, ombres longues et variable d'angle.

19. Créatures CSS

De belles icônes interactives entièrement faites avec HTML et CSS.

18. Bouton flip 3D

Un simple bouton flip 3D CSS3 sans JavaScript ni image.

17. Transformer le texte avec ombre

C'est une ombre de texte CSS conçue avec des techniques de typographie avancées utilisant lettering.js.

16. Arc-en-ciel CSS

C'est un arc-en-ciel en cercle complet avec un simple effet de survol.

15. 404 coloré et glitchy

L'incroyable effet glitch (plus vibration) fait avec CSS et un peu de JavaScript.

À lire : 100+ pages d'erreur 404 créatives et drôles

14. Retour UI

C'est un ensemble d'idées de retour pour vos boutons. C'est juste une inspiration pour donner plus de dynamisme à votre UI front-end.

13. Accordéon horizontal

L'accordéon horizontal fait avec du CSS pur. Il inclut des éléments (au lieu d'images) et la police Genericons pour les icônes de réseaux sociaux.

12. Illusion de cercle

Une illusion de cercle avec mouvement de Tusi, conçue par Jaime Caballero. Vous pouvez l'utiliser comme barre/icône de chargement de page.

11. Compteur de secondes

Un compteur élégant parfait pour les templates « coming soon ».

À lire : 40+ beaux templates Under Construction et Coming Soon

10. CSS Text-FX

C'est créé en ajoutant une lumière tamisée au texte, vous donnant des flashs par patches.

9. Menu CSS

Un menu mobile moderne avec animations et transitions CSS3.

8. Curseur budget

Le simple curseur CSS + jQuery en design 3D, inspiré par Erik Deiner.

7. Ombre de texte animée

Ce motif d'ombre de texte animée utilise -webkit-background-clip: text et linear-gradient pour simuler une ombre de texte rayée.

6. Image Domino 3D avec légende CSS

C'est un effet de survol 3D responsive avec meilleur balisage sémantique, moins de pseudo-éléments et moins de CSS.

5. Clic radio traversant

Un simple curseur d'image utilisant des boutons radio, écrit entièrement en CSS.

4. Boutons fantômes à dégradé

Les boutons fantômes à dégradé et le texte conçus en utilisant border-image et box-shadows.

3. Boutons toggle spongieux

Simulation de boutons en caoutchouc spongieux, conçus par Justin Windle.

Recommandé : Nouvelles ressources pour web designers

2. Effets de pile simples

Un ensemble d'effets toggle qui montre comment créer de simples effets de pile en utilisant la perspective et la transformation 3D.

1. SpinKit

SpinKit (une collection d'indicateurs de chargement) utilise les animations CSS pour créer des animations fluides et personnalisables.

Maintenant à lire : 26 plugins jQuery modernes pour améliorer votre site web