jQuery HoverAttribute : révélez-en plus sur vos liens

3 commentaires

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 !

Utiliser @font-face pour vos icones

0 commentaires

Par Seb

Un article récent sur Net Tuts propose cette idée toute simple, mais bigrement pertinente : pourquoi ne pas utiliser la propriété CSS @font-face pour afficher des icônes sur un site ?

Une fois qu’on y réfléchit un peu, le principe est plutôt séduisant, car il cumule plusieurs avantages :

  • Un seul fichier chargé pour toutes les icônes du site – les amateurs de sprites CSS apprécieront
  • Un poids très réduit pour toute une collection d’icônes
  • Possibilité de les afficher dans n’importe quelle taille, grâce à leur nature vectorielle – qui supporte du coup très bien les agrandissements de taille de texte
  • Choix de couleurs illimité
  • Fond transparent, sans les soucis des gif/png
  • Un support très large : Internet Explorer 4+, Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+ (je vous conseille l’utilisation d’un kit @font-face pour un support garantit)

Certes, le style graphique est assez limité : les icônes seront forcément monochromes, et ne permettent pas toutes les fantaisies (transparences, biseautages…), mais pour de nombreux cas de figure, c’est plus que suffisant. Qui plus est, en ajoutant un peu de CSS 3 par dessus (avec text-shadow, notamment), on peut obtenir un rendu tout à fait acceptable.

Par ailleurs, l’article donne une astuce toute simple pour rendre le procédé SEO-friendly et éviter l’apparition de caractères impromptus en cas de non-support de @font-face : utiliser le sélecteur :before. Un article à lire de toute urgence !

Et hop, nous voici revenus au temps béni des icônes en Wingdings dans nos documents Word…

Le flexible box model en CSS3

2 commentaires

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

64 commentaires

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

0 commentaires

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

0 commentaires

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

0 commentaires

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

1 commentaire

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

Ça vous plaît ? On continue »

Tu sais que tu bosses dans le web quand…

0 commentaires

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

1 commentaire

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 »

Sur ThemeForest

  • Developr - Fully Responsive Admin Skin
  • Constellation complete admin skin
  • Blue Earth Wordpress theme
  • Blue Earth