Effet d'ombres...

Voilà j'en ai eu marre d'essayer de positionner mes images alors j'ai essayé de tricher un peu....

Mon exemple : www.prometee-creation.com(Le design n'est plus en relation avec le sujet)

Donc pour faire les effets d'ombres j'ai tout simplement encadré ma div principal avec 3 autre div auxquelles j'ai appliqué une bordure de 1px avec une couleur qui s'estompe vers le blanc dans chaqu'une d'elles

<div style="border-right: #adadad 1px solid;border-bottom: #adadad 1px solid;">
<div style="border-right: #7f7f7f 1px solid;border-bottom: #7f7f7f 1px solid;">
<div style="border-right: #4d4d4d 1px solid;border-bottom: #4d4d4d 1px solid;">
	<div style="border-left: 1px #CCC solid;border-top: 1px #CCC solid;">
		Blabla<br />
		Blabla<br />
		Blabla<br />
		Blabla<br />
	</div>
</div>

ça peux être une alternative aux images et ça s'adapte au contenu ...

M'enfin ça vaut pas une vrai ombre...

Qu'es ce que vous en pensez...?
Modifié par prometee (13 Jan 2008 - 13:07)

Bonsoir,

a écrit :
Voilà j'en ai eu marre d'essayer de positionner mes images alors j'ai essayé de tricher un peu....

Ben je pense que tu devrais perserver dans cette voie plutôt que de choisir une solution que je trouve un peu tordue et qui peut de relentir lègèrement l'apparition de ta page.
Pour l'ombre de droite par exemple, crée un div a l'interieur de son parent
qui doit avoir la position retative pour servir de réference de positionnement comme suit:

droite {
position:absolute;
right:0;
width:3px;
height:100%; /*pour que ton ombre s'adapte a la hauteur de ton div parent*/
background: url (...) repeat-y;
}

Pour le height:100% voir http://forum.alsacreations.com/faq/#item57
Est ce clair?
Modifié par Hermann (10 Jun 2006 - 20:31)

C'est l'element qui me fesais default savoir ou plasser la div et comment lui dire de s'adapter au contenu ...

Je vais essayer... Merci...

L'inconvenient c'est que ça marche pas cette solution, je pense que c'est à cause du faite que j'ai un container et plusieurs div à l'interieur qui sont imbriqué et positionnées dedans...

Pourtant, à partir du moment où on a un bloc avec une largeur fixe, ça devient très facile de faire une bordure en images. Par exemple comme ceci :

http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

Bon ça ça marche, maintenant faudrais que ça s'adapte à n'importe qu'elle contenu. Enfin un contenu qui aurais un taille fixe en longueur.

Donc si j'ai bien compris il faut que j'essaye de combiner vos deux exemples...


Je vais decortioqué ta premiere page mpop et je verais bien ce que je peux en tirer...

Merci
Modifié par prometee (11 Jun 2006 - 14:57)

Bon be ça marche niquel j'ai jouer avec des produit en croix afin que quelque soit la largueur et hauteur du contenu que l'on veux encadrer que ça s'adapte ... Donc be ça marche manque plus qu'à refaire mes gif en transparent...
Pour la technique j'ai donc :
5 div qui se suivent 5 images (haut droite, gauche, bas droite, bas et bas gauche)
ça s'assemble parfaitement aprés faudra voir avec differents navigateurs

le resultat


Merci beaucoup pour m'avoir mis sur la voix...

Raaaaaa y a toujours IE qui veux pas faire comme tout les autres.... aprés une div il met toujours un espace de 2px par div ... Es ce qu'il y a moyen de supprimer cette espace ?

bonjour,

IE ne t'ajoute pas de marge supplementaire mais donne une taille minimale de 1em de hauteur a tes elements, ajoute un overflow:hidden; a #contenu1, #contenu2, #contenu3 et #contenu4 . et cela devrait te permettre de fixer la hauteur a 10 px et pas environ 15px sur ta page dans IE.

sinon, un exemple de "divite" avec de 1 a autant de div imbriqués les uns dans les autres que l'on veut: (pour reprendre ton idée premiere).
ombres sans images

cette façon de faire me convient,en usant d'une bordure et d'une couleur de fond il ya possibilité a partir de 2 element imbriqué de jouer sur 3 couleurs/tons.
une bordure sur le conteneur avec un padding pour une seconde couleur sur le fond et a nouveau une bordure au contenu.
chaque nouveau conteneur permet d'inclure 2 nouveaux tons.
... mais a tendance a pourrir le code de la page quand il y a beaucoup d'image ou boites a "ombrée", ceci dit , idem pour l'usage des images.


++

J'ai un petit peu épuré mon code dans mon CSS y avais plein de truc que j'avais laissé, car celà fais longtemps que je l'avais fait..

Malheureusement je n'arrive toujours pas à régler ce problême de marge supérieur sur IE, j'ai essayé tout ce que vous m'avais préconisé, mais rien ne marche... Je doit m'y prendre trés mal...

Bref de toute façon je vais refaire tout le design de mon site, comme ça au moins je pourrais peux être réussir à faire quelquechose de jolie...

Merci à tous...