Le format PNG autorise jusqu’à 256 niveaux de transparence qui ne sont pas pris en charge par Internet Explorer 6. La dégradation grâcieuse n’étant pas toujours possible, je me suis rafraichis la mémoire sur les différentes manières d’utiliser le filtre AlphaImageLoader. J’ai fini par tomber sur une solution globale pour gérer cette transparence même en présence d’un background-repeat ou d’un background-position ! (Cet article est en quelque sorte la suite de Opacité CSS et effet de trame avec GIF/PNG transparent.)Le format PNGLe PNG est format d’enregistrement d’image destiné à remplacer le format GIF dans sa version 8 bits. La version 24 b...

scoopeo_url='http://www.css4design.com/blog/menu-a-onglets-tabs-idtabs-ou-domtab'Menu à onglets avec Javascript et CSS fait partie des articles les plus lus de ce blogzine. Mais la solution présentée alors n’est pas un modèle d’accessibilité car elle ne fonctionne plus correctement si Javascript est désactivé. Dans ce cas, le menu reste bloqué sur le premier onglet actif. Bien que certains trouvent qu'il s'agit d'une fonctionnalité et non d'un défaut, je préconise deux scripts bien plus accessibles et efficaces : idTabs de Sean Catchpole et domtab de Chris Heilmann.Avant de choisir un système de menus à onglets, il est important de vérifier les trois points suivants :Poids du ...

WPML Multilingual CMS est un plugin pour Wordpress qui transforme n’importe quel blog Wordpress ou WordpressMu en site multilangue. Ce plugin est proposé par onthegosystems spécialisé dans la photo numérique et qui propose également le service ICanLocalize pour la traduction de votre site web. WPML.org vous accompagnera dans le paramétrage et l’utilisation du plugin pour profiter au mieux des nombreuses fonctionnalités de WPML accessibles depuis l’administration de Wordpress.N’ayant pas dans l’immédiat besoin d’un site multi-langues, je me suis intéressé aux fonctions qui améliorent l’expérience utilisateur (UX) et qui permettent d’avoir des...

Tester ses pages web dans les différents navigateurs présents sur le marché est souvent source de frustration. Même lorsqu’on utilise un système Windows, on rencontre des difficultés pour tester les sites dans IE6, IE7 et IE8 en même temps. Opera, Firefox, Google Chrome ou Safari ne posent pas de problème particulier. Selon votre configuration, il existe plusieurs techniques permettant d’assurer un affichage homogène sur la majorité des navigateurs : virtualisation, logiciels, services en ligne ou pourquoi pas un deuxième ordinateur dédié comme un NetBook ?Il est bien évident que la question de pose différemment selon que l’on utilise un Mac ou un PC et dans ce dernier c...

En regardant de plus près les options proposées par FeedBurner pour la détection des usages suspects d’un flux RSS, je suis tombé sur l’option Password Protector (onglet Publicize) qui permet d’associer un identifiant et un mot de passe à un flux RSS :Il s’agit d’une protection basique pour éviter que Pierre, Paul ou Jacques utilise votre flux. Avec cette option, vous protégez votre flux en utilisant une authentification HTTP. Les requêtes sur vos flux hébergés chez FeedBurner demanderont aux lecteurs une combinaison identfiant / mot de passe pour y accéder à condition que leur aggrégateur de flux support le protocole d’authentification pour visualiser ...

Conditional-CSS est un programme écrit en php4 et php5 (au choix) qui permet d’utiliser des commentaires pour cibler une dizaine de navigateurs par leur nom et leur version, à la manière des commentaires conditionnels ciblant les différentes versions d’Internet Explorer.Les commentaires conditionnels de Conditional-CSS peuvent s’appliquer à l’ensemble d’une règle CSS ou à une seule de ses propriétés. Voici un exemple d’utilisation :/* Conditional-CSS example */ a.button_active, a.button_unactive { display: inline-block; [if lte Gecko 1.8] display: -moz-inline-stack; [if lte Konq 3.1] float: left; height: 30px; [if IE 5.0] margi...

Dans la série des thèmes WordPress minimalistes voilà The Ideal Website 1.1 proposé par Information Architect (iA). L’équilibre graphique de ce thème provient essentiellement de l’application de la suite de Fibonacci — qui fournit des rapports très proches du nombre d’or — aux différentes proportions des éléments du design. Le résultat est ce que j’ai vu de mieux en matière de mise en page pour un blog. C’est la démontration réussie que l’on peut appliquer les règles de mise en page du monde de l’imprimé à l’écran, sans rien sacrifier. Je l’avais presque oublié. De l’architecture cosmique aux coquillages…Parmi l...

Les bulles de dialogue sont un symbole largement répandu sur le web, popularisé par le web 2.0 et le User Generated Content : principalement les commentaires sur les blogs (et encore, car la tendance est à la baisse… La faute à Twitter). Le tutoriel proposé par Nicolas Gallagher présente plusieurs modèles de bulles de dialogue créées en CSS 2.1 (propriétés :before et :after) progressivement améliorées avec CSS 3 : dégradés, coins arrondis, etc. Et oui, pas d’image ni de Javascript pour un effet littéralement bluffant.Cerise sur le gâteau, le marquage nécessaire est réduit au strict minimum pour un maximum d’effet :J’ai bien envie de coincer la bulle<h2 class='tr...

Ces deux bouts de code dégottés sur wpguy affichent un lien “lire la suite” aléatoire pour chacun de vos articles. Le premier bout de code est constitué d’un Array regroupant vos chaines de caractères ; il doit se trouver avant The Loop :<?php $more_strings = array( "Read More...", "Keep on Reading...", "Wait! There's more...", "Read the rest of the article..."); ?>Reste à remplacer l’appel à la fonction the_content() que vous utilisez habituellement pour afficher vos billets par cette ligne :<?php the_content($more_strings[rand(0,count($more_strings))]); ?>And the cat’s in the bag!Rédigé par Bruno Bichet et publi&eacu...

Après le thème Agrumz dont une version est encore visible sur Notorious Blog, et après avoir mis en place un thème provisoire en attendant, voici SquaryBluevie, le nouveau thème bleu et carré (et un peu vert aussi) pour css4design. Il ne s’agit pas vraiment d’un thème destiné à transformer ce blog en magazine, mais plutôt d’en faire un magazine qui ressemble à un blog, nuance, nuance… Un blogzine ? Oui, oui, c’est presque ça ! Comme promis, voici donc le premier volet de la série Danse avec les loops pour montrer ce qu’il y a sous le capot. Une ligne éditoriale moins linéaireJe ne m’étendrai pas trop sur les interrogations existentielles qui mR...