28173 sujets

CSS et mise en forme, CSS3

Une ombre portée derriére mon site

Bonjour,

C'est un truc trés mystérieux, j'ai cherché toute la soirée et il n'y a pas eu de réponses apparentes et pourtant je vois presque partout sur les autres sites le graphisme que je veux obtenir.

Voilà je veux créer une ombre portée comme sur ce site par exemple :
http://www.neojoomla.com/

Mais je capte rien, apparement il y a de la manip photoshop + de la manip css. Mais j'ai vu 0 tuto pour expliquer cela. Moi ce serait pour que l'ombre s'adapte à une interface extensible en longueur.

Mais même sur ce bon site de alsacréation, on ne propose pas un tuto.

Alors voilà si vous avez vous même concu ce genre d'interface merci de m'orienter vers les sites qui vont ont aidés.

Merci à vous.
Modérateur
Salut,

C'est simple à faire. Tu prends un bloc et tu lui mets une images une image de fond que tu vas répéter sur la vertical. À l'intérieur de ce bloc, tu mets un chapeau avec ses baskets aux pieds (pour pas qu'il n'attrappe froid, il faut le couvrir Smiley lol ) pas de répétition sur le background, centré vers le haut ou le bas.

exemple :


<body>
 <div id="conteneur">
  <div id="chapeau">
   <h1>tete nue</h1>
  </div>
    <p>Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.</p>
    <p>Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.</p>
    <p>Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.</p>
   <div id="basket">
    <h1>pied nu</h1>
   </div>
 </div>
</body>




#conteneur {
 background-image: url(ton_image_de_fond.gif);
 background-repeat: repeat-y 
}
#chapeau  {
 background-image: url(ton_chapeau.gif);
 background-repeat: no-repeat;
 background-position: center top 
}
#basket  {
 background-image: url(tes_baskets.gif);
 background-repeat: no-repeat;
 background-position: center bottom 
}


Si besoin tu mets un padding bas et haut au conteneur si tu veux faire des coins arrondis.

++
jive7 a écrit :
Moi ce serait pour que l'ombre s'adapte à une interface extensible en longueur.

Laquelle de de longueur ? La hauteur ou la largeur ? Smiley cligne

Pour l'extensibilité en hauteur, c'est très simple (voir la solution de Nolem). Pour l'extensibilité en largeur (design fluide), c'est plus compliqué.


Au passage, une piste à adapter :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
(Voir vers la fin, « Variantes ».)
Modifié par Florent V. (18 May 2007 - 10:19)
Modérateur
Florent V. a écrit :

Pour l'extensibilité en largeur (design fluide), c'est plus compliqué.

Je n'ai pas regardé ton lien, mais je pense une mise en page sur trois colonnes, n'est ce pas ? (un truc du style ou un style de truc Smiley lol )

Par contre, le code doit être un peu lourd Smiley sweatdrop

++
Modifié par Nolem (18 May 2007 - 10:59)
Mortel,

ca répond bien à ce que je cherche et dés que je sors du taf je vais tester tout ca. C'est bien en longueur que je veux pouvoir rendre cela étirable et le tuto de florent est bien propre. Je vais regarder le code nolem. Sinon, je pense avori ce qui faut pour coder et mettre mes pages, mais vous auriez pas le tuto photoshop qui va bien pour faire mes dégradé parce que mine de rien il s'agit surement pas de juste de faire un carré, lui mettre de la couleur, et lui dire ombre portée, et enregistrer ?! Smiley rolleyes
jive7 a écrit :
parce que mine de rien il s'agit surement pas de juste de faire un carré, lui mettre de la couleur, et lui dire ombre portée, et enregistrer ?! Smiley rolleyes

Ben... si, je crois bien.
Sujet clos
Aller à