Filtre CSS variation de teinte

[Invité]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://forum.forumactif.com/

Description du problème

Bonjour,

Je souhaite appliquer un filtre CSS afin d'influencer toutes les images qui seront postées dans une class, cela ayant pour but d'opérer un changement de teinte sur les dites images. J'ai pensé au départ conjuguer les filtres greyscale et hue-rotate mais j'ai compris que le greyscale prenait le pas sur la couleur...

J'ai déjà vu le CSS que je recherche être utilisé sur un forum dont je ne me souviens plus le nom. Je vous joins une capture du résultat que je désire obtenir.

Merci d'avance,

[Kardo]

Bonjour,
Je vous invite à faire des essais à cette adresse : https://codepen.io/jordanoaragao/full/Dsvkn
Vous pourrez ainsi ajouter les différents filtres et voir la classe générée via l'onglet 'Code'

[Invité]

Bonjour,

C'est un outil formidable merci beaucoup je ne connaissais pas Il me donne un effet très sympa sur des images noires et blanches, mais dans le cas où un utilisateur poste une image avec des couleurs, le résultat peut devenir très psychédélique ! (En raison du hue-rotate)

Savez-vous s'il est possible de forcer une image à être en n/b, pour ensuite ajouter un filtre par-dessus ? Ou bien il y a un tout autre moyen de parvenir au résultat que je voudrais ?

D'avance merci,

[Kardo]

Si ça peut vous donner des idées :
https://jsfiddle.net/royv7khd/
La classe "test" fait un grayscale et la classe "color" ajoute un filtre coloré après ce grayscale.

Credits : https://stackoverflow.com/questions/30025975/apply-a-css-webkit-filter-grayscale-before-using-a-background-blend-mode-keepin

[Invité]

Le résultat est génial.

Cependant pour reprendre l'exemple donné :

Code:

#cat {
    width: 320px;
    height: 640px;
    background-image: url(https://images2.imgbox.com/87/f6/zWMsmiQ2_o.png);
}

Cela signifie que la class ne pourra s'appliquer que pour une seule image ?
Comment faire pour que ce soit l'utilisateur qui entre lui-même l'url d'une image et que la class se charge toute seule d'appliquer le filtre n/b puis la variation de teinte ?

J'ai une class qui fait en sorte de recadrer la photo et la positionner correctement dans le corps du message. Est-ce possible d'y incorporer le filtre à l'intérieur ?

Merci,

[Kardo]

Cette variante vous permettrait d'appliquer cela sur les images dans une <div> .test,
Je ne sais pas si on peut appliquer ces modifications directement sur l'image sans l'imbriquer dans une div.
https://jsfiddle.net/461oqe3g/1/

[Invité]

Rebonjour,

L'effet donné est exactement ce que je recherche merci beaucoup !
Toutefois en l'appliquant je me rends compte que le filtre semble s'étendre au-delà des images ciblées, voici une capture :

Spoiler:

On aperçoit un liseré blanc qui déborde, comme si la balise ne comprenait pas qu'elle devait s'arrêter aux trois photos.
En fouillant un peu, lorsque je décoche le position: relative; eh bien le filtre bleu disparaît (et donc, le liseré blanc aussi). Quant au filtre n/b, celui-ci s'applique toujours sans déborder, il respecte bien les trois images.

D'avance merci,

[Kardo]

Rebonjour,
Difficile de pouvoir cerner le problème sans accès à une page où le reproduire, essayez tout de même d'ajouter ceci :

Code:

width: fit-content;

dans votre classe .test.

Edit : Ou la classe par laquelle vous avez remplacé le .test de mon exemple précédent.

[Invité]

Cela fonctionne à merveille c'était bien ça !
Merci beaucoup.

Je marque ce sujet comme résolu.