28172 sujets

CSS et mise en forme, CSS3

Div ombrée

bonjour à tous

j'aimerai pourvoir creer un effet d'ombre à une div sans qu'il y ait trop de classe
en faite j'ai dejà ça : 

<html>
<head>
<style>
body 
{
	margin: 0;
	padding: 32px;
	font-family: Arial, sans;
	font-size: 90%;
}
 
/* Box style */
.box    {  }
.offset { position: relative; left:-1px; top:-1px; }
.color1 { background: #F0F0F0; }
.color2 { background: #DBDBDB;}
.color3 { background: #B8B8B8; }
.inner  {	
	background: #FFFFFF; 
	border: 1px solid #CCC;
	padding:8px;
	margin: 0; 
}
/* End of box */ 
 
 
 
</style>

</head>
<body>

<div class="box" style="width:400px">
    <div class="offset color1" >
        <div class="offset color2">
            <div class="offset color3">
                <div class="offset inner">
                        Message
                </div>
            </div>
        </div>
    </div>
</div>

</body>


mais mon client aurait preferé avoir qu'une seule div qui fasse l'ombre

il me faudrait donc 2 div : 1 qui me fait l'ombre et l'autre pour le contenu


quelqu'un aurait il une idée? est ce vraiment faisable?

merci Smiley cligne
bonsoir ,

avec une image en fond dans le second div ..et un div:after eventuellement pour la partie base si vraiment il te faut plusieurs conteneur parceque cette "boite" est fluide .

Si la boite est de taille fixe , l'image en fond devrait convenir.

sinon box-shadow sur un seul div
pour le moment : pour ff 3.5 , safari/chrome
il y a par exemple :

#mondiv{
box-shadow: XXpx XXpx XXpx #couleur; /* CSS 3 */
-moz-box-shadow: XXpx XXpx XXpx #couleur ; /* ff*/
-webkit-box-shadow:: XXpx XXpx XXpx #couleur ;/* safari/chrome , */
}


Si c'est pour un seul div ou trés peu , pas besoin necessairement de charger une image(fichier) supplementaire , les div imbriqués peuvent etre acceptables .

tu as a dispo :
background , border et outline ,
ceux la te permettent deja (sauf IE ...) d'exploité jusqu'a trois couleurs .

GC
Sujet clos
Aller à