Message des administrateurs

Ce blog est le prolongement, le complément du Groupe d'aide Blogger en français. Vous pourrez y trouver, au fur et à mesure qu'ils seront reproduits ici, les conseils donnés au fil des messages sur le Groupe. C'est une simplification pour vos recherches d'aide sur les blogs de Blogger. Vous êtes cordialement invités à participer à cette compilation. Pour ce faire, il vous suffit de m'adresser un mail à cette adresse et dans les meilleurs délais, nous nous efforcerons de changer votre inscription afin que vous puissiez intervenir. Comme il s'agit d'un blog, vous pourrez également laisser vos commentaires - toujours les bienvenus - pour améliorer tant le contenu que le contenant.


Groupe d'aide Blogger en français

Google Groupes
Abonnez-vous au groupe Aide Nouveau Blogger en français
E-mail :
Visiter le groupe

mardi 18 décembre 2007

Opacité et transparence - Appliquer un filtre

Opacité et transparence


Firefox et Internet Explorer (5.5 et au-delà) disposent d'un filtre qui peut s'appliquer sur une image ou un bloc de texte.

La théorie

L'opacité (opacity) est définie comme le complément à 100 du taux de transparence (!) du filtre. Ainsi une opacité de 95% ne filtre que 5% de couleur, alors qu'une opacité de 5% retient 95% des couleurs.
Sous Firefox, le paramètre opacity varie de 0 à 1, alors que sous Internet Explorer, on utilise un filtre alpha (opacity) variant de 0 à 100.

L'utilisation

L'opacité peut être utilisée pour un bloc div, un paragraphe, des titres, une table complète ou des cellules. Elle s'utilise aussi avec une image. Pour le cas d'une image, Internet Explorer impose de définir au moins l'une des dimensions (width ou height).

Utilisation dans un bloc div

Le bloc div sans filtre


Le bloc div opaque à 90 % - filtre de 10 %

Le bloc div opaque à 70 % - filtre de 30 %

Le bloc div opaque à 50 % - filtre de 50 %

Le bloc div opaque à 30 % - filtre de 70 %

Le bloc div opaque à 10 % - filtre de 90 %




Le style du bloc div


// le bloc div opaque à 70 se définit comme suit, la clause opacity pour FF et le filtre pour IE
.opaque70 {
opacity: .7;
color: white;
filter: alpha(opacity=70);
}


Un filtre sur une image


L'image initiale est affichée avec une opacité de 20 %, le filtre est supprimé en passant le curseur de la souris sur l'image.



Le code


// la fonction agit comme un flip-flop et passe d'une opacite de 20 % à 100 % (pas de filtre)
// document.all permet de tester le type de navigateur
//
function changevisibility(lowvis,highvis)
{
force=(highvis==0)? 1 : 0.2
if (document.all)
lowvis.filters.alpha.opacity=force*100
else
lowvis.style.opacity=force
}


Un filtre sur une image qui change continuellement

Pour Noël, une image dont l'opacité varie par incrément de 5 %



Le code


// setInterval permet l'appel toutes les 250 millisecondes de la fonction
// l increment d opacite est de 5 %
// document.all permet de tester le type de navigateur
//
op=0;
var op_plus = 1;
var op_moins = 0;
//
function f_opacity()
{
if (op < op_plus="0" op_moins="1"> 0.05 && op_moins)
op-=0.05
else
{
op_plus=1
op_moins=0
}
if (document.all)
document.getElementById("testop_change").style.filter="alpha(opacity=" + 100 * op +")";
else
document.getElementById("testop_change").style.opacity=op;
}
setInterval("f_opacity()",250);


Le fichier style et le javascript sont enregistrés sur les Liens du Vin

Le fichier Javascript, opacity.js

La feuille de style, style-blogger-testopaque.css

Créer un effet de transition entre images

Une page d'exemple, cliquer sur la vignette pour voir l'effet de transition


En savoir plus


Utiliser box-shadow pour ombrer ses blocs

Effet de transparence au survol d'un lien, avec la technique du Sprite CSS.

Enregistrer un commentaire