7.css - Donnez un look Windows 7 à vos interfaces web | Conseils de codage
Les nouvelles les plus importantes de la journée

7.css – Donnez un look Windows 7 à vos interfaces web | Conseils de codage

7.css – Donnez un look Windows 7 à vos interfaces web | Conseils de codage

Vous en avez assez du design plat à tous points de vue ? Le bon vieux temps de Windows 7 avec ses effets vitreux et ses boutons en relief vous manque ? J’ai ce qu’il te faut : 7.css. Dans l’esprit de XP.css ou win98.css, c’est un framework de style qui donnera un look neuf (ou ancien, selon) à vos interfaces web !

Alors comment ça marche ?

Bon, vous l’appelez dans votre page HTML puis il vous suffit d’ajouter les bonnes classes à vos éléments HTML et voilà, votre site aura tout d’un coup un petit air de déjà vu.

Cette bibliothèque a été conçue pour être accessible Et sensible ce qui signifie que votre interface rétro s’adaptera parfaitement à tous les écrans, du bon vieux PC de bureau au dernier smartphone. Et côté accessibilité, c’est tip top aussi : gestion des commandes clavier, support des lecteurs d’écran, tout est prévu pour que votre site reste utilisable par tous.

D’ailleurs, pour vous montrer que 7.css n’est pas qu’un truc de hipster nostalgique, je vais vous faire une petite démo. Ensemble nous créerons une interface très années 2000, avec sa fenêtre principale, sa zone de saisie de texte et ses boutons très brillants. Allez, commençons par la structure HTML :

Rien d’extraordinaire pour l’instant, nous avons notre structure de fenêtre avec son titre, ses champs pour réduire/agrandir/fermer, une liste de contacts, un champ pour saisir votre message et une barre d’état. Maintenant, comme vous pouvez le voir, j’ai ajouté du style avec 7.css :

Et là, magie ! Notre interface de chat se pare instantanément des atours de Windows 7. La fenêtre a son contour gris et sa barre de titre bleu ciel, le champ de saisie et le bouton ont leur look aqua très reconnaissable.

Après, je ne dis pas non plus qu’il faut se lancer dans un remake complet de Windows hein, mais je trouve que ça peut apporter une petite touche d’originalité et de personnalité à un site internet, surtout dans ce monde aseptisé du design actuel où tout semble le même.

A découvrir ici !

Quitter la version mobile