css
Générateur de dégradés CSS3
Petit billet rapide pour vous présenter un petit outil sympathique consacré à la création de de dégradés via les propritétés CSS3 : Ultimage CSS gradient Generator. Proposé par les créateurs de l’Addon Firefox Colorzilla, cet outil vous permet de créer des styles dégradés CSS3 en toute simplicité : Entrez vos couleurs, Définissez un sens pour le dégradé, Choisissez les arrêts , Ajustez la teinte/saturation, Validez, Cet outil fonctionne comme celui disponible sous Photoshop, à la différence que le résultat est une feuille de style prête à l’emploi. Notons également qu’une prévisualisation est disponible vous permettant d’afficher le résultat de votre [...]
Comment créer rapidement la feuille de style CSS d’une Sprite ?
Le réponse : SpriteBox, un outil pouvant s’avérer bien pratique pour créer rapidement des CSS Sprites. L’idée : vous fabriquez votre Sprite sous Photoshop ou autre logiciel de retouche d’image, et cet outil vous permet de créer la CSS qui va avec en ligne. En clair : Chargez votre image sur SpriteBox via votre ordinateur ou une URL afin de la rendre disponible à l’édition, Créez une zone selon vos besoins (vous pouvez zoomer pour plus de précision), donnez-y un nom, définissez des propriétés annexes, puis créez la class ou l’ID CSS, Répétez l’opération autant de fois que nécessaire, puis [...]
Comment utiliser de nouvelles polices de caractère sur votre site ?
S’il est bien un thème qui revenait sans cesse concernant les polices de caractères et la création de site, c’est la difficulté de présenter son contenu texte en se passant des polices standards, reconnues par tous les navigateurs. Jusqu’à il n’y a pas si longtemps, la technique courante consistait à utiliser des images pour afficher une police différente compatible pour tous les visiteurs. Outre le fait que cela alourdissait le temps de chargement des pages, c’était aussi un frein conséquent au référencement : à part utiliser la balise alt, on ne pouvait grosso-modo pas faire grand chose de plus. Aujourd’hui [...]
HTML/CSS : Rendre facilement son site compatible sous IE5.5,IE6,IE7
Dans la série des outils destinés à rendre votre site compatible sous IE6 (et accessoirement 5.5), voici l’excellente librairie Javascript IE7. Cette dernière permet à Microsoft Internet Explorer de se comporter comme un navigateur respectant les standards. IE7 corrige de nombreux problèmes HTML CSS et rend le travail PNG transparent correctement sous IE5 et IE6. Cerise sur le gâteau : l’implémentation est très facile. Par exemple, pour que votre site se comporte sous IE5.5 et IE6 comme sous IE7, ajoutez simplement cette ligne dans votre <head> : <!–[if lt IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script> <![endif]–> Il est possible d’ainsi upgrader le [...]
Bugs CSS IE6 : rendre compabible sa feuille de style à l’aide d’IE6 Fixer
Dans la série « j’ai besoin de débugger mon site sous IE6″, voici une ressource très intéressante destinée à réduire le temps passé à la création d’une feuille de Style CSS spécifiquement destinée à IE6 : IE6 Fixer. Cet outil gratuit applique une série de corrections basiques sur les propriétés connues pour engendrer des problèmes de compatibilité avec IE6. Avec près de 60% des erreurs traditionnelles débuggées en un clic, il s’agit sans aucun doute d’un très bon point de départ pour commencer un travail de débuggage de site sous d’IE6. L’utilisation d’IE6 Fixer est très simple : Paramétrez 2/3 options [...]
Générateur de Menus CSS
Dans la lignée du célèbre CCS Play ou de Free CSS, voici CSS Menu Maker, un site complémentaire vous permettant d’obtenir clé en main des menus CSS plutôt sympas. Le choix est nettement moins important que sur CSS Play, mais les exemples peuvent donner des idées intéressantes.
Comment réduire le temps de chargement des images : utilisez les CSS Stripes
Toujours dans une optique d’optimisation du code CSS, les CSS Sprites sont une méthode très efficace pour réduire le nombre de requêtes effectuées par le serveur, permettant une réduction du temps de chargement des pages, donc un affichage plus rapide. (cf. comment Yahoo! et Aol on amélioré leurs performances – anglais) Cette technique originaire de l’univers des jeux vidéos consiste à grosso-modo à limiter le nombre d’images à charger à partir de notre feuille de style, partant du principe qu’une image commune pour différentes icones est largement plus optimal que plusieurs fichiers séparés de petites icônes. L’exemple donné sur CSS [...]
Compacter ses CSS grâce aux propriétés sténographiques (shorthands)
Outre le fait de séparer le fond de la forme, l’un des principaux avantages des CSS concerne la reduction importante du temps de chargement d’une page. Mais pour que cela soit optimal, il convient également d’optimiser sa feuille de style. Je ne parle pas ici des compresseurs (de type Clean CSS), mais d’optimisation sténographique manuelle (certains outils de compressions proposent cette option avec plus ou moins de résussite) . Rien de neuf donc, mais cette astuce assez souvent ignorée mérite une petite piqure de rappel . Voici les propriétés CSS qu’il est possible de compacter, précédées de la propriété sténo [...]
Guide des propriétés CSS supportées par les différentes plateformes Emails
Voici un nouvel e-book pour compléter notre sélection de Guides. Cette fois il s’agit d’un ouvrage (ou plutôt d’un tableau récapitulatif) online dédié aux propriétés CSS supportées sur les différents clients email : Guide support CSS dans les emails (anglais). Assez pratique si vous envoyez beaucoup d’emailings. Vu sur Snipemail.
Convertisseur PX vers EM pour vos feuilles de style CSS
Petit utilitaire en ligne sans prétention, PxtoEm vous permet de convertir en ligne la taille de vos différentes polices de caractères du pixel vers l’unité em. Alors quelle intéret de définir ses tailles de police dans cette mesure me direz-vous? Principalement car cela permet d’avoir un affichage garantissant une plus grande accessibilité : les tailles des fonts ne sont plus fixes, mais toutes proportionnelles les unes avec les autres selon une taille de référence définie une seule fois. C’est vraiment très pratique et cet outil faisant la conversion facilement, pourquoi s’en priver? Plus d’information sur cette mesure em et son [...]
