"Transparence" au clique

**karottes** · 13/10/2012, 00h47

Salut,
j'ai besoin de faire une div dont les deux bords (haut et bas) sont recouverts par un dégradé (image) et souhaiterais que le clique puisse "passer à travers" ces images. Que l'on puisse scroller (molette) ou sélectionner du texte se trouvant en dessous de ces images sans pour autant perdre cette effet de transparence.
Je poste ça dans la rubrique CSS mais au final je ne suis même pas certain qu'en JS ce soit pas plus faisable.
Merci d'avance pour vos réponse.

**Muchos** · 13/10/2012, 02h26

D'une part, on peut réaliser des dégradés sans images avec css3. Cependant, même avec des dégradés en images, le contenu html sera toujours sélectionnable si ce sont des background en css. Dans ce cas, le contenu html sera placé au-dessus des dégradés. Il faudra peut-être jouer avec la propriété z-index.

D'autre part, le positionnement des dégradés en background autorisera le scroll sans les faire bouger (comme s'ils étaient en position fixed).

**karottes** · 14/10/2012, 13h18

En utilisant la propriété z-index justement, mon image se retrouve au dessus de la barre de scroll (je veux qu'elle apparaisse en dessous du dégradé). Et j'aimerais aussi qu'elle reste néanmoins utilisable même sur la zone de l'image.
Un background ne me convient pas, la barre de scroll n'est pas affectée par le dégradé.

**Muchos** · 14/10/2012, 13h30

Mets-nous ton code svp. Parce qu'a priori, tu as des images et des dégradés (et non juste des dégradés).

la barre de scroll n'est pas affectée par le dégradé.

Je crois que le barre de scroll ne sera pas utilisable s'il y a un masque posé dessus.

**karottes** · 14/10/2012, 13h59

D'où ma question, est-ce que ce masque peut être insensible au clique, qu'il passe à travers ?
Voici le code (j'aurais pu le mettre dès le début d'ailleurs, désolé) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="content">
<span class="deg" id="degHaut"></span>
<p>Le contenu de ma boxscrollable verticalement.</p>
<span class="deg" id="degBas"></span>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
#content{
	overflow: auto;
	padding: 5px 15px;
	position: absolute; left: 30px; top: 130px;
	right: 30px; bottom: 25px;
	border-radius: 10px;
	box-shadow: 0 0 5px #fff, 0 0 10px #fff;
	background: rgba(255, 255, 255, 0.5);
}
 
.deg{
	position: absolute; height: 70px;
	border-radius: 10px;
	z-index: 1;
}
 
#degHaut{
	right: 30px; top: 130px; left: 30px;
	background: url("../img/fonduh.png") repeat-x;
	border-top-right-radius: 0;
}
 
#degBas{
	right: 30px; bottom: 25px; left: 30px;
	background: url("../img/fondub.png") repeat-x;
	border-bottom-right-radius: 0;
}

**Muchos** · 14/10/2012, 14h17

Ça ne fonctionnera sans doute pas en css :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Un masque sur une scroll bar</title>
	<style type="text/css">
body {margin: 0;}
#scroll {
z-index: 10;
width: 80px;
height: 80px;
white-space: pre-line;
overflow: scroll;
}
#masque {
z-index: 20;
width: 80px;
height: 80px;
position: absolute;
top: 0;
background-color: red;
opacity: 0.5;
}
        </style>
</head>
<body>
	<div id="scroll">
		lol	lol
		lol	lol
		lol	lol
		lol	lol
	</div>
	<div id="masque"></div>
</body>
</html>

Pour Opera et IE, il semble qu'il existe des propriétés de transformation de la scroll bar.

**karottes** · 16/10/2012, 19h57

Désolé mais si peu de compatibilité ne me convient pas. Néanmoins merci pour ta réponse. N'étant pas possible de faire ce que je veux en CSS "simple", j'ai fais appel à JavaScript, pour recréer totalement cette barre de scroll et peut donc la modifier à souhait grâce à un CSS spécifique.
J'ai donc pu attribuer un z-index à certains des éléments de ma scrollbar ce qui donne un très bon résultat (de plus, travailler sur le scrolling devient plus facile par la suite en utilisant JS).

"Transparence" au clique

CSS

Partager

Partager