Blog iamvdo.meQuels filtres sont disponibles ?
La spécification prévoit 3 types de filtres :
- les filtres raccourcis
- les filtres SVG
- les shaders
Ces filtres, applicables à tous les éléments HTML, permettent de profiter d’effets réservés jusque là aux éditeurs d’images comme Photoshop.
Ils utilisent pour cela la propriété filter
Les filtres raccourcis
Les filtres raccourcis sont des effets prédéfinis, utilisables par de simples mots-clés :
-
grayscale(valeur): niveau de gris -
sepia(valeur): effet sépia -
saturate(valeur): saturation -
hue-rotate(angle): teinte -
invert(valeur): effet négatif -
opacity(valeur): opacité -
brightness(valeur): luminosité -
contrast(valeur): contraste -
blur(valeur): effet de flou -
drop-shadow(ombre): ombre portée
C’est surement la partie de la spécification qui sera le plus largement utilisée par les développeurs web. Notamment pour sa simplicité d’utilisation.
Actuellement le support n’est effectif qu’au sein de Chrome 19 et Safari 7 de manière préfixée.
Un effet de flou
div{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}Les filtres SVG
Ils permettent d’aller beaucoup plus loin que les simples filtres raccourcis. Ils sont compatibles dans tous les navigateurs récents sur du contenu SVG et également dans Firefox sur du contenu HTML. Voir cette démo utilisant les filtres SVG.
#1par JB, le 3 janvier 2013
Salut merci pour ton site ... j’y apprends plein de choses ...
Par contre je me demandais les filtres sont encore tres peu utilisables à l’heure actuelle il me semble ?
#2par CPM, le 18 janvier 2013
J’ai enfin réussi à faire marcher l’astuce, j’aurai du penser à utiliser une position:relative ;