-
Les filtres CSS3
La propriété filter en CSS3 permet de modifier de façon assez sympathique les couleurs d'un élément. Survoler les images pour voir l'effet
sélecteur{
-webkit-filter: blur(Xpx);
-moz-filter: blur(Xpx);
-o-filter: blur(Xpx);
filter: blur(Xpx);
}Blur permet de flouter un élément. Remplacez X par une valeur en px, indiquant l'étendu du flou. 0px laisse l'élément normal.
Grayscale permet de passer un élément de couleur en nuance de gris, 0 n'a aucun effet, et 1 passe l'élément en noir et blanc. Vous pouvez utiliser les décimaux de 0 à 1 (0.3 ; 0.4 ; etc...)
sélecteur{
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
filter: grayscale(1);
}Le même fonctionnement que grayscale, en mettant l'élément en sepia. Utilisez les valeurs de 0 à 1.
sélecteur{
-webkit-filter: sepia(1);
-moz-filter: sepia(1);
-o-filter: sepia(1);
filter: sepia(1);
}Brightness vous permet d'augmenter la luminosité d'un élément.
0 represente le noir
1 l'élément normal
Vous pouvez ensuite aller jusqu'à 10 pour augmenter la luminositésélecteur{
-webkit-filter: contrast(5);
-moz-filter: contrast(5);
-o-filter: contrast(5);
filter: contrast(5);
}Même fonctionnement que brightness, Contrast permet d'augmenter le contraste entre les couleur.
0 n'a aucun contraste, ce qui affiche un élément gris
1 ne modifie rien
Vous pouvez ensuite aller jusqu'à 10 pour augmenter le contraste.sélecteur{
-webkit-filter: brightness(5);
-moz-filter: brightness(5);
-o-filter: brightness(5);
filter: brightness(5);
}Hue-Rotate fait "tourner" la teinte des couleurs. En tournant de 180° vous inversez les teintes.
Je parle bien de teinte et non de couleur. Cette propriété n'a aucun effet sur les éléments en nuance de gris.sélecteur{
-webkit-filter: hue-rotate(180deg);
-moz-filter: hue-rotate(180deg);
-o-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}Invert inverse les couleurs d'un élément.
0 ne modifie rien
0.5 rend l'élément d'un gris uni
1 inverse totalement les couleurssélecteur{
-webkit-filter: invert(1);
-moz-filter: invert(1);
-o-filter: invert(1);
filter: invert(1);
}Saturate permet de modifer la saturation des couleurs.
0 met l'élément en nuance de gris
1 ne modifie rien
10 sature au maximumsélecteur{
-webkit-filter: saturate(10);
-moz-filter: saturate(10);
-o-filter: saturate(10);
filter: saturate(10);
}Vous pouvez bien sûr utiliser plusieurs filtres sur le même élément. N'hésitez pas à bidouiller un peu les valeurs pour trouver ce que vous voulez.
-
Commentaires
1ShuchuJeudi 12 Décembre 2013 à 20:48RépondreSuper merci c'est vraiment très utiles je ne savais pas qu'on pouvait faire tous ces effets :)
C'est probablement dû à ton navigateur... Les propriété CSS3 ne sont pas encore reconnues partout ^^'
De mon côté, j'utilise Chrome
C'est super ! Mais quel est le sélecteur pour faire un effet sur une seule image ?
Désolée si ma question n'est pas très claire :/
Il faut que tu donne un ID à ton image, pour ensuite ne travailler que sur cet ID (cette image) en CSS :
HTML
<img src="URL" id="monImage" />
CSS
#monImage { propriété : valeur; }
Pas avec des filtres, mais avec text-shadow:
=> http://fanstasy-graph.eklablog.net/propriete-les-ombres-a5171564
Quand ce genre de message s'affiche, c'est généralement parce qu'il manque une accolade { ou }
Regarde dans ton code si tu as le même nombre d'accolade ouvrante { et d'accolade fermante }
Si c'est correcte, ça peut venir d'un commentaire qui n'est pas fermé. Les commentaire commence par /* et finissent par */
Il n'existe pas d'autre filtre? Pour que ce ne soit par exemple que bleu, rouge etc..?
(j'ai bien essayais avec le filtre hue mais quand les couleurs changent elles ne sont pas toutes monochromes)
A la base, en survolant je pensais que ça ne marchait pas, mais en passant sur chrome, je remarque que si en fait... Donc je tiens à préciser que ça ne marche pas sur Mozilla.
Coucou :3
J'ai essayé et ce code marche très bien sur Chrome.
Par contre, sur Mozilla et sur IE, ça n'a pas l'air de marcher...? Est-ce que ça peut se régler ?
Hellow ~
J'voulais savoir... comment faire pour que ça fasse une transition ? '-' Parce que par exemple, pour passer l'image en noir et blanc, quand j'ai essayé, c'est passé d'un coup de la couleur au noir et blanc, ça fait donc pas très joli... j'ai essayé de bidouiller avec les codes que je connaissais déjà, mais pas moyen, ça marche pas :') si tu pouvais m'expliquer... merci :3
Je sais, j'utilise déjà ces codes pour mes blogs, mais je n'arrive pas à les utiliser avec ces filtres :)
Ah eh bien, pour faire une transition vers le noir et blanc, il faut utiliser un hover, (je ne sais pas si le code est bon, mais faut faire un truc dans le genre x3)
selecteur :hover { -webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);filter: grayscale(1);
-webkit-transition-duration: Xs;
-moz-transition-duration: Xs;transition-duration: Xs;}
Je ne comprend pas comment faire .. ou je dois mettre ce code ? Dans les CSS Ou HTML ? Et je comprend pas ce qu'il faut mettre ou il y a les X
Ajouter un commentaire