upload/1600552613-81121-test.jpg Bonjour,

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

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)
Un peut ce genre ?

<html lang='fr'>     
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<title>Model type jplyne </title>
<meta name="keywords" content="Model type jplyne" />
<meta name="description" content="Model type jplyne" />

<style>
body { 	margin:0;border:0;
    background:url(http://les-astuces-du-web.com/logos/illustration005.jpg) no-repeat;
    background-size:cover;
}
div.titre {
    height:auto;width:auto;max-width:900px;margin:auto;text-align:center;
    font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 90px;color: rgba(255, 50, 50, 0.7);
}
</style> 
</head>
<body>
<div class="titre"><br /><br /><b>UN TEST POUR VOIR</b></div>
</body></html>

ou essais de changer les paramètres ici
https://codepen.io/jplyne/pen/dyMgwYw
Sur ce codepen, j'ais testé deux divs avec le même fond mais bof !!
Modifié par Jean-Pierre-Bruneau (20 Sep 2020 - 03:48)
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)
niuxe a écrit :

Et l'eau,
@jean-pierre : nop Smiley cligne
@pas-de-pseudo: https://codepen.io/niuxe/pen/poyxBLd


BRAVO L'Ami, je suis bluffé Smiley confused
Et le pire, je ne connaissait même pas ta solution ! Trop Cool Smiley cligne

modération: j'ai remis en forme ton message et je n'ai strictement pas touché au contenu. Tu avais oublié de fermer le bbcode "quote"
Modifié par niuxe (21 Sep 2020 - 09:34)
Modérateur
@jean-pierre: c'est le but de venir ici pour apprendre des techniques Smiley smile

@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.

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.

Il dit et moi aussi que tu crée une image avec ton texte sur image, donc par exemple ,(et c'est bien dommage) on ne peut plus faire un copié/collé du texte Smiley confused
Modifié par Jean-Pierre-Bruneau (21 Sep 2020 - 12:46)
@niuxe: c'est pas grave, vous avez répondu à l'essentiel. Smiley cligne
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.