Faire des bords ombrés

**StreetFighter** · 05/05/2014, 18h51

Bonjour,

J'ai besoin de votre aide pour faire un dégradé accompagné d'une ombre sur chaque côté de mon site sur le partie contenu seulement. Il faut savoir que le reste de mon site (footer, header, menu...) est compris sur toute la largeur.

Voilà ce que j'aimerais obtenir.
Nom : Bords.png
Affichages : 84
Taille : 4,4 Ko

Nom : Bords.png
Affichages : 84
Taille : 4,4 Ko

Pour l'instant ma partie contenu prend toute la largeur de mon site.
Si vous avez des idées ou techniques je suis preneur. En sachant que pour faire un dégradé il n'y a pas de soucis mais c'est pour le placé aux deux extrémité de ma page que ça me pose problème.

Merci d'avance.

**rodolphebrd** · 05/05/2014, 19h13

Bonjour,

définir les valeurs de box-shadow comme cet exemple : box-shadow: 10px 0px 4px -4px #ccc, -10px 0px 4px -4px #ccc;}

**StreetFighter** · 06/05/2014, 16h44

Alors j'ai tenté avec des bordures sauf que sur les bordures (border-left et border-right), impossible d'appliquer un dégradé. Pour l'instant j'ai une balise qui contient toute la partie de mon contenu en position relative avec aucun autre style appliqué. Je bloque.

**Egaro555** · 06/05/2014, 19h39

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
<html>
  <head>
    <style>
body{
  margin: 0px;
  padding: 0px;
}
div{
  width: 80%;
  height: 100%;
  margin: auto;
  box-shadow:
    0px 0px 5px 5px #ccc,
    inset 6px 0px 3px -5px #ccc,
    inset -6px 0px 3px -5px #ccc;
}
    </style>
  <body>
    <div></div>
  </body>
</html>

**CCyrillus** · 07/05/2014, 12h32

Bonjour,

perso, j'y vois un gradient et 1 ombrage :

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
html {
  background:linear-gradient(
  to bottom,
    lightgray,
    white
  );
}
body {
  background:white;
  width:80%;
  margin:0 auto;
  box-shadow:0 0 5px 2px #111;
  text-align:center;
  padding:0 1em;
}

avec en DEMO :

Code html :

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

1
2
3
<div>
  <img src="http://www.developpez.net/forums/attachment.php?attachmentid=144930" />
</div>

Faire des bords ombrés

CSS

Discussions similaires

Partager

Partager