Appliquer
des filtres à ses images avec CSS
"Blur", "Emboss", "Shadow", sont des filtres qui vous sont peut-être familiers. Un logiciel spécialisé (PhotoShop, Paint Shop Pro...) se charge de les appliquer à vos images. Voyons comment profiter des feuilles de style sous IE pour en faire autant.
Que celles et ceux qui ne maîtrisent pas en détail
les feuilles de style, ou CSS (Cascading Style Sheets), se rassurent:
les filtres que nous allons voir ne sont pas compliqués à
mettre en place. Si néanmoins vous souhaitez approfondir
vos connaissances dans ce domaine, consultez nos tutoriels
CSS.
Afin de rentrer dans le vif du sujet, voici d'ores et déjà
de quoi il retourne:
(ATTENTION: les effets qui suivent ne fonctionnent que
sous IE, et pour certains, seulement avec la version 5.5).
Cette image est en réalité stockée sous une
forme "normale" (aucune déformation), nous agissons
ici sur les paramètres du filtre "wave"
pour modifier notre image.
Techniques d'application
Appliquons l'effet "blur" à notre image de la
manière la plus simple possible :
<img src="mon_image.jpg" width="50"
height="50" border="0">
... il suffit de rajouter le paramètre "filter"
et le nom de celui-ci :
<img style="filter:blur" src="mon_image.jpg"
width="50" height="50" border="0"
alt="Effet blur">
Nous obtenons l'effet recherché :
Avant : |
|
|
Après : |
|
Cet exemple est le plus simple que nous puissions construire sur
une image. Notez tout de même que les filtres, dont voici
les
noms et syntaxes (menu de gauche), sont paramétrables.
Certains filtres passent même inapercus par défaut,
il en est ainsi pour le filtre "alpha" qui permet de jouer
sur la transparence de l'image.
<img style="filter:alpha" src="mon_image"
width="50" height="50" border="0"
alt="Effet alpha">
Par défaut on obtient une image conforme à l'originale.
Appliquons au filtre "alpha" l'attribut "opacity"'
(de 0 : transparent, à 100 : aucun changement) :
<img style="filter:alpha(opacity=20)"
src="mon_image" width="50" height="50"
border="0" alt="Effet alpha">
L'attribut "opacity" permet le passage d'une image conforme
à l'originale à une image presque transparente :
Effet "alpha" sans attribut : |
|
... Avec l'attribut "opacity=20" : |
|
Nous venons de le voir, modifier le paramètre "opacity"
sur une image est simple et rapide. Qu'en est-il pour un site entier
? Admettons que vous souhaitiez modifier le "degré"
de transparence de toutes vos images. Afin de faciliter les choses,
admettons également qu'elles possèdent déjà
toutes la même valeur pour l'attribut "opacity",
mais le problème reste de taille.
Un "Rechercher / Remplacer" sur l'ensemble de vos lignes
de code n'est pas une solution très élégante,
et c'est parfois une opération risquée. Nous allons
donc construire un fichier "css" qui va centraliser
nos souhaits en matière de filtres.
Dans chaque fichier où des filtres sont utilisés,
vous allez insérez derrière le tag "body",
la ligne suivante :
<link href="jdn.css" rel="stylesheet"
type="text/css">
Cette instruction indique où se trouve le fichier qui contient
la définition de vos filtres. Ici c'est le fichier "jdn.css",
dans le même répertoire, qui les possède. A
quoi ressemble ce fichier ? Rien de compliqué :
img.inversion { filter: invert; }
Cette simple ligne définit un filtre appelé "inversion",
de la même manière, ou presque, que nous l'aurions
utilisé dans le tag <IMG>.
Par la suite, si nous désirons appliquer ce filtre à
l'une de nos images, il nous suffira d'indiquer :
<img class="inversion" src="mon_image" width="50"
height="50" border="0" alt="inversion des
couleurs par le fichier.css">
Nous obtenons sans surprise : |
|
Ainsi pour le degré de transparence de nos images, il suffit
d'indiquer dans le fichier.css :
img.transparence { filter:alpha(opacity=20);}
Ce paramètre ne sera alors à modifier que dans ce
fichier et pas dans toutes les pages qui utilisent ce filtre.
Autres exemples, autre syntaxe
Si jusqu'à maintenant nous avons appliqué ces transformations
sur des images, notez que de simples mots peuvent aussi être
modifiés :
Le début de cette phrase est classique, pas la fin !
Pour parvenir à ce résultat, nous utilisons la balise
<SPAN> pour insérer notre filtre (ici "flipH",
une inversion horizontale) :
<span style="width: 70; height: 5;filter:
FlipH">pas la fin !</span>
"width" définit la quantité d'espace dont
nous avons besoin pour afficher sur une seule ligne notre morceau
de phrase.
Il existe de nombreux autres filtres que nous vous laissons découvrir.
Sachez également que CSS permet quelques effets de transition,
comme celui-ci (fonctionne sous IE 5.5) :
Testez
cet effet (Ne fonctionne qu'une fois par accès à la
page)
Cet exemple utilise une fonction JavaScript qui permet le passage
de l'image initiale à la finale :
<script language="JavaScript">
function Transition()
{
document.all.object.filters[0].Apply();
document.all.object.src="jdnetsmall.jpg";
document.all.object.filters[0].Play();
}
</script>
Voici la nouvelle syntaxe d'accès aux filtres propre à
IE 5.5 (qui garde la compatibilité avec les méthodes
vues précedemment) :
<img id=object style="filter:progid:DXImageTransform.Microsoft.Wheel(duration=3)"
src="jdnetsmallinv.jpg">
Si vous souhaitez explorer davantage le monde des filtres CSS, vous
pouvez tester cet exemple
très complet sur l'étendue des possibilités
de filtrage d'une image via CSS.
[Arnaud
Gadal 7
novembre 2001 , JDNet]
|