Placer une ombre sur un élément DIV, sans javascript

 

 

 

 

L'effet d'ombrage sur un élément (containeur) DIV, fait appel à l'essentiel des codes déja présentés page 70a2 concernat l'effet d'ombrage sur du texte.

Exemple réalisé en utilisant simplement des déclarations CSS avec le positionnement absolu, qui garantit sa mise en place, et sans faire appel à des javascripts. Il est naturellement utilisé des codes en ligne, c'est-à-dire placés dans le BODY ou encore avec code dans HEAD..

 

Exemple 1 avec ombrage couleur brun, et appel en ligne (en-tête du paragraphe)

<div style= "position:absolute ; top:257px ; left:127px ; width: 160px ; height: 100px ; background:#990000 ; "> </div>

<div style= "position:absolute ; top:250px ; left:120 ; width: 160px ; height: 100px ; background: #FF9966 ; font-size: 24pt ; color: blue ;">&nbsp;aidenet</div>

 

Exemple 2 avec ombrage couleur bleu foncé, et utilisation des classes. (ci-dessous)

 

 

 

 

 

Code dans HEAD

<STYLE TYPE='text/css'>

.dessus { position: absolute ; top: 775px ; left: 122px ; width: 260px ; height: 100p ; background: #66FFFF ; font-size: 10pt ; color: blue ; }

.dessous { position: absolute ; top:780px ; left:127px ; width: 260px ; height: 100px ; background:#0066FF ; }

</STYLE>

Code dans BODY

<div class="dessus">
<p>Cet exemple conviendra si l'élément se retrouve dans le maximum de pages du site.</p><p> Sinon le code placé en ligne est à privilégier. Simple suggestion !</p>
</div>

<div class="dessous"> </div>

Vous pouvez aussi réaliser une projection d'ombre sur du texte. Voir page 70a2

 

Sommaire application ... @ ... Sommaire CSS