28172 sujets

CSS et mise en forme, CSS3

Bonjour.

Dans les messages d'un forum, les images postées sont ombrées grâce au CSS de manière esthétique. Soucis : lorsque des images GIF ou PNG avec transparence sont postées, l'ombrage est également appliqué et là c'est très inesthétique.
Je cherche donc à créer deux blocs CSS distincts où les ombres s'afficheraient quand l'image serait au format JPG (style actuel) et un second où elles seraient sur "none" quand il s'agirait d'une image GIF ou PNG.

Merci.
Bonjour,

Voir du côté des sélecteurs d'attributs
Tu peux peut-être cibler tes images de cette façon :

img[src*="gif"] {propriétés; }
img[src*="jpg"]{propriétés; }
img[src*="png"] {propriétés; }

Il y a sans doute une meilleure façon de faire, et pour une rétrocompatibilité, il faudra sans doute se tourner vers autre chose...
De quelle manière "ombres-tu" tes images ?
Dans le style Prosilver, comme ceci :

.postbody .content img {
	-moz-box-shadow: 2px 2px 4px #666666;
	-webkit-box-shadow: 2px 2px 4px #666666;
	box-shadow: 2px 2px 4px #666666;
}

Et j'ajoute ceci pour que les smileys intégrés ne soient pas ombrés :

.postbody .content img[src*="/images/smilies/"] {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
}
Comme ceci j'obtiens le résultat escompté :

.postbody .content img[src $='.jpg'] {
	-moz-box-shadow: 2px 2px 4px #666666;
	-webkit-box-shadow: 2px 2px 4px #666666;
	box-shadow: 2px 2px 4px #666666;
}

.postbody .content img[src $='.gif'] {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.postbody .content img[src $='.png'] {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

Merci bien.