Ombre portée ?

Bonjour !


Je débute en css et me suis fixer un petit objectif de réalisation d'un site simple en xhtml/php/mySql ... je fais des essais là et je ne comprends pas bien comment réussir à faire un cadre style ombre-portée comme ça.
j'ai quelques idées en route mais je demande s'il n'y a pas une fonction que j'ignore étant donné que je n'ai pas de dico...

à tout hasard, je suis à la recherche de tutos, notamment un pour réaliser un menu déroulerant et un second qui me permmetrait de faire quelque chose comme ça : ça à droite, les truc qui se developpe... je crois que cela s'appeller "overflow" ????

Merci d'avance !


ps; je ne cherche pas de soulution toutes faites, des guides ou des pistes me suffisent puisque je cherche à apprendre !

Pour le cadre ombre-portée, si tu parles bien de la zone blanche avec l'ombre dedans, c'est tout simplement une image répétée sur l'axe y. L'image étant juste le petit dégradé nécessaire à faire l'ombre

Bonsoir,
Concernant le dégradé comme l'explique FlorentG, tu dois mettre
une image en backgroung au niveau du div blanc
avec un truc dans le genre

div {
Background: url(...) right repeat-y;
}

Pour l'overflow je ne vois pas à quoi tu veux faire référence puisqu'il
n'y a pas de div avec scrollbar présent dans le liens que tu laisses.
Modifié par Hermann (11 Oct 2006 - 19:15)

merci beaucoup de vos réponses, je rattaque ce matin, et vois un peu ce qu'il reste à faire !

Pour l'exemple, je t'assure sur la gauche, clique par exemple sur "business interactif " dans expériences... le cadre se développe, en regardant le code, et je ne suis pas un pro, je vois un truc en rapport avec "l'overflow" (???) ...

Pas de tutos sur un menu déroulant css ...?


merci beaucoup à vous ... je sens que je vais m'investir dans ce forum. Je m'y sens bien !

j'ai un bug, je ne vois rien, aucune ombre portée ...

 /*css*/
#corps
{
margin-left: 40px;
margin-top:60px;
padding: 5px; 
background-color: white ;
/*border: 0.2px solid black;*/
height:3000px;
font-family: Verdana, Georgia, "Arial Black", "Times New Roman",Times, serif;

/*ombre */
background-image: url("img_design/ombre_dr.gif") repeat-y right;

}

/*--------------------*/
/* html */

<div id="corps">
           <h1>1.ouahou </h1>
       
           <p>
               Super !<br />
               bienvenue bienvenue bienvenue bienvenue bienvenue bienvenue bienvenue 
           </p>
       
           <h2>2.ouahou ?</h2>   
           <p>
               blahblahblahblahblahblahblahblahblahblahblahblahblahblah
           </p>
           
           <h2>3.ooahouuuu</h2>   
           <p>
              blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahbla
           </p>
       </div>

Est ce quelqu'un a un conseil .... ??? merci d'avance ! pour les tutos menu css , c'est bon !

T'as mis trop de trucs dans background-image qui ne devrait contenir que l'image.

Regroupe le background-color et image :

background: white url("img_design/ombre_dr.gif") repeat-y top right;

ouah génial je te remercie beaucoup !!!! ça marche ...effectivement, j'en demandais peut-être un peu trop ...

dernière question, comment puis encadrer mon bloc ...? je ne peux bien évidemment pas faire 4 background de suite ....et là je ne vois pas ... y'a t il une instruction partculière ?

merci !

Hihi Bienvenue dans la galère du développeur CSS... Moi pour tout styler et faire des ombres dans tous les côtés et coins, j'ai fait un machin monstre en javascript. Sinon en mettant plein de div. Ou en utilisant l'une des 255.3 techniques trouvables sur le web

Doit y avoir un sujet là-dessus dans les tutos d'alsa
Modifié par FlorentG (12 Oct 2006 - 14:16)

argh !

Et bien, merci.... je vais m'y jeter alors ....en tout cas merci de ton aide c'est très simpa de ta part !

c'est parti pour la fouille !!!!!!!!!!!!!!!!


++
ths

Sinon une balise toute simple pour mettre une ombre sur un bloc :

border-style: inset; //effet 3D "enfoncé"
border-style: outset; //effet 3D surélevé
border-style: ridge; //autre effet 3D