Liens utiles pour créer son propre CSS

Après plusieurs sites internet créés pour des projets, j’ai fini par me faire une petite liste de sites utiles lors de la création de CSS. Je vais donc vous les présenter par catégories avec quelques commentaires à chaque fois. Si vous connaissez d’autres sites internet utiles, dites le moi, je les rajouterai.

Syntaxe

W3schools, ce site vous permet de créer un site web de A à Z grâce à de nombreux tutoriels gratuits. Pour la partie CSS, il y a pour chaque propriété des exemples ainsi que la liste des navigateurs supportés. Site en anglais.

ZoneCSS, est une alternative en français à w3schools. Il y a moins d’exemples mais plus d’explications sur le fonctionnement des propriétés.

Designvegetal, vous permet de connaitre tous les accents en HTML.

Si vous utilisez Notepad++ pour coder, pensez à régler l’encodage en UTF-8 (sans BOM).

Design

CSS3 Playground, cet outil pratique vous permet de réaliser de nombreux effets très facilement. Dans la colonne de gauche, sélectionnez ce que vous souhaitez (dégradés, ombres sur le texte ou le cadre, police, background, etc), puis visualisez le résultat en direct et enfin copier-coller le code source pour l’ajouter dans votre feuille de style.

CSS3 Playground

ColorZilla, sur cette page vous pourrez réaliser des dégradés complexes puis récupérer le code pour le mettre dans votre CSS.

Ultimate CSS Gradient Generator

Type Tester, comme son nom l’indique, permet de tester toutes les polices que vous souhaitez, avec différents paramètres. Très pratique quand vous ne savez pas quelle police choisir.

Dafont, vous permet de télécharger de très nombreuses polices originales pour votre site web.

Dafont.com

Bouton effet glossy ou ici et là, très à la mode depuis quelques temps. Créez facilement un bouton avec un effet glossy, sous Photoshop.

CSS bar graph, créez facilement une barre d’avancement en CSS.

Menu à onglets, sur cette page retrouvez un tutoriel complet et très bien expliqué sur la façon de créer un menu à onglets. Vous pourrez bien sûr y télécharger les sources.

Menu à onglets

Modules pour Firefox

ColorZilla, vous permettra à l’aide d’une pipette de relever la couleur de n’importe quel élément sur votre navigateur. Ensuite, vous pourrez copier automatiquement cette couleur au format que vous voulez dans votre presse papier.

Firebug, mondialement connu, il vous permettra notamment d’éditer votre CSS en live et ainsi de voir les changements. Il existe aussi pour les autres navigateurs ainsi que les mobiles (via un module JavaScript).

Web Developer, vous permettra d’ajouter une toolbar bien pratique à votre navigateur. Ainsi vous pourrez utiliser une règle, afficher/éditer le CSS, etc.

Quelques scripts jQuery

Lightbox Me, vous permettra de réaliser de très jolis formulaires sous forme de pop-up. Vous pourrez aussi vous en servir pour afficher des informations utiles sans changer de page, ce qui est plus agréable pour l’expérience utilisateur.

Lightbox me

Menus déroulants en jQuery, cette liste de 38 scripts vous permettra sans doute de trouver votre bonheur pour réaliser un menu original.

jReject, est très utile lorsque vous souhaiter limiter l’accès de votre site à certains navigateurs. Une façon facile et élégante de dire non à IE6 !

Générateurs

Créer-un-site, ce site web dispose de nombreux générateurs très pratiques, notamment pour générer une page XHTML.

Icon-generator, vous permet de créer facilement des icônes de différentes tailles pour votre site. Il est gratuit et de très bonne qualité.

DynamicDrive, uploadez l’image que vous voulez et récupérez l’icône qui correspond ! Simple, rapide et efficace.

Clean CSS, permet de compresser/nettoyer votre CSS pour qu’il prenne moins de place. Très utile pour gagner du temps lors de l’affichage de votre page.

Conclusion

Voilà ma petite liste de sites utiles pour créer son propre CSS from scratch ! Enfin, je n’utilise pas de logiciel comme Dreamweaver mais Notepad++ car je trouve cela plus léger à utiliser et le code est plus propre.

Articles similaires :