| |
| Voir le sujet précédent :: Voir le sujet suivant |
| Auteur |
Message |
admin
Spécial
Inscrit le: 01 Juin 2006
Messages: 24
|
 Posté le: Jeu Juin 01, 2006 10:22 pm Sujet du message: Ombre sur texte |
 |
|
L'utilisation d'ombres portées est une technique de plus en plus courante dans le design Web, car elles permettent de relever une page qui autrement semblerait peut-être trop plate. Problème : la plupart du temps, ces ombres portées utilisent des images découpées et groupées dans un tableau, ce qui sémantiquement est loin d'être excellent, et peut rendre la mise à jour du site plus ardue.
Il est possible de recréer cet effet via CSS, en utilisant un minimum d'images. En effet, les implémentations actuelles de CSS ne permettent pas de créer le dégradé nécessaire à l'ombre voulue, aussi faut-il faire appel à une petite image pour remplir cette tâche.
La technique que nous présentons ici utilise donc une image transparente (donc GIF ou PNG), qui est appliquée, grâce à CSS, tout du long des bordures inférieures et droites de tout élément marqué de la classe ombre. Les bordures étant néanmoins "intérieures" à l'image, il nous faut imbriquer tout d'abord l'élément ciblé dans une première balise DIV, qui créera l'espace nécessaire à la visualisation de l'ombre.
| Citation: | <div class="ombre">
<div class="boite">
<img src="img/laMer2.jpg" width="150" height="150" />
</div>
</div>
<div class="ombre">
<div class="boite boiteTxt">
<p>Avec du texte dedans</p>
<div>
</div>
<style>
.ombre {
float:left;
clear:left;
background: url(img/ombre.png) no-repeat bottom right;
margin: 10px 0 10px 10px !important;
margin: 10px 0 10px 5px;
padding: 0px;
}
.boite {
background: lightblue;
position:relative;
bottom:6px;
right: 6px;
}
.boiteTxt {
padding:4px;
}
</style> |
|
|
| Revenir en haut de page |
|
 |
|
|
Vous ne pouvez pas poster de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas voter dans les sondages de ce forum
|
| |
|
FAQ
Rechercher
Liste des Membres
Groupes d'utilisateurs
Profil
S'enregistrer
Connexion
Se connecter pour vérifier ses messages privés
