28172 sujets

CSS et mise en forme, CSS3

Filtre noir et blanc

Bonjour,

Y a t'il une fonctionnalité CSS3 qui permette de transformer une image couleur en noir et blanc ?
C'est pour des images très simples donc pas de soucis de qualité.

IE a le filtre "grey" mais je n'ai pas l'équivalent pour les autres navigateurs.

Merci d'avance

Raphael
Hello,

Regarde du côté des filtres SVG, il a des démos de Paul Rouget qui tournent dans lesquels ils appliquaient des filtres en live sur des balises <vidéos>.

Sur des images ça doit pouvoir se faire facilement.
Modifié par Florian_R (24 Aug 2011 - 18:34)
Re,

J'étais justement en train de faire mumuse de mon côté avec les filtres pour tester.
<!DOCTYPE html>

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Filtre</title>
    <link rel="stylesheet" href="style.css">

    <style type="text/css">
        p {filter: url(#test)}
    </style>
</head>
<body>

    <p>bla</p>
    <div>bla</div>

    <svg>
        <filter id="test">
            <feGaussianBlur stdDeviation="3"/>
        </filter>
    </svg>
</body>
</html>

div {
    color: red;
    filter: url(#test) /*Visiblement l'url est mauvaise*/
}


Si le style est inline, ça roule.
S'il est dans une css externe, ça ne marche pas. Je pense que ça vient de l'url, mais je ne vois pas comment faire une url relative pointant sur une ancre Smiley confus .

Si quelqu'un sait comment utiliser un filtre, mais dans une css externe, ça m'intéresse.
Bon, je me réponds à moi-même.

Après avoir eu le temps de faire quelques tests :

Pour appeler un filtre dans un svg inline depuis une css externe, il faut préciser le nom du fichier qui contient le filtre + l'ancre.
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <p>bla</p>

    <svg>
        <filter id="test">
            <feGaussianBlur stdDeviation="3"/>
        </filter>
    </svg>
</body></html>
style.css
p {filter: url(./index.html#test)}
mais ça ne marchera que dans ce fichier, et pas dans un autre fichier html.

Pour que ça passe partout, il faut un fichier svg externe.

Au cas ou ça peux aider quelqu'un.
Sujet clos
Aller à