28 effets CSS3 de pointe pour moderniser votre site Web

Nous pouvons faire beaucoup de choses avec CSS, comme créer de jolis effets, créer des modèles, créer différentes formes, etc. Mettre un CSS parfait dans votre application n'est pas difficile de nos jours. Il existe des milliers d’effets et de didacticiels disponibles sur Internet, et ils sont également gratuits. Choisir une bonne combinaison d’effets idéaux est vraiment une tâche difficile et la plupart d’entre eux semblent un peu dépassés ou démodés. Nous avons rassemblé des effets CSS3 étonnants  cela vous aidera à donner à votre site Web une apparence moderne avec une expérience utilisateur exceptionnelle. Vous êtes libre de jouer avec le code pour générer d'excellents résultats.

28. Texte 3D

Donnez à votre texte de titre un aspect 3D avec des polices sympas et des effets d'ombre étonnants.

27. Icônes plates

Le pur CSS Iconex Flat Icon Set (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 parmi 3 couleurs.

25. Interface utilisateur Metro

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

24. Course élastique

Il s'agit d'un trait élastique du texte avec une belle palette de couleurs et les effets sont réalisés avec CSS et SVG.

Lire : Plus de 50 beaux exemples de typographie pour votre inspiration

23. Formes superposées

De belles formes colorées et superposées (entièrement écrites en CSS), conçues par Snhasani.

22. CSS en spirale

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

21. Animation de texte

Yoann a créé cet incroyable effet ticker avec une animation de texte. L'effet de basculement du deuxième mot a l'air plutôt cool.

20. Ombre longue et plate

Il s'agit du mixage d'ombres ultime, doté de variables de fondu, d'ombres longues et de variables d'angle.

19. Créatures CSS

Les belles icônes interactives entièrement réalisées en HTML et CSS.

18. Bouton Flip 3D

Un simple bouton flip 3D CSS3 n'utilisant ni JavaScript ni image.

17. Transformer le texte avec l'ombre

Il s'agit d'une ombre de texte CSS conçue avec des techniques de typographie avancées utilisant lettering.js.

16. CSS arc-en-ciel

Il s'agit d'un arc-en-ciel en cercle complet avec un simple effet de survol.

15. Glitchy coloré 404

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

Lire :Plus de 100 pages d'erreur 404 créatives et amusantes

14. Commentaires sur l'interface utilisateur

Il s'agit d'un ensemble d'idées de commentaires sur vos boutons. Ceci n'est qu'une source d'inspiration pour donner plus de dynamisme à votre interface utilisateur frontale.

13. Accordéon horizontal

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

12. Illusion de cercle

Une illusion de cercle avec le mouvement 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 modèles « à venir ».

Lire :Plus de 40 magnifiques modèles en construction et à venir

10. CSS Texte-FX

Il est créé en ajoutant une lumière tamisée au texte, ce qui vous donne des flashs irréguliers.

9. Menu CSS

Un menu mobile moderne avec des animations et des transitions CSS3.

8. Curseur de budget

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

7. Ombre de texte animée

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

6. Image Domino sous-titrée CSS 3D

Il s'agit d'un effet de survol 3D réactif avec un meilleur balisage sémantique, moins de pseudo-éléments et moins de CSS.

5. Clic radio

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

4. Boutons fantômes dégradés

Les boutons fantômes dégradés et le texte conçus en utilisant une image de bordure et des ombres de boîte.

3. Boutons à bascule spongieux

Les boutons en caoutchouc simulés, conçus par Justin Windle.

Recommandé :Nouvelles ressources pour les concepteurs Web

2. Effets de pile simples

Un ensemble d'effets de bascule qui montre comment créer des effets de pile simples à l'aide de la perspective et de la transformation 3D.

1. SpinKit

SpinKit (une collection d'indicateurs de chargement) utilise des animations CSS pour créer une animation fluide et personnalisable.

Lisez maintenant :26 plugins jQuery modernes pour améliorer votre site Web