Design avec style:filter:alpha. Quel résultat chez vous ?

[jOoL]

Hello,

Je suis tenté de réaliser un design à l'aide de la propriété css:

Code: Tout sélectionner

filter:alpha(opacity=20);-moz-opacity:.20;opacity:.20;

J'ai déjà relevé qu'Opera ne supporte pas cette propriété. Par-contre, sous Windows, et avec IE et FF, ça passe et ça a l'air de tenir la route.



<!-- START EDIT //-->
: Opéra 9 supporte l'alpha avec la propriété suivante: -khtml-opacity:0.2

Ce qui donne:

Code: Tout sélectionner

filter:alpha(opacity=20);-moz-opacity:.20;opacity:.20;-khtml-opacity:0.2;

<!-- END EDIT //-->

Je suis curieux de savoir ce que cela peut donner avec d'autres configurations (safari et IE sous mac, konkeror sous linux etc..)

Mais pour ça, je vous met à contribution et compte donc sur votre feedback.

Preview: >ici<

Merci d'avance

jOoL

[psychoreflex]

A quelles zones de la page as tu appliqué ces règles ?
Parce que je ne sais même pas ce que je dois regarder (les zones de texte sur fond jaune un peu transparent sans doute ?).

[jOoL]

oui, ce sont les rectangles jaunes pâles.

Mais si rien ne te choques, c'est bon signe ! Merci

[psychoreflex]

Non l'effet est sympa.

D'ailleur je ne connaissais pas cette propriété. Ce doit permettre de faire des choses amusantes.

[Szarah]

Depuis IE4+, donc ça fait un bail, on peut tout faire avec une image, pas seulement lui appliquer un filtre d'opacité coloré.
On peut l'embosser, l'inverser g>d et h>b, il y a plein d'effets possibles sans toucher au fichier de base.

[nagafolk]

Il me semble qu'elle n'est pas beaucoup utilisée à cause de son manque de compatibilité sur les differents navigateurs.

D'ailleurs c'est curieux, sur le wiki de media-box, dans la définition de cette propriete css, il est indiqué qu'elle n'est pas compatible firefox, et pourtant chez moi aussi ca marche

[Szarah]

Tiens, URL pour montrer ça.
Faut y aller en IE, les autres sont pas encore cap' de tout (le script date de 2000) :
http://www.szarah.org/ie_tech/ie4_transitions.htm

Amusez-vous bien

[ Edit : J'ajoute que c'est de l'Histoire Techno, je m'en fiche que ce soit tel ou tel Nav ]

[nagafolk]

Yep, super merci

[Szarah]

>> nagafolk

J'insiste : c'est un script historique, il ne fonctionne pas sous autre chose que IE, je le cite à titre didactique.

Mais JoOL va nous adapter ça

[nagafolk]

Oui, oui, j'ai bien vu qu'il ne fonctionne qu'avec IE, mais à titre démonstratif c'est toujours utile

[jOoL]

Un bon article qui fait bien le tour de filter alpha/opacitiy:

http://www.mandarindesign.com/opacity.html

D'ailleurs, j'ai trouvé que Opera 9 supporte la transparence, il suffit d'ajouter la propriété suivante: "-khtml-opacity:0.5"

Ce qui donne, pour compléter le code de mon premier post:

Code: Tout sélectionner

filter:alpha(opacity=20);-moz-opacity:.20;opacity:.20;-khtml-opacity: 0.2;

Et finalement, la liste des commandes css spécifiques à FF et Mozilla:

http://www.xulplanet.com/references/ele ... rties.html

jOoL

[Szarah]

Et finalement, la liste des commandes css spécifiques à FF et Mozilla

spécifiques ??!!
Rhooo le vilain mot

Allez, pour nagafolk que l'archéologie du code IE amuse, une autre pour montrer l'utilisation pratique du filtre depuis IE4+ :

http://www.szarah.org/ie_tech/ie4_filtres.htm

Cette page de mars 2000, c'est spécifique à IE et à titre purement documentaire.

Abandonnez tout ce qui est spécifique, boudiu

[petit-ourson]

Je suis curieux de savoir ce que cela peut donner avec d'autres configurations (safari et IE sous mac, konkeror sous linux etc..)

Konqueror utilise le moteur khtml il me semble, donc ça devrait marcher.

Idem pour Safari.

Epiphany utilise gecko donc ca devrait marcher aussi dessus.

[nagafolk]

Super merci pour tous ces liens interessant

[jOoL]

Konqueror utilise le moteur khtml il me semble, donc ça devrait marcher.

Idem pour Safari.

Epiphany utilise gecko donc ca devrait marcher aussi dessus.

J'aimerai bien avoir des affirmations