HTML5 / CSS3 10 exemples incroyables que vous devriez voir
L’internet évolue très vite : les services proposés, leurs modes d’utilisations… mais ce qui évolue encore plus vite, ce sont les technologies associées. La base de ces technologies c’est l’HTML et le CSS. Ces deux langages ne dérogent pas à la règle de l’évolution et d’année en année, ils se perfectionnent. Aujourd’hui avec la version 5 de l’HTML et la version 3 du CSS les possibilités de créer des effets incroyables sont multiples.
Quand on travail dans le web depuis quelques années, il est incroyable de voir ce qu’il est possible de faire aujourd’hui avec simplement de l’HTML et du CSS. Une fois n’est pas coutume, disons que ce n’était vraiment pas mieux avant !
Je vous propose donc aujourd’hui une sélection de 10 exemples qui m’on vraiment bluffés et qui blufferont certainement tous les intégrateurs qui liront cet article. Effet d’animation, illustration, optimisation de l’expérience utilisateur par l’UX etc. Trêve de bavardage, passons aux exemples.
Remarque : certains exemples utilisent tout de même un peu de JavaScript pour tourner !
Le meilleur de l’HTML5
1. UmbrUI
Dans cet exemple vous verrez plusieurs éléments d’interface complétement personnaliser grâce aux CSS. Impressionnant.
Démo
2. Matrix
Animation reproduisant la matrice du célèbre film Matrix. Effet produis grâce aux transitions CSS.
Démo
3. Tukwj
Cet effet n’est pas très impressionnant mais moi j’adore. Il montre ce qu’il est possible de faire avec un simple effet de transition. Bien sur tout en CSS3.
Démo
4. iOS icones
Quand j’ai vu cette page j’ai été scotché. Reproduire tout ces icones avec uniquement du CSS c’est simplement impressionnant.
Démo
5. Clock
Effet de rotation sur une horloge en CSS. Le tout n’est pas hyper design mais j’adore cette effet de rotation.
Démo
6. Clouds generator
Il s’agit ici d’un petit outil permettant de générer des nuages (réalisés en CSS). Un peu de js a été utilisé mais l’effet est tellement fluide est épatant que je n’ai pas pu m’empêcher de l’ajouter à cette sélection.
Démo
7. Pluie de lettres
De l’HTML et du CSS et voila une pluie de lettre dynamique. Cet effet est peu utile mais à voir rien que pour la beauté et la complexité de la chose !
Démo
8. iPhone
Alors c’est un peu fou, c’est tout l’iPhone et ces icônes qui sont intégrés en pure CSS. J’en reste encore étonné !
Démo
9. Adobe CSS3 Effects
Site mis en ligne par Adobe pour présenter les différentes possibilités offertes par CSS3. N’hésitez pas à utiliser le menu de gauche pour passer d’un exemple à un autre.
Démo
10. Windows menu
Autre exemple ici il s’agit d’une reproduction assez fidèle du menu windows vista. Tout y est, et tout est en HTML/CSS, c’est assez impressionnant.
Démo
Et enfin juste pour le fun : Homer en pure CSS3.
La sélection est maintenant terminé, si vous connaissez également d’autres exemples, n’hésitez pas à les poster dans les commentaires. Cela intéressera tous les lecteurs de wks. Merci par avance.
