L'exemple de code HTML et le code CSS qu'il contient sont donnés ci-dessous. L'image utilisée est fd.jpg Copiez le code et nommez une image fd.jpg pour voir l'effet complet
<!DOCTYPE HTML PUBLIC "- //W3C. //DTD HTML 4.01 Transitionnel//FR">
<html>
<tête>
<title>Effet de filtre CSS.html</title>
<méta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="c'est ma page">
<méta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
.alphas
{
filtre: alpha (opacity = 0, finishopacity = 100, style = 1, startx = 0, starty = 85, finishx = 150, finishy = 85);
}
.flou
{
font-family:lucida handwirting italique;
taille de police : 72 px ;
style de police : gras ;
couleur : #336600 ;
width:350px;/*Cet attribut est indispensable, sinon l'effet ne sera pas visible*/
filtre:flou(ajouter=true,direction=90,force=25);
}
.chromas
{
font-family:lucida handwirting italique;
taille de police : 72 px ;
style de police : gras ;
couleur : rouge ;
largeur : 350 px ;
filtre:chroma(couleur=rouge);
}
.dropshadows
{
font-family:lucida handwirting italique;
taille de police : 72 px ;
style de police : gras ;
couleur : #336600 ;
largeur : 350 px ;
filtre:dropshadow(color=red,offx=15,offy=10,positive=1);
}
.fliphs
{
font-family:lucida handwirting italique;
taille de police : 72 px ;
style de police : gras ;
couleur : #336600 ;
largeur : 350 px ;
filtre:fliph;
}
.flipvs
{
font-family:lucida handwirting italique;
taille de police : 72 px ;
style de police : gras ;
couleur : #336600 ;
largeur : 350 px ;
filtre: flipv;
}
.glow
{
font-family:lucida handwirting italique;
taille de police : 72 px ;
style de police : gras ;
couleur : #336600 ;
largeur : 350 px ;
filtre: lueur (couleur = bleu, force = 15);
}
.gris
{
font-family:lucida handwirting italique;
taille de police : 72 px ;
style de police : gras ;
couleur : #336600 ;
largeur : 350 px ;
filtre:gris;
}
.inverse
{
font-family:lucida handwirting italique;
taille de police : 72 px ;
style de police : gras ;
couleur : #336600 ;
largeur : 350 px ;
filtre:inverser;
}
.masques
{
font-family:lucida handwirting italique;
taille de police : 72 px ;
style de police : gras ;
couleur : #336600 ;
largeur : 350 px ;
filtre:masque(couleur=vert);
}
.ombres
{
font-family:lucida handwirting italique;
taille de police : 72 px ;
style de police : gras ;
couleur : #336600 ;
largeur : 350 px ;
filtre:ombre(couleur=rouge,direction=225);
}
.flots
{
font-family:lucida handwirting italique;
taille de police : 72 px ;
style de police : gras ;
couleur : #336600 ;
largeur : 350 px ;
filter:wave(add=true,freq=3,lightstrength=100,phase=45,strength=20);
}
.rayons X
{
font-family:lucida handwirting italique;
taille de police : 72 px ;
style de police : gras ;
couleur : #336600 ;
largeur : 350 px ;
filtre:rayons X;
}
</style>
</tête>
<corps>
<largeur du tableau=1000 bordure=1>
<tr><td width=100>Propriétés du filtre</td><td width=100>Description</td><td width=400>Paramètres et valeurs</td><td width=400>Exemples d'effets</td ></tr>
<tr><td><span class=alpha>Alpha</span></td><td>Définir l'effet de transparence</td><td>opacité : niveau de transparence, 0 à 100, 0 est complètement transparent<br>
style : Spécifie les caractéristiques de forme de la zone transparente, 0 est une distribution uniforme ; 1 est linéaire ; 2 est radial ; 3 est rectangulaire<br>finishopacity : définit la transparence à la fin du dégradé, la valeur est de 0 à 100<br>
startX, startY : coordonnées de début de l'effet de transparence dégradé<br>finishX, finishY : coordonnées de fin de l'effet de transparence dégradé</td><td><p><img src="fd.jpg" class="alphas"/ ></p ></td></tr>
<tr><td>Flou</td><td>Créer un effet de flou</td><td>ajouter : Spécifiez si l'image doit être modifiée en effet de flou, vrai et faux<br>
direction : définissez la direction du flou, 0 degré signifie verticalement vers le haut, tous les 45 degrés sont une unité, la valeur par défaut est de 270 degrés vers la gauche<br>force : représente le nombre de pixels de largeur affectés par le flou, la valeur par défaut est 5< /td>
<td><div class="blrs">BONNE CHANCE !</div></td></tr>
<tr><td>Chroma</td><td>Définir la couleur spécifiée sur transparente</td><td>couleur : Spécifier la couleur transparente</td><td>chroma<div class="chromas">Exemple < /div></td></tr>
<tr><td>DropShadow</td><td>Créer un contour d'image décalé, c'est-à-dire projeter une ombre</td><td>color : la couleur de la projection<br>offx, offy : ombre dans le Décalage des directions x, y<br>
positif : true crée une ombre pour tout pixel non transparent, false crée une ombre pour les pixels transparents</td><td><div class="dropshadows">exemple de dropshadow</div></td></tr>
<tr><td>FlipH</td><td>Retournement horizontal</td><td>Aucun</td><td><div class="fliphs">Retournement horizontal</div></td >< /tr>
<tr><td>FlipV</td><td>Retournement vertical</td><td>Aucun</td><td><div class="flipvs">Retournement vertical</div></td >< /tr>
<tr><td>Glow</td><td>Ajouter des effets de lumière à la limite extérieure de l'objet</td><td>couleur : spécifiez la couleur de la lumière<br>
force : intensité lumineuse</td><td><div class="glows">Exemple GLOW</div></td></tr>
<tr><td>Gris</td><td>Réduire la couleur de l'image et la transformer en niveaux de gris</td><td>Aucun</td><td><img src="fd.jpg" classe ="gris"/></td></tr>
<tr><td>Inverser</td><td>Inverse complètement les valeurs de couleur, de saturation et de luminosité pour créer un effet négatif</td><td>Aucun</td><td><img src="fd .jpg" class="inverts"/></td></tr>
<tr><td>Lumière</td><td>Projeter de la lumière sur un objet</td><td>non</td><td>non</td></tr>
<tr><td>Masque</td><td>Créer un masque transparent pour un objet</td><td>couleur : Préciser la couleur du masque</td><td><div class="masks" >Exemple de MASQUE</div></td></tr>
<tr><td>Ombre</td><td>Établir un contour solide d'un objet, c'est-à-dire un effet d'ombre</td><td>couleur : couleur de projection<br>direction : direction de projection</td> <td>< div class="shadows">Exemple d'OMBRE</div></td></tr>
<tr><td>Vague</td><td>Utiliser des ondulations sinusoïdales pour perturber l'image dans les directions des axes X et Y</td><td>ajouter : vrai signifie perturber l'image en vagues, faux pas le perturber<br >
freq : La fréquence de génération des ondulations (combien d'ondulations sont générées)<br>lightstrength : Améliore l'effet des ondulations générées (la valeur est de 0 à 100)<br>
phase : définissez le décalage au début de l'onde sinusoïdale, généralement 0, jusqu'à 100<br>force : définissez l'amplitude de l'onde sinusoïdale</td><td><div class="waves">Exemple WAVE</ div> </td></tr>
<tr><td>Xray</td><td>Afficher uniquement le contour de l'objet</td><td>Aucun</td><td><img src="fd.jpg" class="xrays" /> </td></tr>
</table>
</corps>
</html>