Mon mixin box-shadow me rend bien des services, il permet d’écrire :
UPDATE : j’ai trouvé beaucoup plus simple que la technique décrite ici.
@include box-shadow(0px 0px 5px #666);
Qui est ensuite compilé en ça :
-webkit-box-shadow: 0px 0px 5px #666;
-moz-box-shadow: 0px 0px 5px #666;
box-shadow: 0px 0px 5px #666;
Le code SCSS de mon mixin en question :
@mixin box-shadow($params) {
-webkit-box-shadow: $params;
-moz-box-shadow: $params;
box-shadow: $params;
}
Malheureusement il ne marche pas si on essaye de lui passer plusieurs shadows pour la même déclaration. Un truc comme ça quoi :
box-shadow: 0px 0px 10px #666,
0px 0px 15px #666,
0px 0px 20px #666,
etc...
Pas moyen d’y arriver avec mon mixin tel quel…
Donc après quelques recherches du côté de Compass puis du côté de StackOverflow je l’ai modifié pour lui permettre de supporter plusieurs shadows dans la même déclaration (9 shadows maximum pour être plus exacte, on va dire que ça suffira hein) 😛
Et voilà, mon petit mixin tout mignon du début s’est transformé en cette chose énorme, immonde et illisible :
@mixin box-shadow( $shadow1, $shadow2:false, $shadow3:false, $shadow4:false, $shadow5:false, $shadow6:false, $shadow7:false, $shadow8:false, $shadow9:false ) {
$params: $shadow1;
@if $shadow2 { $params: $shadow1, $shadow2; }
@if $shadow3 != false { $params: $shadow1, $shadow2, $shadow3; }
@if $shadow4 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4; }
@if $shadow5 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5; }
@if $shadow6 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6; }
@if $shadow7 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6, $shadow7}
@if $shadow8 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6, $shadow7, $shadow8 }
@if $shadow9 != false { $params: $shadow1, $shadow2, $shadow3, $shadow4, $shadow5, $shadow6, $shadow7, $shadow8, $shadow9 }
-webkit-box-shadow: $params;
-moz-box-shadow: $params;
box-shadow: $params;
}
Et ça s’utilise comme ça :
@include box-shadow( 0px 0px 5px blue, 0px 0px 5px lightBlue, etc. );
Donc 9 shadows max. Mais on peut toujours paramétrer le mixin pour qu’il en accepte plus.
Je vais quand même chercher un moyen de simplifier tout ça, peut-être avec @each je sais pas mais ça vaudrait le coup. Enfin bon au moins maintenant il supporte le multiple shadows ! 😀
UPDATE : j’ai trouvé beaucoup plus simple que la technique décrite ici.
La plupart des intégrateurs utilisent la fonction Enregister pour le web de Photoshop pour exporter leurs images. Etonnement, l’export jpeg de celui-ci n’est pas très optimisé et Fireworks fait un bien meilleur travail de ce côté-là.
