MODELES GRAPHIQUES

Couleur dégradée pour le fond des blocs

 

Mon avatar

Niveau difficulté - Initié

 

Pour faire des fonds avec dégradés de couleur, sans image, uniquement avec le CSS. Comme toujours la compatibilité des navigateurs est mise à l'épreuve. La propriété linear-gradient sera précédée par -moz- pour Firefox, de -webkit- pour Chrome et Safari avec également le code simple qui servira éventuellement à d'autres navigateurs. 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 {
background: -moz-linear-gradient(center bottom, #DAF3B4 0%, #517913 100%);
background: -webkit-gradient(linear, left 0%, left 100%, color-stop(0.01, #DAF3B4), color-stop(0.99, #517913));
background: linear-gradient(#DAF3B4,#517913);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#DAF3B4,endColorstr=#517913);
-ms-filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#DAF3B4,endColorstr=#517913);
}

 

 

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

 

.degrade
{
background: -moz-linear-gradient(center bottom, #DAF3B4 0%, #517913 100%);
background: -webkit-gradient(linear, left 0%, left 100%, color-stop(0.01, #DAF3B4), color-stop(0.99, #517913));
background: linear-gradient(#DAF3B4,#517913);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#DAF3B4,endColorstr=#517913);
-ms-filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#DAF3B4,endColorstr=#517913);
}

 

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 :

 

Dégradé capture 1 Dégradé Capture 2 Dégradé Capture 3 Dégradé Capture 4

Dégradé FF Capture 1 Dégradé FF Capture 2 Dégradé FF Capture 3

 

...



13/04/2011
0 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