[Résolu] Couleur effet translucide sur un site internet.

Bonjour,

J'espère poster mon message au bon endroit, sinon je laisse les modérateurs le déplacer là où il faut.

Voilà mon problème:

Je suis en train de préparer un site de e-commerce avec l'aide d'un webmaster.
Le design de la homepage est minimaliste: des photos de produits défilent dans des sliders en plein écran, avec par-dessus juste le nom du site et la barre de menu.

J'aimerais une certaine particularité visuelle pour les mots de la barre de menu et du titre, à savoir qu'ils soient affichés dans une certaine couleur, mais translucide pour continuer à voir les images des sliders qui défilent en-dessous.

Une image valant mieux qu'un discours, j'attache une photo de l'effet que je souhaite obtenir à mon message. La couleur rose du mot "TEST" laisse voir l'image tout en gardant sa vivacité.

J'ai obtenu cet effet dans photoshop, on sélectionnant l'option "Produit" dans les commandes "Calque" en bas à droite. Mais il est impossible à reproduire tel quel dans la construction d'une page internet.
Il y aurait la solution de jouer avec l'opacité mais elle ne me convainc pas vraiment.

Donc à votre à votre avis, comment mon webmaster pourrait s'y prendre pour reproduire cet effet de couleur translucide?

Je remercie d'avance toutes les personnes qui auront un bout de solution!
Modifié par Pas-de-pseudo-merci (19 Sep 2020 - 23:57)

Et l'eau,

@jean-pierre : nop

@pas-de-pseudo: https://codepen.io/niuxe/pen/poyxBLd

lien annexe :
mix-blend-mode

Bonsoir et merci pour vos réponses!

@Jean-Pierre-Bruneau: la solution que vous proposez est justement un travail sur l'opacité. Ca apporte certes de la transparence, mais ça estompe aussi la couleur malheureusement, ça la "voile".

@niuxe: Bingo, c'est ça! Je transmets à mon webmaster. Merci, merci, merci!

PS: je souhaite faire cet effet avec une seule couleur. Pensez-vous qu'il sera pris en charge par tous les navigateurs ? (bon à part IE)
De plus, je crois comprendre que nous obtenons un format image et non texte. Pensez-vous qu'il se prête bien aux logiciels de compression d'image?
Modifié par Pas-de-pseudo-merci (21 Sep 2020 - 01:29)

@jean-pierre: c'est le but de venir ici pour apprendre des techniques

@pas-de-pseudo :

pas-de-pseudo a écrit :

je souhaite faire cet effet avec une seule couleur. Pensez-vous qu'il sera pris en charge par tous les navigateurs ? (bon à part IE)

C'est le cas. J'ai utilisé un magenta basique et appliqué un filtre. (voir ma solution)

pas-de-pseudo a écrit :

De plus, je crois comprendre que nous obtenons un format image et non texte. Pensez-vous qu'il se prête bien aux logiciels de compression d'image?

Sur l'image, j'ai placé du texte html. Sinon, je ne comprends pas bien la question.

Dans l'exemple, il faut sélectionner "un super titre", c'est le texte qui a été ajouté. Si tu essaies de sélectionner "TEST", ça ne fonctionne pas car c'était l'exemple initial…
A part ça, très bonne compatibilité de mix-blend-mode

@niuxe: c'est pas grave, vous avez répondu à l'essentiel.
Il me reste à trouver la bonne option de mix-blend-mode qui gardera à la couleur toute sa luminosité, même sur un arrière-fond sombre.

Merci.

Merci de ne pas répondre à ce message, c'est pour une utilisation personnelle.

Utilisation personnelle. Dernier message, promis!