Discussion :

[lavazavio]

Salut à tous,

Ma question est toute simple :
Comment faire des bordures de cadre comme celles de ce site (par exemple) avec l'effet ombragé ou dégradé, je ne sais pas trop ? et aussi est-ce faisable en html/css ou faut-il utiliser un autre langage ?

Merci beaucoup !

Tcho

[Bovino]

C'est une image en dégradé mise en background.

[GihefBey]

Bonjour,

C'est un truc assez courant.

Ils utilisent un bloc (id_wrapper) pour englober le contenu du site et lui appliquent en background une image un peu plus large.

Tu peux vérifier ça dans une de leurs feuilles de styles :

Code css :

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

1
2
3
4
5
6
7
 
.id_wrapper {
  width: 893px;
  padding: 15px;
  background-image: url(/images/site/shadow_bg.gif);
  background-repeat: repeat-y; 
  }

-

[lavazavio]

Merci pour ces réponses.

Cela veut dire que ce type de cadre n'est faisable qu'avec un cadre de taille fixe et non pas défini en pourcentage de la taille de l'écran ?

[Bisûnûrs]

Bien sûr que si, mais ce n'est pas faisable avec une seule image de la largeur de ton site.
On entre dans une structure un peu plus complexe.

[lavazavio]

Comme quoi par exemple ?

[GihefBey]

Comme > ça ?

-

[c_s_s]

Bonjour,

Si ton site a une largeur variable, tu peux imbriquer deux "wrapper" l'un dans l'autre. Un pour l'ombre à gauche, et l'autre pour l'ombre à droite.

Code css :

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

1
2
3
4
5
6
7
8
.left_wrapper {  
  padding-left: 15px;
  background:url(/images/site/shadow_bg.gif) repeat-y left top;  
}
.right_wrapper {  
  padding-right: 15px;
  background:url(/images/site/shadow_bg.gif) repeat-y right top;  
}

Code html :

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

1
2
3
4
5
<div id="left_wrapper">
	<div id="right_wrapper">
		Ton site
	</div>
</div>

[lavazavio]

Super !

Merci a tous pour ces explications !!!

A bientot.