Clearideaz, le portfolio d'Olivier Gorzalka, webdesigner sur Lille, Nord-Pas de Calais

webdesigner et intégrateur XHTML / CSS

Articles avec le tag ‘css’

Du Parallax avec jQuery et CSS

Le scrolling parallax est une technique qui consiste a créer un pseudo-effet de 3D sur un environnement en 2D. Si vous avez déjà pu jouer aux premières versions de Sonic The Hedgehog, vous comprendrez de quoi je parle. Je me suis amusé, encore une fois avec JQuery, a créer un effet parallax sur une page d’accueil d’un site existant.

J’ai repris la page d’accueil de SilverBackApp.com qui utilise déjà un effet Parallax au redimensionnement du navigateur. La technique très subtile consiste a placer les différentes couches de fonds avec des background-position en pourcentage. En jouant justement sur ces valeurs relatives, on peut de ce fait créer un effet intéressant lorsque l’utilisateur redimensionne sa fenêtre.

En partant de cette base, j’ai décidé de rajouter une couche Javascript. Le but est de changer la position du fond en fonction de la position de l’image. Pour cela, on va juste récupérer les positions du pointeur et utiliser ces valeurs pour déterminer le positionnement (en pixel cette fois) des différentes images.

Lire la suite

Les hacks c’est pas bien !

La tentation de recourir à des hacks est grande lorsque l’on commence à se lancer dans l’intégration d’un site web. Lorsque l’on s’aperçoit que la page développée s’affiche différemment d’un navigateur à l’autre, on se dit très souvent que c’est le navigateur (Internet Explorer pour ne pas le citer) qui interprète le code ou la feuille de style n’importe comment.

Cette réaction est plus ou moins justifiée. Nous sommes tous conscients des lacunes du navigateur Microsoft et plus particulièrement des versions antérieures à la 7. Toutefois, ce n’est pas une raison pour charger sa feuille de style de propriétés invalides en prenant comme bouc émissaire le navigateur de Monsieur Redmond.

Une feuille de style doit, au même titre que le document XHTML, passer l’épreuve du validateur W3C. Ce n’est pas en insérant des « _width: » ou encore de « %margin: » dans votre CSS que vous pourrez vous vantez de faire un site au codage propre. J’irais même jusqu’à dire que les hacks sont bons pour les fainéants la plupart du temps.

Dernièrement, j’avais fais remarquer à un intégrateur remonté contre IE que notre boulot perdrait de l’intérêt sans ces soucis de compatibilité. Même si j’affirmais cela ironiquement, je trouve passionnant de découvrir pourquoi telle propriété ne fonctionne pas de la même manière d’un navigateur à l’autre et surtout, comment y remédier.

Lire la suite

Mon livre de chevet du moment

120225075168_transcendercss_tnActuellement je lis Transcender CSS, un livre d’Andy Clarke qui est l’un des designers web les plus doués. Il participe notamment au groupe de travail du W3C et à déjà publié des articles sur le fameux site A List Apart. C’est LE livre que j’attendais depuis longtemps. Cet ouvrage, très illustré (j’adore…), traite du webdesign à l’aide des feuilles de style CSS. Ma partie préférée concerne l’élaboration d’un design web à l’aide d’une grille (c’est d’ailleurs ce que j’ai utilisé pour le design de ce blog…). Andy Clarke évoque également les micro-formats, les règles de base d’accessibilité. Le point de vue de l’auteur est parfois discutable mais je pense que Transcender CSS peut être considéré comme une référence en terme de publication sur le graphisme web via CSS. Un livre à mettre donc entre toutes les mains des webdesigner.

La pseudo-classe :hover

CSS a introduit des fonctionnalités très importantes pour le webdesign: les pseudo-éléments et les pseudo-classes.

Les pseudo-éléments sélectionnent une partie spécifique dans le Doctree (le formatage du document source) à partir des informations déjà données par ce dernier: nom, attribut… De fait, on peut appliquer un style sur une partie spécifique du document. Par exemple, avec le pseudo-élement :first-letter permet d’appliquer un style sur la première lettre d’un paragraphe. En combinant cette propriété avec le pseudo-classe :first-child, on peut alors créer une lettrine.

Les pseudo-classes, quant à eux, ciblent des éléments sans forcément prendre en compte les informations renvoyées par le Doctree. Elles ne se déduisent donc pas de ce dernier. (On notera toutefois deux exceptions: :first-child et :lang). Une propriété peut être générée dynamiquement par l’action de l’utilisateur sur le document.

La pseudo-classe qui nous intéresse dans le cas présent est :hover. Elle offre un certains nombre de possibilité que nous allons voir en détail en utilisant plusieurs exemples. Comme beaucoup de pseudo-classes et pseudo-éléments, elle connait des problèmes de compatibilités avec les navigateurs strictement inférieurs à IE 7. IE ne permet cette propriété que sur les balises de liens. Pour résoudre ces lacunes, on peut utiliser le hack JavaScript de Suckerfish pour implémenter la propriété :hover au vieux navigateurs IE.

Lire la suite

Améliorer Internet Explorer (toutes versions)

Dean Edwards est un génie. Internet Explorer a toujours été réputé pour être un navigateur très en retard sur les autres. Un grand nombre de sélecteurs et de propriétés CSS ne fonctionnent tout simplement pas sous les versions inférieures à IE7. C’est là que Dean Edwards entre en jeu. Ce programmeur a conçu une véritable librairie permettant d’émuler par le biais de fonctions javascript, les fonctionnalités CSS 2 absentes de IE. A l’origine, son objectif était de contrer la pratique des hacks CSS qui rendent les feuilles de style invalides. Mais il ne s’est pas arrêté là en implémentant certains sélecteur CSS 3 dans le navigateur certifié Windaube. La dernière version sortie date de août 2005 donc je n’apporte pas une nouveauté, mais ce genre de trésor peut en intéresser un très grand nombre ;)

Vous pouvez télécharger l’ensemble des fichiers sur son site internet personnel.