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 !

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 »

The Printliminator, l’ami de votre cartouche d’encre

2 commentaires

Par Seb

Petite mise en situation : vous êtes en train de parcourir l’actualité people sur votre site favori, et là – paf ! Vous tombez sur l’article du siècle : le dernier potin sur le 3ème chien de Paris Hilton. Vous vous dites alors que vous allez l’imprimer pour en faire profiter tout votre entourage, et c’est là que ça coince…

Site non optimisé pour l’impression, sapin de noël de pubs clignotantes… Pour sortir votre petit paragraphe de texte, votre imprimante va laborieusement repeindre trois ou 4 pages avec vos cartouches, dont vous pouvez presque voir le niveau baisser à vue d’œil, en imprimant tous les éléments non indispensables et donc – forcément – très colorés et gourmands en place.

Et encore, à condition que votre texte ne soit pas carrément tronqué par le bord de la page.

Pour ne plus rencontrer ce genre de situation, vous pouvez faire appel au Printliminator : un simple bookmarklet à ajouter dans vos favoris, et d’un clic vous pourrez :

  • Supprimer toutes les images
  • Supprimer les blocs indésirables (pubs, bandeaux, footers…)
  • Appliquer une feuille de style optimisée pour l’impression

Comme une petite vidéo vaut mieux qu’un long discours, je vous renvoie à la page de démo de ce redoutable petit outil :

OneFileCMS : un CMS basique mais pratique

2 commentaires

Par Seb

Il nous arrive tous de temps en temps d’être amenés à développer un site statique (old school, quoi), sans CMS ni interface de gestion, par manque de budget, de temps ou d’envie… C’est toujours un peu grisant de revenir aux basiques, de coder tout en dur (houhou, une balise <title> sans inclusion Php !).

En revanche, ça n’est pas super pratique pour effectuer des petites corrections, surtout si l’on est pas sur son poste de travail habituel : il faut remettre la main sur le mot de passe FTP, trouver un éditeur, etc… Dans ce cas, un mini-CMS tel que OneFileCMS permet de gagner bien du temps : un seul fichier à uploader sur le site, et – pouf ! Vous pouvez naviguer dans vos fichier, les éditer (bon, ok, en code uniquement, mais avouez que vous n’utilisez jamais les RTE en ligne !), uploader simplement une nouvelle image, etc…

Un accès rapide aux fichiers de votre site

Un accès rapide aux fichiers de votre site

Certes, de CMS il n’a quel nom, mais pourquoi installer une chaudière au fioul quand on a juste besoin d’un chauffage d’appoint ?

Pour en savoir plus : http://onefilecms.com

(Ah… On me rappelle dans l’oreillette qu’il en existe d’autres, avec chacun leur spécificités : PluXML, cms.txt… Et vous, lequel utilisez-vous ?)

Un sitemap full-CSS

0 commentaires

Par Seb

Sur son blog, Astuteo propose un moyen simple de réaliser un plan de site (sitemap) graphique, ergonomique et – ce qui ne gâche rien – totalement accessible :

Un sitemap graphique et accessible avec Slickmap

Un sitemap graphique et accessible avec Slickmap

Quand on sait combien il est laborieux de mettre en page un sitemap, qui plus est de le rendre visuellement agréable, cette mise en forme vous fera gagner un temps précieux.

Pour consulter la démo et télécharger la CSS correspondante : http://astuteo.com/slickmap/

Un superbe effet de survol avec jQuery

1 commentaire

Par Seb

Adrian Pelletier propose sur son blog un effet de survol (hover) du plus bel effet, en quelques lignes de code jQuery, à voir de toute urgence :

Un superbe effet de survol avec ombré ou reflet

Un superbe effet de survol avec ombré ou reflet

Deux styles sont proposés, avec réflexion ou ombré (de loin le plus travaillé à mon goût), et le soin apporté aux petits détails (l’ombre suit le mouvement, il y a un petit rebond au retour en position normale…) est impressionnant.

Pour consulter l’article : http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/

Sur ThemeForest