Vous trouverez dans cette nouvelle édition du petit journal du web des liens concernant : des vidéos en plein écran, des stratégies pour faire des sites responsive, des backgrounds dans vos <tr>, un peu de gossip sur Dribbble, des formulaires sur mesure pour WordPress, les limites de la gratuité sur le net, le passage d’After Effects à CSS3 et le point médian pour finir. →
CSS3 Generator est un éditeur de CSS3 créé par Pascal von Seth. Cet outil en ligne permet d’éditer une dizaine de propriétés : background, border, border-radius, gradient, box-shadow, transform, opacity, font et text-shadow. Chaque propriété est modifiable grâce à des sélecteurs de couleur, des champs de saisie ou des curseurs dynamiques selon la nature de la propriété CSS. →
Une fois n’est pas coutume, je vais aborder la question du web design sous l’angle du graphisme, sans considération de langage de développement ou de technique en général. Je n’aborderai pas les questions liées à l’architecture de l’information, à l’ergonomie ou à l’accessibilité. A la place, après un aperçu sur le travail du Directeur artistique et du graphiste, je vous propose une liste commentées des éléments graphiques que l’on trouve de manière récurrente sur les sites web, avec pour chacun un rapide commentaire. →
Full background image slider est un script qui permet d’afficher un diaporama occupant toute la fenêtre du navigateur (ou le container que vous voulez). Outre le changement de background de votre site — ce qui pourrait s’avérer fatiguant pour les yeux –, ce script pourra se rendre utile pour présenter des visuels sur une page séparée. →
Il est courant d’afficher le logo d’un site web sous la forme d’une image au lieu de mettre le nom du site au format texte HTML. Les préoccupations grandissantes des webmasters concernant l’optimisation SEO ont popularisées les titres HTML composés de mots-clés optimisés puis masqués au profit d’un logo sous forme d’image. Pour y parvenir, les intégrateurs HTML & CSS ont plusieurs cordes à leur arc. Malheureusement certaines solutions présentent des défauts, notamment en ce qui concerne l’accessibilité des contenus cachés, qui peuvent rester inaccessibles pour certains (agents) utilisateurs. Sans parler du risque (faible dans ce cas) de passer aux yeux de Google pour un vilain petit cachottier. Voici donc un florilège de techniques CSS pour cacher ce texte que l’on ne saurait voir, mais qui a son importance. →
Je m’étais déjà posé ce genre de questions sur le sens des hâchures qui ont fait la joie des backgrounds des sites Web dans le mouv’ dans les années 2006 — 2007. Lorsque je regarde certains avatars je suis frappé par une chose : certains semblent plus ou moins connectés avec leurs tweets selon la direction de leur regard. →
Parallax — Le défilement parallaxe (ou scrolling différentiel) est une technique utilisée depuis longtemps dans le cinéma, le dessin animé ou le jeu vidéo pour créer une illusion de profondeur. Cet effet consiste à superposer plusieurs calques et les faire défiler à des vitesses différentes.
Cf. la démo de Parallax proposée par Australopitech.
iepngfix — Ce composant HTC gère la plupart des contraintes liées à l’absence de prise en charge de la transparence 24 bits par Internet Explorer 6. Un des rares scripts à prendre en charge les propriétés background-repeat et background-position. Voir le tutoriel sur la transparence des PNG 24 bits sur IE6 pour plus d’information.
Ce tutoriel pour styler les champs input de vos formulaires de recherche vous permettra d’offrir à vos visiteurs un formulaire design au lieu du traditionnel — mais efficace — champ *input type=text* blanc avec contour.
L’auteur utilise un *button* à la place du *input type= »submit »* pour éviter les problèmes d’alignement afin d’utiliser une seule image pour le champ *input* et le *button*. Ce qui permet de gérer facilement les différents état *:focus* ou *:hover* avec *background-position*.
PS : En cas de problème avec l’utilisation de l’élément button, jettez un oeil sur ce fil de discussion paru sur le forum Alsacréations.
Le quotidien de l’intégrateur HTML est parfois ponctué de vide existentiel lorsqu’il s’agit de livrer des pages web compatibles avec la majorité des navigateurs dont la liste se divise grosso modo en deux groupes : ceux qui intègrent au mieux les standards recommandés par le W3C en matière de rendu CSS (Firefox, Safari, Opera et Konqueror, etc.) et les autres, principalement les versions 5 et 6 d’Internet Explorer. →
