28172 sujets

CSS et mise en forme, CSS3

Transparence (firefox) et validation CSS comment faire??

Bonjour,

Existe-t-il une propieté Css(3??) valide W3c pour gérer la transparence sous firefox, en effet le préfixe -moz n'a pas l'air valide avec opacity.
Voilà le feed back du validateur :
Erreur lors de l'analyse grammaticale. opacity=50)
296 #fdun La propriété moz-opacity n'existe pas : 0.5
297 #fdun La propriété opacity n'existe pas en CSS niveau 2.1. mais existe en Smiley css3 : 0.5


Jeandalement.
Bonjour,
opacity (pour Safari 1.2+ et les dernières version d'Opera) fait partie des propriétés CSS3.
C'est à la validité syntaxique qu'il faut veiller et non à l'invalidité dû à la présence d'extensions CSS propriétaires
puisque celles-ci ne génèrent aucune erreur d'interprétation.

PS: tu ne postes pas dans le bon salon > topic déplacé Smiley cligne
Modifié par Hermann (12 Jun 2008 - 17:39)
Excellent merci bien ! Smiley smile
Pour infos, j'ai repassé ma css à la moulinette (uniquement avec opacity: 0.65; par exemple) ca valide well, seulement ça ne marche que si c'est une image de fond en png. Je m'explique.
Auparavant je codais : 
#toto 
{background-color:#000;
width:70px;
height:49px;
filter: alpha(opacity=65);
moz-opacity:0.65;
opacity:0.65;
}

ca fonctionnait bien mais ce n'était pas validé css3, du coup sur tes conseils j'ai viré "filter: alpha(opacity=65) et moz-opacity:0.65;" mais après mon background était à 100%. Donc 3eme étape je vire les background que je remplace par des images de fond.png (format 1/x ou 1/y suivant si le repeat et horizonyal ou vertical) et là ça marche bien (mais c'est moins bon pour la maintenance). Voilà, est-ce que ça te parais correct ou bien est-ce que je viens de perdre mon temps sous photoshop Smiley sweatdrop ?
Désolé pour ma bourde dans le choix du sujet tout à l'heure.

Cdt,
Hermann a écrit :
opacity (pour Safari 1.2+ et les dernières version d'Opera)

Firefox 2 et 3 comprennent très bien opacity. -moz-opacity (et pas moz-opacity!) ne sert plus à rien, et on peut l'oublier.
Modifié par Florent V. (12 Jun 2008 - 21:04)
jeanda a écrit :
Voilà, est-ce que ça te parais correct ou bien est-ce que je viens de perdre mon temps sous photoshop Smiley sweatdrop ?

Tu n'as pas perdu ton temps si le but était de faire un fond translucide, et pas un bloc translucide? La différence? Si tout le bloc est translucide, son contenu le sera également (texte, images, blocs enfants et descendants...). Si seul le fond est translucide... ben le contenu sera opaque.

Pour information, les fonds transparents peuvent également se faire avec des couleurs RVBA en CSS.
http://web.covertprestige.info/test/28-support-couleurs-rvba-css3.html
Mais supporté uniquement par Firefox 3 et Safari 3. Même Opera 9.5 (qui vient de sortir) ne les implémente pas, alors qu'Opera est plutôt à la pointe sur le support de CSS la plupart du temps.
Bonsoir,
ok message recu, forget -moz-opacity.
Le but était de faire un fond translucide, je donc suis rassuré. Tu as raison, l'héritage en Css est en atout indéniable, mais il peut parfois s'avérer délicat sourtout dans ce périmètre de la "transparence" des couches.
Je ne connaissais pas se système de gestion colorimétrique en RVBA, je vais regarder.
Merci
Jeanda
Bonjour.

Je suis tombé sur votre discussion aux détours de mes recherches.

Je cherche exactement à faire la meme chose que toi, Jeanda.
Est ce que tu pourrai mettre ton code et le html concernant l'image en fond d'écran ?
J'ai pas réussi à faire apparaitre mon image malgres vos différents posts....

Merci d'avance.

MaYou
Modifié par MaYou (13 Jun 2008 - 14:38)
Bonsoir

Alors tu peux faire ça :
page essai.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE>test<TITLE>
 <link rel="stylesheet" type="text/css" media="screen" href="Css/test_alsa.css" />
 <!--[if lte IE 6]>
<link href="Css/test_ie_alsa.css" rel="stylesheet" type="text/css" />
<![endif]-->
 </HEAD>
 <BODY>
  <div id="transparent_layer"></div>
 </BODY>
</HTML>

Dans ta Css test_alsa.css : 

body 
{
background-color:#0033ff;
}

#transparent_layer
{
position:absolute;
height:150px;
width:400px;
background: url(../Icons/alsa.png);
background-repeat:repeat;
}

Dans ta Css test_ie_alsa.css : 

#transparent_layer
{
background: 0;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='Icons/alsa.png', sizingMethod='scale');
border: 0;
}

la css test_ie_alsa.ccs permet à ie6 d'interpreter la transparence du png.
Ce png peut êter une image ou une couleur de fond de 1/1 que l'on étire il faut l'enregistrer par exemple sous photoshop au format png(24 pour une qualité optimale). ETt voila
Ici l'arborescence est la suivante :
Un dossier "titi" dans lequel il ya une page essai.html et également un dossier Icons (qui contient alsa.png) et un dossier Css qui contient les deux fichiers test_alsa.css et test_ie.css.
C'est une solution parmis d'autres, enfin, n'étant pas un fin pédagogue j'espère que ca va marcher pour la personne qui testera et que c'était clair.
Jeandalement
j'ai oublié de préciser que naturellement il fauit enregistrer l'image en ayant auparavant modifier la transparence du calque (travailler avec un arrière-plan transparent pour plus de commodités)
Bonsoir
jeanda a écrit :
page essai.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Avec un Doctype en bonne et due forme (avec URL de la DTD), ce serait bien mieux. Smiley cligne
Effectivement Smiley biggrin
C'est ce vieux Editplus qui met ça par défaut (c'est toujours la faute des autres...).
A propos je n'ai jamais compris clairement ce qu'il fallait mettre comme doctotype et en fonction de quoi en mettait tel ou tel paramètre dedans. là aurait-il fallut rajouter "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ?
Si vous connaissez un lien qui pointe sur un synthèse limpide je suis preneur.
Merci
A bientôt
Jeanda
Salut,
jeanda a écrit :
Si vous connaissez un lien qui pointe sur un synthèse limpide je suis preneur.
Pas besoin de chercher bien loin Smiley cligne :
dans les Tutoriels.
et l'outil Squelettor permet de générer une structure correcte.

A+
Merci beaucoup pour ton code.

J'ai plus qu'a adapté tout sa à ce que j'ai deja fait ^^

Merci encore et Bonne Journée/Soiree/Nuit ! Smiley lol
Sujet clos
Aller à