CSS - Modifications Transparence

 Transparence dans vos blogs 
 Transparence dans vos blogs 

Modifications de la feuille de style du modèle graphique



Body Conteneur Rubriques Footer


Dans la règle du body, c'est à dire la page entière, il faut modifier que la première ligne, mettre l'adresse internet où est stockée votre photo ou image. Cette dernière doit être dimensionnnée  le plus fréquemment en 1024 * 768 pour remplir entièrement le fond.

body {
    background: url(http:// adresse image ) top center no-repeat fixed 
#344566
;
    margin: 15px 0 15px 0;
    padding: 0 0 0 0;
    font: 10pt trebuchet MS;
    text-align: center;
    color: #FFF;
}

Pour des explications détaillées sur le possibilités de décorer vos fonds de page, consultez les articles sur le CSS, dans le menu vertical de gauche vous trouverez le sommaire [lien] .

La règle #conteneur gére la partie ou division de la page contenant les autres éléments, il faut donc la rendre transparente modifier les valeurs comme ci-dessous, en mettant transparent à la place du code couleur et mettre à 0px l'épaisseur de la bordure.
Dans DIZ Perso le conteneur est nommé partie cadre, dans la propriété  background mettre simplement le # supprimer les chiffres et modifier aussi la bordure.
#conteneur {
 border: 0px solid #415680;
 width: 768px;
 margin: 0 auto;
 padding: 0 0 0 0;
 text-align: left;
 background: transparent;
}

La règle #rubriques gére la partie ou division de la page dans laquelle vous écrivez vos articles. Là il existe un problème, pas pour la rendre transparente, car c'est exactement la même chose que pour le conteneur, mettre transparent à la place du code couleur. Par contre il faudra prévoir la taille des caractères ainsi que la couleur, du texte de vos articles pour qu'ils soient lisibles sur le fond image. Pour les liens c'est la même chose, mettre une décoration un surlignage couleur ou des caractères plus grands. 
#rubriques {
float: right;
width: 530px;
margin: 20px 10px 0 0;
padding: 0 0 0 0;
background: transparent;
}
Une autre solution mettre un fond pas totalement opaque, mais la propriété du CSS  "opacity" à ma connaissance n'est pas reconnue par IE,  vous pouvez essayer (tenez moi au courant si ça fonctionne), voilà ce qu'il faut mettre dans la règle :
background-color; code couleur;
opacity: 0.30;   (1 = opaque, et exemple ci-contre 30%)

Dans les articles sur le HTML, j'explique comment créer des divisions, ceci pour rendre plus lisible le texte tout en laissant apparaître au maximun l'image du fond.




Pour le pied de page #footer c'est la même chose
#footer {
margin: 0 0 0 0 ;
padding: 0 10px 0 10px;
text-align: right;
background: transparent;
border-top: 1px solid #415680;
font: bold 10pt Trebuchet MS;
}

Après il y a la partie titre du blog, le menu haut, le menu gauche, si vous avez réussi jusque  là vous devez pouvoir faire cette modification sans trop de soucis.
J'ai fait cet article rapidement car plusieurs bloggeurs m'ont contacté à ce sujet, je le modifierai certainement par la suite, je l'avais prévu en même temps que les articles sur le  HTML.
à suivre...




15/01/2008
9 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 142 autres membres