Une solution pour la transparence des bloc en CSS2

Bonjour,

Il y a quelques temps, je suis tombée sur un tutorial d'un site de développeurs web qui proposait de résoudre la question de la transparence des blocs en CSS2.
Comme cela a déjà été soulevé ici même, le problème est le suivant : lorsqu'on applique la fonction de transparence à un bloc, en CSS2, le bloc et TOUT SON CONTENU sont transparents, y compris le texte, etc...

Je précise tout de suite que ce que propose le tutorial ne fonctionne pas...

La méthode proposée était la suivante :
l'HTML :

<div id="transparent">
<p>Contenu du bloc</p>
</div>

le CSS (il n'y a que les infos sur la transparence, il faut y ajouter le positionnement, bien sûr) :

#transparent {
	background-color:#FFFFFF;
	filter:alpha(opacity=40);/* IE*/	
	-moz-opacity:.40;/* Mozilla*/	
	opacity:.40; /*générale*/
	}
#transparent p {
	filter:alpha(opacity=100);/* IE*/	
	-moz-opacity:1;/* Mozilla*/	
	opacity:1;/*générale*/
	}

Mais... CA NE MARCHE PAS ! Et comme cela m'a été confirmé sur Alsacréations dans plusieurs discussions, lorsqu'un bloc est transparent, tout son contenu est transparent, en tous cas en CSS2.
Voici donc une petite méthode pour pallier à ça. Je m'empresse de préciser qu'elle comporte des inconvénients :
1. je ne suis pas sûre qu'elle soit très orthodoxe. Les connaisseurs parmi vous pourront sans doute me le dire...
2. le bloc créé a forcément une taille fixe. Oui, c'est une sacrée contrainte, mais enfin, bon, c'est mieux que rien...

Voici le principe : on crée un bloc contenant simple, sans couleur de fond, sans transparence, par exemple :

#contenant {
	width:450px;
	height:200px;
	margin: 0px;
	padding:0px;
	border:1px solid #FFFFFF;
	position:relative;
	}

Ce bloc contient un paragraphe qu'on peut aussi définir dans la feuille de style

#contenant p  {
	width:440px;
	padding:0px;
	margin:0px;
	height:175px;
	text-align:justify;
	font-weight:normal;
	color:#005EC5;
	font-size:11px;
	position:relative;
	}

Jusque là, tout est normal...
L'idée ensuite est de créer un bloc vide, de la taille du contenant, AU-DESSOUS du paragraphe, et qui aura des propriétés de transparence.
HTML :

<div id="contenant">
   <div id="transparent"></div>
   <p>Ici le contenu du bloc</p>
<div>

Et dans le CSS (c'est là que les puristes risquent de me tomber dessus...) :

#contenant {
	width:450px;
	height:200px;
	margin: 0px;
	padding:0px;
	border:1px solid #FFFFFF;
	position:relative;
	}
#contenant p  {
	width:440px;
	padding:0px;
	margin:0px;
	height:175px;
	text-align:justify;
	font-weight:normal;
	color:#005EC5;
	font-size:11px;
	position:relative;
	z-index:1;
	}
#transparent {
	background-color:#FFFFFF;
	filter:alpha(opacity=40);/* IE*/	
	-moz-opacity:.40;/* Mozilla*/	
	opacity:.40; /*générale*/
	width:450px;
	height:200px;
	position:absolute;
	z-index:0;
	}

Voila. Ca marche. Mais c'est peut-être un peu cavalier...
Qu'en pensez-vous ?

Basille
Modifié par Basille (15 Oct 2007 - 15:36)

Un png transparent reste pour moi la solution la plus simple et la plus propre. Et tant pis pour IE6, puisque ces effets sont rarement indispensables.

Et comment font les scripts type LightBox ou GreyBox ?

CyrilK a écrit :
Et comment font les scripts type LightBox ou GreyBox ?

Pour Lightbox: avec une image en PNG transparent, un hack CSS pour cibler IE6 (un commentaire conditionnel sera préféré), et AlphaImageLoader:

* html #overlay{
	background-color: #000;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
	}

Au passage, ce sujet n'a pas grand chose à faire dans le forum HTML, donc direction le forum CSS.
Modifié par Florent V. (16 Oct 2007 - 14:49)

Désolée d'avoir mis le sujet au mauvais endroit... Merci de l'avoir remis à sa place.

Pour ce qui concerne les PNG, je ne suis évidemment pas partisane de IE non plus, et je serais ravie de ne pas avoir à prendre en compte ce navigateur. Mais 70% des internautes au bas mot l'utilisent en France (IE6 peut-être un peu moins, depuis que le 7 est sorti, mais enfin, bon...).
Il me semble impossible de ne pas les prendre en compte. L'important est de veiller à ce que les sites soient compatibles dans tous les navigateurs, pour que les petits autres puissent eux aussi se faire entendre, mais faire comme si IE n'existait pas... Bof.

Euh, c'est quoi Lightbox et Greybox ? Quelqu'un peut-il m'en dire plus ?

Ceci étant, il y a d'autres méthodes pour simuler la transparence graphique... en utilisant que des images opaques, mais celle des calques dont je parle plus haut me semble quand même intéressante.

Qu'en pensent les puristes du code ? une <div> vide, ça se fait ?

Merci pour vos réponses

Basille
Modifié par Basille (17 Oct 2007 - 09:30)

Basille a écrit :
L'important est de veiller à ce que les sites soient compatibles dans tous les navigateurs, pour que les petits autres puissent eux aussi se faire entendre, mais faire comme si IE n'existait pas... Bof.

Certes. Mais il y a des cas où une fonctionnalité n'est pas indispensable ni même réellement importante, et dans ce cas gérer une dégradation acceptable dans les navigateurs plus anciens (essentiellement IE6) peut être un choix intéressant.
La «compatibilité» ne signifie pas obtenir exactement la même chose sur tous les navigateurs quelle que soit leur génération.

Basille a écrit :
Euh, c'est quoi Lightbox et Greybox ? Quelqu'un peut-il m'en dire plus ?

Google peut t'en dire plus.

Basille a écrit :
Qu'en pensent les puristes du code ? une <div> vide, ça se fait ?

Une div vide pour résoudre un problème de mise en page est généralement un compromis intéressant permettant de gagner du temps sans forcément nuire à la qualité du site (notamment à l'accessibilité). Donc oui, ça se fait.