N’en déplaise à Jakob Nielsen, le flat design continuera, pendant les années à venir, à dicter la marche à suivre en ce qui concerne l’esthétique des sites web et des apps mobiles .
Ce changement de paradigme est la raison pour laquelle vous, intégrateur web, devez d’ores et déjà adopter l’esthétique « flat design », soit les dégradés subtils, les icônes en 2d et, je vous prie d’accepter cet écart de langage, ces fichues « long shadows » qui vous donneront envie de retrouver l’infographe qui en a eu l’idée afin de de lui faire bouffer sa tablette graphique.
En effet, reproduire une « long shadow » en CSS3 est tout , sauf une tâche agréable. C’est une corvée fort complexe, qui implique de :
- trouver la nuance de couleur correspondant à l’ombre du texte ou du bloc;
- créer un ensemble de text-shadow séparés par 1px;
- tenir compte des variations d’opacité au fur et à mesure qu’on incrémente les valeurs X et Y du text shadow.
Et cela autant de fois qu’il y a des long shadows dans la maquette.
En termes plus clairs, c’est un effort supplémentaire dont tout intégrateur se passerait volontiers. Mais bon, lorsqu’on est un codeur stakhanoviste, ayant dans le système sanguin des hectolitres de caféine, ingérés sous toutes les formes disponibles (café, redbull, pillules) et une capacité de jugement amoindrie, on fait fi de cet inconvénient, on ouvre son éditeur de code préféré et on saisit allègrement ceci :
« text-shadow: rgb(62, 140, 184) 1px 1px,
rgb(62, 140, 184) 2px 2px,
rgb(62, 140, 184) 3px 3px,
rgb(62, 140, 184) 4px 4px,
rgb(62, 140, 184) 5px 5px,
rgb(62, 140, 184) 6px 6px,
rgb(62, 140, 184) 7px 7px,
rgb(62, 140, 184) 8px 8px,
rgb(62, 140, 184) 9px 9px,
rgb(62, 140, 184) 10px 10px,
(…) »
Ce qui donne ceci.
 |
Oui … 30 lignes de code , et ça ne ressemble pas vraiment un « long shadow » en bonne et due forme.
C’est l’instant précis où la caféine arrête de faire son effet et que vous vous rendez compte que vous n’êtes payé ni à la ligne ni à la complexité du code, mais surtout qu’en dehors des navigateurs web et des éditeurs de texte, il y a une vie, à côté de laquelle vous êtes entrain de passer.
Arrêtez tout … il y a une façon plus efficiente de faire un « long shadow ».
En effet, une application web – développée par le webdesigner argentin Juani Ruiz – vous permettra d’obtenir un « long shadow » en deux temps trois mouvements.
Pour ce faire :
- allez à l’adresse suivante : http://sandbox.juan-i.com/longshadows/
- copiez le code hex correspondant à l’arrière plan de votre page ou de votre bloc dans la première zone de texte,
- Ajustez la longueur de l’ombre selon vos préférences;
- Cliquez ensuite sur « show code » pour copiez le code css correspondant à votre long shadow;
- Admirez le résultat
Répétez la démarche pour les instances de long shadow que vous devez intégrer .
