Je fais partie de ceux qui réalisent leurs maquettes dans Photoshop. Si la tendance va à la maquette dans le browser ou que Fireworks est un outil plus adapté, je reste fidèle au chef de file de la suite Adobe car c’est un outil que je connais bien et avec lequel j’aime travailler. Mais tout ceci est une autre histoire…

Si je parle de Photoshop (ou d’un autre logiciel de retouche d’images comme Pixelmator) c’est qu’il existe dans ces applications une fonction au combien utile: les modes de fusion.

Pour moi qui préfère multiplier les calques plutôt que de les altérer, les modes de fusions me permettent de donner un effet sur un autre calque. En partant d’une image basique et en appliquant par dessus une texture de papier froissé par exemple, j’obtient l’effet voulu sans altérer mes calques.

(ici en appliquant une fusion sur le calque de papier froissé)

Le souci quand je construis ma maquette de la sorte c’est que quand je décompose mes éléments pour monter ma page en HTML/CSS je me retrouve parfois dans une impasse. Par exemple, une ombre appliquée avec le mode de fusion produit n’aura pas du tout le même rendu dans le browser car je n’ai aucun moyen d’appliquer ce mode de fusion en CSS.

Il me faut donc jouer avec les valeurs pour arriver au bon résultat. Pas dramatique mais un peu ennuyant quand même. Et c’est la que je me dis:

Et si il y avait un moyen de spécifier les modes de fusion directement en CSS?!

Note: les éléments de code cités-ci dessous sont de pures suppositions et n’existent pas! Ne venez donc pas me dire que vous avez essayé et que ça ne marche pas. ;-)

Imaginez vous entrer quelque chose comme ça dans votre CSS:


{
blend: multiply;
}

(multiply = produit)

Si j’ai envie que mes titres prennent la texture de mon fond par exemple:

h1{
color: #009CFF;
blend: multiply;
}

Voilà ce qu’on obtiendrait dans le browser:

Exemple plus extrême

Imaginez maintenant que vous souhaitez donner cet aspect de papier froissé (discutable d’un point de vue esthétique, mais passons)  à toutes les images de votre blog.

Actuellement il vous faut à chaque fois passer par Photoshop et appliquer ce petit effet. Si il y avait la possibilité de l’appliquer en CSS, vous pourriez définir une image source de papier froissé qui s’appliquerai sous toutes les images que vous souhaitez.

C’est exactement ce qu’on faisait avec la fonction “box-shadow” quand cette dernière n’existait pas.


.imgbox{
background-image: papier-froisse.jpg;
}

.imgbox img{
blend: multiply;
}

De cette manière le bloc qui contient les images va a chaque fois afficher le papier froissé en arrière plan et la balise image elle-même serait appliquée en fusion systématiquement ce qui permettrait d’avoir le même effet appliqué sur toutes les images sans avoir besoin de passer par un logiciel de retouche.

C’est bien sûr assez gadget et peut entraîner des effets assez kitch, mais dans le fond c’est aussi le cas des box-shadow et text-shadow qui sont aujourd’hui des incontournables des CSS3. (à utiliser avec modération)

J’ai toujours bien aimé la fusion… ^_^