Effet de flou CSS3 Firefox(linux)
Je vais essayer d'obtenir un effet de flou sur ma galerie si l'utilisateur n'est pas enregistré.
Je l'ai eu, mais seulement pour google chrome. Dans mon Firefox 14.0.1 (linux) je ne suis pas capable de faire fonctionner
Mon template html (je développe sous django)
<h2> Gallerie</h2>
<ul class="galeria" id="imagenes">
{% for image in gallery %}
{% if user.is_authenticated %}
<a rel="prettyPhoto" href="{{image.url}}">
<img width="120px" height="120px" alt="{{image.comment}}" src="{{image.url}}"/>
</a>
{% else %}
<img class="blur" alt="{{image.comment}}" src="{{image.url}}"/>
{% endif %}
{% endfor %}
</ul>
Mon site.css
img.blur{
-webkit-filter: grayscale(0.5) blur(10px);
filter: grayscale(0.5) blur(10px);
width:120px;
height:120px;
}
Toute aide serait appréciée. Merci 🙂
Vous devez vous connecter pour publier un commentaire.
Gecko ne prend pas en charge la
filter
de la propriété. Il ne fonctionne que sous IE (filter
) et WebKit (-webkit-filter
). Pour appliquer des effets de flou dans les navigateurs basés sur Gecko (comme Firefox), vous pourriez faire usage de Filtres SVG. Voici une bonne explication comment utiliser les Filtres SVG pour un flou gaussien. Ces Filtres SVG ne fonctionnent que dans Gecko donc, vous avez encore besoin de votre ancien code pour WebKit & IE.Cette explication a mieux fonctionné pour moi.
http://css-plus.com/2012/03/gaussian-blur/