Editeur de dégradés CSS3 à la mode de Photoshop

ColorZilla, connu pour ses extensions couleur pour Mozilla et Chrome, met à notre disposition Ultimate CSS Gradient Generator. C’est un générateur de dégradés CSS3 en ligne qui reprend grosso modo l’interface utilisateur de Photoshop pour fournir les déclarations CSS pour l’ensemble des préfixes propriétaires -moz-, -webkit--o--ms-. Pour Internet explorer 6 à 8, l’outil génère la propriété filter ; pour les versions IE9 et au-delà il y a même le commentaire conditionnel à ajouter pour annuler filter et basculer sur la génération du dégradé via SVG en base 64. Continuer la lecture de Editeur de dégradés CSS3 à la mode de Photoshop

jPages — Pagination avec jQuery

jPages permet de créer un système de pagination à partir d’une liste ou de n’importe quel container. Ce plugin jQuery propose de nombreuses fonctionnalités : déplacement automatique, au clavier ou encore sur l’évènement scroll. La navigation est entièrement personnalisable. Plugin compatible avec tous les navigateurs modernes et avec Internet Explorer à partir de IE7. Continuer la lecture de jPages — Pagination avec jQuery

940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid

940.css est un système de grille de mise en page CSS qui résulte de la fusion des frameworks 960 Grid System, Blueprint CSS et The Simpler Grid dont il reprend les meilleures idées. Il est composé de 24 colonnes de 20 pixels séparées par une gouttière de 20 pixels (adaptation de la technique évoquée dans l’article Calculer une grille de mise en page « typo » avec le nombre d’Or). Soit un interlignage de 20 pixels pour une taille de caractère de 13 pixels en utilisant : font-size: 13px; line-height: 1.539. Continuer la lecture de 940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid

Nouvelle méthode de remplacement de texte par une image

Dans l’article Nouvelle méthode de remplacement d’image en CSS, je vous faisais part d’une nouvelle méthode de remplacement de texte par l’image en CSS proposée par Scott Kellum qui utilise la propriété text-indent avec un décalage en pourcentage. Cette méthode n’étant pas dénuée d’effets de bord (voir dans la suite de l’article), une nouvelle technique a fait son apparition lors de la mise à jour de HTML5 Boilerplate. Je vous propose une traduction de l’article Another CSS image replacement technique écrit par Nicolas Gallagher qui détaille une technique avec font-size : Continuer la lecture de Nouvelle méthode de remplacement de texte par une image

Quelques liens sur les Media Queries en CSS3

Les grilles de mise en page et les frameworks CSS qui les accompagnent sont bien jolis mais pas toujours adaptés à la modernité du Web composée d’agents utilisateurs aussi nombreux que différents. Une grille modulaire devrait faire face à toutes les situations. Les Media Queries permettent de cibler un agent utilisateur selon certains paramètres. Il devient possible d’utiliser une grille visible uniquement par : les personnes qui naviguent depuis un ordinateur de bureau avec une largeur d’écran supérieure à 1024 pixels ; celles qui utilisent leur Netbook (possédant une résolution inférieure ou égale à 1024 pixels de large) ; ainsi que par celles qui parcourent le web depuis leur iPhone, leur iPad ou leur téléphone Android. Il est même possible de spécifier des règles CSS différentes selon que l’appareil est utilisé en mode portrait ou en mode paysage ! Continuer la lecture de Quelques liens sur les Media Queries en CSS3

Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3

Je viens de terminer le dernier livre de Raphaël Goetter intitulé CSS avancées. Vers HTML5 et CSS3 paru aux Editions Eyrolles mi-mars 2011 et préfacé par Daniel Glazman. Ce livre n’est pas une simple mise à jour de CSS2, pratique du design web paru en 2005 ; il s’agit d’une refonte totale avec une orientation «utilisateurs avancés». L’auteur commence par un état des lieux sur les standards du web et leur prise en charge par les principaux navigateurs : Internet Explorer (IE6, IE7, IE8, IE9), Firefox, Chrome, Safari et Opera. Le livre est ensuite divisé en trois parties : 1) tirer le meilleur de CSS, 2) HTML5 et CSS3 : l’innovation en marche, et 3) CSS et applications spécifiques. Continuer la lecture de Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3

Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »

Mon comparatif entre 960 Grid System et Blueprint CSS m’a permis de faire le point sur les fonctionnalités que l’on retrouve dans un framework CSS, en mettant en lumière leurs avantages et inconvénients respectifs. Tout naturellement, j’ai voulu les mélanger pour ne garder que le meilleur. Pour faire bonne mesure, j’ai ajouté The Simpler Grid découvert récemment que j’ai ajouté à ma réflexion pour créer un espèce de The Blue «940» Grid Simpler. J’envisage d’utiliser ce système de grille simple et efficace en complément du concentré de bonnes pratiques HTML5 Boilerplate. Continuer la lecture de Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »