Ombre sur body

**ffanny** · 26/10/2009, 15h04

Bonjour,

Est ce que quelqu'un sait comment faire une ombre sur le corps lui meme ?

Merci

**sebhm** · 26/10/2009, 16h57

Bonjour,

cela n'a pas de sens car body définit la page entiere. Tu ne peux rien mettre 'autour' de body (à part la marge), donc pas d'ombre.
Apres, on peut faire a peu pres tout ce qu'on veut avec le CSS, en ajoutant un DIV conteneur par exemple, un background ...

Explique ce que tu veux exactement, avec une image par exemple

**Macmillenium** · 26/10/2009, 17h31

Envoyé par sebhm

Tu ne peux rien mettre 'autour' de body (à part la marge),

Donc on peut presque tout mettre (exemple pour FF only) :

Code xhtml :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>Sans nom</title>
		<style type="text/css">
                        html, body { height:100% }
                        body {
                                border: 8px solid #000;
                                -moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
                                -moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
                                -moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
                                -moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
                                padding: 5px 5px 5px 15px;
                        }
                </style>
	</head>
 
	<body>
            bla
	</body>
</html>

Mais il est vrai que le passage par un bloc conteneur peut faciliter l'intégration

**ffanny** · 26/10/2009, 18h57

merci c'est parfait, c'est ce que je cherchais

**Macmillenium** · 26/10/2009, 19h04

Attention ce code fonctionne uniquement sur les navigateurs basés sur Gecko, d'où le préfixe moz.
Il faudrait utiliser des images en background (plus complexe à mettre en place)

**CCyrillus** · 27/10/2009, 00h20

bonsoir,

pour une bordure discrete et a l'aide d'un conteneur principal , il est possible d'obtenir un résultat simple.

le principe:
-une couleur de fond a html.
-padding sur html ou margin sur body .
-une couleur de fond a body , une bordure plus clair et un padding .
- une bordure et une couleur de fond sur l'element principal
- repositioner l'element principal a l'aide de la marge negative ou du positionement relatif

Voici une demo sur ce principe :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>ombre sur corps</title>
	<style type='text/css'>
		html {
			margin:1em;
			background:#eee;
		}
		body {
			border:2px #ccc solid;
			border-top:0;
			border-left:0;
			background:#aaa;
			padding: 2px 2px 2px 0;
		}
		div {
			outline:1px solid  #888; /* facultatif */
			border:1px solid #777; 
			margin:-6px 0 0 -4px;
			background:white;
			padding:1em;
		}
	</style>
</head>
<body>
	<div>
		<p><em>Cet élèment fait office de conteneur Principal ... </em></p>
		<h1>Ombres simples et discretes </h1>
		<p>Dessiner par <samp>body</samp> et ce conteneur et mis en valeur par un <samp>padding</samp> sur <samp>html</samp>.</p>
	</div>
</body>
</html>

Cyrille

GC

Ombre sur body

Ombre portée en CSS avec box-shadow

Vue hybride

Discussions similaires

Partager

Partager