CSS text blend mode

Posté le 25 août 2017 dans Techno

CSS text blend mode

Accrochez-vous bien, nous allons aujourd’hui apprendre une superbe méthode pour avoir un beau contraste en apposant du texte sur une image.

On est d’accord, dit comme ça ça ne vends pas vraiment du rêve. Mais si je vous montre ceci, ça change la donne non ?

See the Pen text/ background contrast with mix-blend-mode #2 by Ana Tudor (@thebabydino) on CodePen.

Il suffit de regarder le code CSS de ce codepen pour voir que le secret de ce superbe effet est mix-blend-mode: difference. L’effet est très puissant et permet des pirouettes presque impossibles jusque là.

Voici un autre exemple, sur une image en noir et blanc :

See the Pen text/ background contrast with mix-blend-mode #1 by Ana Tudor (@thebabydino) on CodePen.

C’est donc un très bel effet, qu’il me tarde d’utiliser dans un nouveau projet ! Qu’en pensez-vous ? Venez donc en discuter sur la page Facebook !

Source : css-tricks.com