jQuery HoverAttribute : révélez-en plus sur vos liens
7 May 2010
Par Seb
HoverAttribute : faites parler vos liens
Le plugin HoverAttribute pour jQuery permet d’ajouter un sympathique effet à vos liens : lors du survol, le texte disparaît, et c’est l’url qui est affichée par un effet de glissement croisé.
Pas évident à expliquer comme ça, mais l’effet final est plutôt réussi, et pourra servir dans de nombreuses occasions. D’autant plus que vous pouvez afficher toute autre propriété du lien à la place de l’url, par exemple un texte alternatif contenu dans la propriété title.
À essayer !
Le flexible box model en CSS3
23 April 2010
Par Seb
Actuellement, pour gérer l’alignement des éléments de type block en html, il est possible d’utiliser les valeurs display: block ou display: inline, ou encore de définir les éléments comme flottants (avec les contraintes que l’on connait).
En CSS3, un nouveau modèle de positionnement de bloc fait son apparition : le flexible box model. Il permet un meilleur contrôle de l’organisation des éléments :
- Afficher les éléments côte à côte sans utiliser la propriété float
- Inverser l’ordre des éléments : le premier dans le code sera tout en bas, et inversement
- Gérer l’ordre d’affichage élément par élément – par exemple, afficher le 3ème bloc tout en haut
- Définir les proportions des éléments les uns par rapport aux autres, sans utiliser de pourcentages – et donc sans devoir tout recalculer lors de l’ajout ou du retrait d’un élément
- Gérer comment sont répartis les blocs au sein de leur élément parent (en haut, en bas, centré, justifié…), et comment est distribué l’espace vide restant (à gauche, à droite, entre chaque élément…)
- Et encore d’autres joyeusetés !
L’utilisation de ce mode de positionnement se fait tout simplement en utilisant la propriété suivante :
display: box;
Pour l’instant, cette propriété n’est gérée que de façon expérimentale par Firefox et Webkit (Safari, Chrome), vous pouvez donc l’essayer en utilisant les préfixes habituels : -moz- et -webkit-, en attendant l’intégration définitive des spécifications. Et pour les anciens navigateurs, les blocs en display: box se comporteront de façon traditionnelle, pensez donc à prévoir un mode dégradé pour votre mise en page !
Je vous renvoie donc à l’excellent article de Paul Rouget sur le site hacks.mozilla.org :
Un générateur de dégradés CSS 3
10 March 2010
Par Seb
Un générateur de dégradés CSS tout-en-un
Le support pour les dégradés CSS commence tout doucement à pointer le bout de son nez, que ce soit dans Firefox (à partir de la version 3.6) ou dans Webkit (Safari 4 et Chrome 4). Et le moins que l’on puisse dire, c’est que les différentes implémentations ne nous facilitent pas vraiment la tâche…
Alors quand il s’agit d’écrire une classe CSS avec un fond dégradé, qui soit à la fois compatible avec les nouveaux navigateurs ET avec les anciens, ça relève carrément du casse-tête.
J’ai eu récemment l’occasion d’utiliser plusieurs dégradés pour un projet personnel, et j’en ai rapidement eu marre de ré-écrire à chaque fois un véritable pavé de code, de créer une image de remplacement sous Photoshop, et de tester le tout sans arrêt. J’en ai donc profité pour créer rapidement un petit outil pour générer tout ça (y compris le dégradé sous forme d’image) en quelques clics, à découvrir ici :
C’est juste un bricolage rapide, mais je me suis dit que ça pouvait servir. N’hésitez pas à laisser un commentaire si vous avez des suggestions, si vous rencontrez un problème, ou simplement si ça vous a été utile !
J’ai ajouté le support expérimental (mais fonctionnel !) des filtres de Trident (le moteur d’Internet Explorer), ainsi que des fonds SVG sous Opera. Si le support reste expérimental, c’est que leur utilisation impose l’emploi de hacks CSS, ce dont je ne suis pas vraiment fan… A utiliser avec parcimonie, mais de ce que j’en ai vu ça marche plutôt bien !
Plupload : un puissant gestionnaire d’upload
5 February 2010
Par Seb
Plupload est en quelque sorte le couteau suite de l’upload de fichiers via un navigateur. Fini le simple champ file, cet outil vous permet :
- L’envoi multiple de fichiers en temps réel
- Le glisser-déposer de fichiers (selon le navigateur, actuellement seul Firefox 3.5+ le gère)
- Le redimensionnement et le recadrage de vos images avant envoi
Pour proposer tout cela, l’outil se base sur plusieurs technologies : Google Gears, Flash, Silverlight, HTML5 ou encore Yahoo BrowserPlus – à vous de choisir celle qui correspond le plus à vos besoins en fonction de ses capacités.
Plupload peut fonctionner de manière indépendante pour une installation rapide, ou en tant que plugin jQuery, pour construire votre propre fonctionnement. Un must-have !
Le code d’inclusion vidéo ultime
26 January 2010
Par Seb
Lorsqu’il s’agit d’inclure des vidéos dans un site web, la plupart d’entre nous pense à Flash. Or, si ce format a connu son heure de gloire, il est de moins en moins recommandé pour ce rôle, dans la mesure ou il n’est pas supporté sur certaines plate-formes (iPhone et iPod Touch, notamment), et que qu’un challenger de taille est en passe de lui voler la vedette : la balise video.
Pour preuve, Youtube, Vimeo ou encore DailyMotion mènent ces temps-ci des tests pour utiliser cette balise à la place de flash.
Cependant, dès lors qu’on veut l’utiliser, se pose la question de la compatibilité avec les anciens navigateurs qui, eux, ne prennent pas la balise video en charge (le serpent qui se mord la queue, vous connaissez ?). Pour vous éviter de vous arracher les cheveux, le site CamenDesign a publié le code ultime pour l’inclusion de vidéos dans une page web.
Le code fonctionne de la manière suivante :
- Si la balise video est prise en charge, c’est elle qui est utilisée, avec une source en Ogg pour Firefox, et une en h264 (mp4) pour les autres navigateurs
- Sinon, le code tente d’utiliser le lecteur QuickTime s’il est présent
- Dans le cas contraire, c’est Flash qui est utilisé
- Enfin, si aucun format n’est pris en charge, une image de remplacement est utilisée
Le code fourni va même jusqu’à prendre en charge les différences de déclarations entre IE6 et les autres navigateurs. Certes, il est nécessaire d’encoder votre vidéo dans 2 formats (mp4 et ogg), mais la compatibilité est à ce prix ! Et avec un bon logiciel d’encodage et un petit batch, c’est fait en quelques clics.
Pour les plus pressés, le lien direct vers le code source : http://camendesign.com/code/video_for_everybody#video-code
FontFriend : éditer vos polices en temps réel
26 January 2010
Par Seb
Dans la série des petits utilitaires fichtrement pratiques, je vous présente FontFriend : ce bookmarklet (à glisser dans vos favoris) vous permet, depuis n’importe quelle page web, d’ouvrir un panneau de contrôle vous permettant de modifier en temps réel les polices.
Pour les webdesigners un peu pointilleux sur le choix des polices, c’est un must-have ! Vous pouvez modifier sur l’ensemble de votre document ou sur un élément précis (avec des sélecteurs de type CSS/jQuery) :
- La police, parmi un choix des polices standards du web, ou celle de votre choix
- Les variantes : small-caps ou normal
- Les graisses : bold ou normal
- Les transformations : capitalize, uppercase, lowercase ou normal
- Inclure une déclaration font-face, via un simple glisser-déposer de votre police
- La hauteur de ligne
- La taille des caractères
Pour les intégrateurs HTML, c’est un temps précieux d’économisé : plus besoin de modifier votre feuille de style, d’enregistrer, de passer dans votre navigateur puis d’actualiser – tout se fait en temps réel.
Attention toutefois aux possesseurs d’anciens navigateurs (IE 7 et antérieur, notamment), l’outil ne semble pas vraiment compatible.
À découvrir ici : http://somadesign.ca/projects/fontfriend/
Un coup de pouce pour vos CSS
21 January 2010
Par Seb
L’adage veut que les outils les plus efficaces sont souvent les plus simples. Le site Primer CSS ne fait qu’une chose, mais il le fait bien : collez le code-source de votre page HTML dans le bloc prévu à cet effet, cliquez sur le bouton, et le site vous en extrait tous les id et les classes dans une feuille CSS qui n’attend plus que vous.
Simple, mais efficace
Tu sais que tu bosses dans le web quand…
7 January 2010
Par Seb
… tu penses que les téléchargements vont plus vite si tu les regardes fixement.
Une petite sélection savoureuse de vérités dans lesquelles chaque webdesigner en nous se reconnaîtra (non, je ne dirais pas “…ou pas”) :
http://www.freshpixel.fr/tu-sais-que-que-tu-bosses-dans-le-web-quand/
Enjoy !
En finir avec les hacks css
7 January 2010
Par Seb
Pour tout webdesigner qui se respecte, rendre son site compatible avec Internet Explorer reste un passage obligé, aussi douloureux soit-il. Et on peut jurer et proférer toutes les malédictions possibles et imaginables, mais cette famille de navigateur reste tout de même majoritaire auprès du grand public : IE6 représente toujours 25% des navigateurs en entreprise…
Du coup, on voit fleurir de nombreux hacks CSS pour cibler Internet Explorer et ses différentes versions, mais cela n’est pas la panacée dans la mesure où :
- ils sont difficiles à retenir, et difficilement lisibles
- la compatibilité de ces hacks avec des mises à jour futures de ces navigateurs n’est pas assurée
Pour éviter d’en passer par là, une méthode simple existe : les blocs conditionnels.
Ça vous plaît ? On continue »