[CSS3] A quoi ressemblera box-shadow ?

Bien que je réalise un petit message sur le sujet aujourd'hui, la question n'est absolument pas tranchée - loin de là - et les débats se font assez actifs dans le groupe W3C chargé du CSS depuis maintenant quelques jours : une vraie polémique !

Néanmoins, les grandes lignes se tracent, petit à petit.

Syntaxe globale.

Comme je l'ai dit, elle est encore en pleine discussion, mais on devrait au final arriver à un résultat semblable à ceci :

box-shadow: none | [[<shadow-def>]? [<color>]? [inner | outer]]

Il sera peut-être possible de spécifier plusieurs effets en séparant chaque effet d'une virgule, mais cela non plus n'est pas encore arrêté.

<Shadow-def> Structure

image // Translation horizontale de l'effet "Shadow"
<length> offsetX;

// Translation verticale de l'effet "Shadow"
<length> offsetY;

// Rayon du flouté appliqué sur le "Shadow"
<length>? blurWeigth;

// Épaisseur de l'étendage (bordure autour du box-shadow)
<length>? spreadTickness;

Inset et Outset : Quelle différence ?

Outset : comportement "logique" pour un effet ombré.

L'effet se réalise à l'extérieur de l'élément. Le Spread sert à étendre la zone vers l'extérieur. L'effet d'ombre est placé sous l'élément auquel il s'applique.

Inset : une bordure "tardive"

L'effet se réaliser dans l'élément. Le Spread sert à étendre la zone vers l'intérieur. L'effet d'ombre est placé sur l'élément auquel il s'applique.

Son utilisation permet surtout de faire des bordures "floues" qui passent par dessus le contenu en lui même de l'élément.

image

Edit : Nouvelle version du contenu en "image" :

Color et gestion de la couleur

imageC'est ici que le comportement est encore mal défini. Quelle sera la relation exacte de color dans l'histoire ? Remplacera-t-il, si il est défini, les couleurs de l'élément, ou au contraire sera toujours défini par "gray" si il est omis ? La question reste ouverte.

Une idée globale du méchanisme de génération du box-shadow est disponible ici à gauche.

La difficulté sera l'étabissement de la color map. Comment faire pour se baser à la fois sur la couleur donnée, la couleur de l'objet, et l'effet ombre censé être rendu ?

 

 

D'autres problèmes à régler : d'autres options en perspective ?

image

Si vous avez des remarques à faire, n'hésitez pas, ca pourrait toujours être utile dans les débats.

Fremy

Publié dimanche 11 mai 2008 17:46 par FREMYCOMPANY
Classé sous ,
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires


Les 10 derniers blogs postés

- T_PAAMAYIM_NEKUDOTAYIM par MadMatt le il y a 19 heures et 45 minutes

- Et je mets le son.... par Pierrick's Blog le il y a 23 heures et 51 minutes

- SharePoint : Comment interdire l’accès à un utilisateur pour tous les sites d’une Web Application par Blog Technique de Romelard Fabrice le 07-18-2008, 19:05

- VPC - Reset de la position de la console par Blog technique de Nicolas Boonaert le 07-18-2008, 16:29

- Un bug dans IE rendra cette page… non-imprimable ! par Le blog de FremyCompany le 07-18-2008, 15:33

- Quelques retours sur Google Protocol Buffers par Julien Chable le 07-18-2008, 11:10

- SharePoint et le multilinguisme : Comment gérer la traduction des propriétés dans les toolbars des WebParts par The Mit's Blog le 07-18-2008, 10:53

- [Open XML] Les liens de la semaine 14/07/2008 par Julien Chable le 07-18-2008, 10:29

- Une nouvelle version des TFS Power tools est disponible par Michel Perfetti [Miiitch] le 07-18-2008, 09:37

- EF et le testeur fou par Matthieu MEZIL le 07-18-2008, 07:34