bordure avec ombre a droite et a gauche fluide

**php34000** · 12/03/2010, 22h46

Bonjour

je suis complètement perdu

je souhaite faire un site avec mise en page css et abandonner mes tableaux

sauf que je bloque sur un problème comment faire des bords de page avec des ombres.

J'ai trouvé des solution du style mettre un background avec center et repeat

du style :

Code :

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

1
2
3
4
5
body {
  background-image: url('/fond_degrade.gif');
  background-repeat: repeat-y;
  background-position: top center;
}

c'est facile rapide mais cela impose de définir d'avance la largeur de la page puisque le background doit faire pile poil la taille de la page.

Si on change la largeur de la page faut redimensionner le background.

Est ce que vous avez une solution pour appliquer a un block un background à droite et un a gauche ?

je suppose qu'il faut multiplier les <div>

Mais je sais pas ou les mettre n'y comment les paramétrer ni comment les mettre...

Code html :

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

1
2
3
4
5
<body>
<div id="backgroundgauche></div>
<div id="page>hfirfbbeirgb</div>
<div id="backgrounddroite></div>
</body>

?????????????????

**Erwan31** · 13/03/2010, 15h11

Fais ça les propriétés CSS3 (via les préfixes propriétaires)

Code :

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

1
2
3
4
5
6
7
.shadow {
	box-shadow: 0 0 4px #444; /* Opera 10.5, IE 9.0 */
	-moz-box-shadow: 0 0 4px #444; /* FF3.5+ */
	-webkit-box-shadow: 0 0 4px #444; /* Saf3.0+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#444'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#444')"; /* IE8 */
}

Je te conseil de placer le code spécifique à IE dans une (pour IE8 et versions antérieures) CSS pour IE appelée avec les commentaire conditionnels.

bordure avec ombre a droite et a gauche fluide

Ombre portée en CSS avec box-shadow

Vue hybride

Discussions similaires

Partager

Partager