MODELES GRAPHIQUES

Création d'ombre pour les bordures des blocs

 

Mon avatar

Niveau difficulté - Initié

 

Mettre du relief à vos blogs, en créant des ombres aux bordures des blocs qui le constituent. Comme toujours la compatibilité des navigateurs est mise à l'épreuve. La propriété box-shadow, utilisée pour cette procédure, sera précédée par -moz- pour Firefox, de -webkit- pour Chrome, Opéra et Safari, également -khtml- pour Linux. Sans mettre un code conditionnel pour Internet Exploreur, j'ajoute son code spécifique après les propriétés reconnues par les autres navigateurs.

 

 

Exemple de code à rajouter à la feuille de style quand vous voulez mettre le même fond dégradé à plusieurs blocs

 

#cadre, #barre a, #barre a:hover, #menu, #menu ul, #contenu, #bas {
-moz-box-shadow: 4px 12px 8px #000000;
-webkit-box-shadow: 4px 12px 8px #000000;
-khtml-box-shadow: 4px 12px 8px #000000;
box-shadow: 4px 12px 8px #000000; filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=120, Strength=12); zoom: 1;
}

 

 

Exemple de class à mettre dans la feuille de style, puis dans la balise des blocs, sous cette forme class="ombre".

 

.ombre
{
-moz-box-shadow: 4px 12px 8px #000000;
-webkit-box-shadow: 4px 12px 8px #000000;
-khtml-box-shadow: 4px 12px 8px #000000;
box-shadow: 4px 12px 8px #000000;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=120, Strength=12); zoom: 1;
}

 

Ces codes sont à mettre comme tous les codes CSS, selon le cas, direct dans la feuille de style ou dans une feuille de style complémentaire.
Egalement dans la bordure gauche/droite ou dans un article, en les insérant dans les balises HTML de style.

<style type="text/css">
 ici le code
</style>

 

Attention dans le nouveau composeur il faut les balises Javascript.

<script type="text/javascript">// <![CDATA[
document.write('<style type="text/css">' +
'ici une ligne de code' +
'ici une autre ligne ' +
'ici une autre ligne... etc...' +
'</style>');
// ]]></script>

 

 

Pour vous aider à créer le code j'ai créé ce générateur lien

 

Quelques captures exemples :

 

Ombre FF Capture-1Ombre FF Capture-2Ombre FF Capture-4Ombre FF Capture-4Ombre FF Capture-5Ombre FF Capture-6

 

Tests sous IE8

Ombre IE Capture-1Ombre IE Capture-2Ombre IE Capture-3Ombre IE Capture-4

 

 

...



20/04/2011
2 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 9 autres membres


Recommander ce blog | Contact | Signaler un contenu | Confidentialité | RSS | Espace de gestion