Démos CSS3
Thomas Bassetto
J'ai pris un peu de temps pour essayer de réaliser quelques trucs avec
les propriétés CSS relatives aux ombres et aux dégradés. Seulement, je
ne travaille pas dans le Web (malgré ma présence sur cette liste), ça
reste un "hobby". Je n'ai pas réussi à faire exactement ce que je
voulais (manque de pratique ?) et je fais donc appel aux talents des
personnes présentes sur cette liste de diffusion :)
Voici les 4 tests ainsi que leurs rendus dans Firefox 3.6 beta 5 / Mac
(j'ai vérifié le rendu avec Webkit et Opera 10.50 aussi) :
http://tb4.fr/labs/css3/blockquote.html
http://tb4.fr/labs/css3/blockquote.png
http://tb4.fr/labs/css3/comments.html
http://tb4.fr/labs/css3/comments.png
http://tb4.fr/labs/css3/onoff.html
http://tb4.fr/labs/css3/onoff.png
http://tb4.fr/labs/css3/menu.html
http://tb4.fr/labs/css3/menu.png
Les deux principaux soucis rencontrés sont la disparition des
guillemets sous Webkit dans le premier test et le non support de
border-radius par Opera. Pour ce dernier, si je ne me trompe pas, la
seule solution connue est d'utiliser une image de fond de type SVG
comme celle-ci :
http://files.myopera.com/dstorey/experiments/images/roundedcorners.svg
J'aimerais aussi avoir votre avis sur le bouton on-off (3è test) : je
n'ai rendu cliquable que la partie non sélectionnée mais je trouve que
l'expérience utilisateur n'est pas terrible (on aurait presque envie
de la faire glisser comme sur un iPhone, sans jamais y arriver).
Bonne fêtes,
Thomas
Anthony Ricaud
Vivement que WebKit adapte la nouvelle syntaxe des dégradés car l'actuelle est imbittable les trois quarts du temps.
Le 29 déc. 2009 à 22:29, Thomas Bassetto a écrit :
> Bonjour,
>
> J'ai pris un peu de temps pour essayer de réaliser quelques trucs avec
> les propriétés CSS relatives aux ombres et aux dégradés. Seulement, je
> ne travaille pas dans le Web (malgré ma présence sur cette liste), ça
> reste un "hobby". Je n'ai pas réussi à faire exactement ce que je
> voulais (manque de pratique ?) et je fais donc appel aux talents des
> personnes présentes sur cette liste de diffusion :)
>
> Voici les 4 tests ainsi que leurs rendus dans Firefox 3.6 beta 5 / Mac
> (j'ai vérifié le rendu avec Webkit et Opera 10.50 aussi) :
> http://tb4.fr/labs/css3/blockquote.html
> http://tb4.fr/labs/css3/blockquote.png
WebKit a plein de bugs avec les quotes :
https://bugs.webkit.org/show_bug.cgi?id=3234
https://bugs.webkit.org/show_bug.cgi?id=6503
Je te suggère de soumettre ta démo dans ces bugs pour faire bouger un peu les choses.
Pour le "drapeau français", background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#0080FF), color-stop(0.5, white), to(#F66)); sera utile.
Pour Opera, tu peux certainement utiliser SVG en background CSS.
> http://tb4.fr/labs/css3/comments.html
> http://tb4.fr/labs/css3/comments.png
Petit problème de couleurs "ajoutées" à la liaison de la bulle et de la petite flèche. La bordure est plus foncée.
Problèmes d'alignement de la bulle avec le textarea sous WebKit.
> http://tb4.fr/labs/css3/onoff.html
> http://tb4.fr/labs/css3/onoff.png
>
> http://tb4.fr/labs/css3/menu.html
> http://tb4.fr/labs/css3/menu.png
>
> Les deux principaux soucis rencontrés sont la disparition des
> guillemets sous Webkit dans le premier test et le non support de
> border-radius par Opera. Pour ce dernier, si je ne me trompe pas, la
> seule solution connue est d'utiliser une image de fond de type SVG
> comme celle-ci :
> http://files.myopera.com/dstorey/experiments/images/roundedcorners.svg
Opera 10.5 supporte border-radius.
> J'aimerais aussi avoir votre avis sur le bouton on-off (3è test) : je
> n'ai rendu cliquable que la partie non sélectionnée mais je trouve que
> l'expérience utilisateur n'est pas terrible (on aurait presque envie
> de la faire glisser comme sur un iPhone, sans jamais y arriver).
Si on ne peut pas faire glisser le bouton, il ne faudrait pas que ça ressemble à un bouton qu'on peut faire glisser.
Pourquoi pas un bouton on-off façon interrupteur ? http://shop.razor.com/images/P/MX350_on_switch_lg.jpg ou http://www.kostagara.com/blog/wp-content/uploads/2009/09/on-off-switch.jpg. Tu peux peut-être jouer avec les CSS transforms pour cela ?
>
> Bonne fêtes,
> Thomas
>
> --
>
> Vous recevez ce message, car vous êtes abonné au groupe Google Groupes Professionnels francophones du développement web.
> Pour envoyer un message à ce groupe, adressez un e-mail à webd...@googlegroups.com.
> Pour vous désabonner de ce groupe, envoyez un e-mail à l'adresse webdevfr+u...@googlegroups.com.
> Pour plus d'options, consultez la page de ce groupe : http://groups.google.com/group/webdevfr?hl=fr
>
>
Florent V.
Je t'encourage aussi à proposer tes demos comme exemples dans les bugs
webkit concernés.
Bonne année, —Florent
Thomas Bassetto
Le 29 décembre 2009 22:57, Anthony Ricaud <rik...@gmail.com> a écrit :
> WebKit a plein de bugs avec les quotes :
> https://bugs.webkit.org/show_bug.cgi?id=3234
> https://bugs.webkit.org/show_bug.cgi?id=6503
> Je te suggère de soumettre ta démo dans ces bugs pour faire bouger un peu les choses.
Ok, je vais faire un testcase minimal et le soumettre si pertinent.
> Pour le "drapeau français", background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#0080FF), color-stop(0.5, white), to(#F66)); sera utile.
> Pour Opera, tu peux certainement utiliser SVG en background CSS.
Fait, ainsi que pour les autres démos. Il faut cependant créer un
fichier SVG différent à chaque fois... Si j'avais le temps je ferais
bien un fichier dynamique + une règle rewrite pour le générer. À la
Amazon : http://aaugh.com/imageabuse.html ;)
>> http://tb4.fr/labs/css3/comments.html
>> http://tb4.fr/labs/css3/comments.png
> Petit problème de couleurs "ajoutées" à la liaison de la bulle et de la petite flèche. La bordure est plus foncée.
J'ai vu ça mais je n'ai aucune idée d'où ça vient. On dirait que pour
les textareas, on ne peut pas faire passer quelque chose par dessus
(par soucis d'accessibilité ?!).
> Problèmes d'alignement de la bulle avec le textarea sous WebKit.
Mais _que_ sous WebKit et je ne vois pas pourquoi malgré l'utilisation
de l'inspecteur Web.
> Pourquoi pas un bouton on-off façon interrupteur ? http://shop.razor.com/images/P/MX350_on_switch_lg.jpg ou http://www.kostagara.com/blog/wp-content/uploads/2009/09/on-off-switch.jpg. Tu peux peut-être jouer avec les CSS transforms pour cela ?
Je vais regarder ça, pour l'instant je n'y ai pas touché. J'ai essayé
de reproduire le premier bouton en utilisant juste des dégradés mais
ce n'est pas terrible :)
Thomas