Domaines
RH
Juridique
Compta
Administratif/Moyens Généraux
Communication
Bureautique
Conseils aux débutants
Word
Excel
PowerPoint
Outlook
Access
Publisher

PagePlus (PAO)
Windows/système
PhotoImpact
Conception web : les bases
Applications pas à pas
Tests logiciels
Macros VBA
Leçons
Macros Word
Astuces
Orthographe
Rédaction
Organisation
Produits/services malins
Outils
Ouvrages
Modèles
Macros
Liens
Anglais
Grammaire avec AnglaisFacile
Leçon gratuite avec AnglaisFacile
Carrière
Gestion de carrière
Fiches métier
Témoignages / vécu
Offres d'emploi

Evénements métier
Echos de presse, comptes-rendus

Echanger
Forums
Chater en direct

© Nadège Guilbert
Le contenu de ce site
est régulièrement déposé auprès de la SGDL
Reproduction interdite
sans le consentement
écrit de l'auteur

Imprimer la page

Web > Index
05-Mar-2007

 

La balise blink
La balise marquee
La balise filter 1/2
La balise filter 2/2
Les transitions de page

S'amuser avec les balises

Appliquez des effets spéciaux à vos images : la balise filter

Parmi les balises ludiques, nous pouvons classer la balise Filter.
Cette balise vous permet d'appliquer des effets spéciaux à une image, sans avoir à utiliser un logiciel de retouche photos !

Voic les images originales qui serviront à nos tests. Aucune des photos que vous verrez ensuite n'est retouchée : les effets, déformations, sont obtenus simplement à l'aide du code.

Une photo, tout ce qu'il y a de classique

une image avec fond transparent (un gif)

 

Filtre de mouvement

<img src="image.jpg" style="filter:'blur(direction=1, strength=50)'">

direction : angle en degré.

strength : plus ce nombre est élévé, plus l'effet est prononcé.

Filtre rayons X

<img src="image.jpg" style="filter:xray">

Filtre négatif

<img src="image.jpg" style="filter:invert">

Filtre de floutage

<img src="image.jpg" style="filter:alpha(opacity=90, finishopacity=1, style=1, startx=1, starty=, finsihx=80, finishy=50)'">

opacity : transparence globale de l'image. Plus le chiffre est élevé, moins l'image est transparente.

finishopacity : plus le nombre est élevé, plus les bords de l'image sont précis.

style. Trois valeurs possibles. 1 : le flou part de la droite (maximum) vers la gauche de l'image. 2 : dessine un contour oval autour de l'image. 3 tous les bords de l'image sont floutés.
Filtres retourner une image

<img src="image.jp" style="filter:fliph)">

fliph : horizontalement

<img src="image.jp" style="filter:flipv)">

flipv : verticalement

Le filtre vague

<img src="image.jpg style=filter:wave(freq=absolute, light=20, phase=1, strength=50, add=1)

freq : plus le nombre est important, plus le nombre de vagues est élevé.

light : intensité de la lumière. Valeur de 1 à 100.

phase : détermine le point de départ de la distorsion d'image (valeur de 0 à 100).

strength : plus le nombre est élevé, plus la vague ondule.

add : si add=1, l'image déformée est supperposée sur l'image originale.

Le filtre ombre

 

<img src="image.jpg" style="filter:shadow(color=pink, strength=10, direction=150)>

color : nom de la couleur en anglais ou code hexadécimal,

strength : force de l'effet

direction : angle de projection de l'effet

Filtre Pixellisation

<img src="image.jpg" style="filter:progid:DXImageTransform.
Microsoft.Pixelate(MaxSquare=3)>

MaxSquare : plus le nombre est élevé, plus l'image est pixellisée.

Filtre noir & blanc

<img src="image.jpg" style="filter:gray()>

Haut

Niveau

Compatible :

  • Internet Explorer

  • Netscape