CSS : Aide intégration de flou d'arrière plan dans du lettrage

Par andy.durbecq, il y a 3 ans


Les bases HTML/CSS

Bonjour à tous,

j'utilise adobe XD pour créer mes maquettes. Dans celui-ci on peut facilement ajouter un flou en arrière plan à l'intérieur de lettrage. Voici à quoi cela ressemble sur XD :

Visuel XD

J'ai essayé via du clip-path, du mix-blend-mode mais impossible d'avoir ce blur avec un lettrage parfait.
Auriez-vous des idées ?

Par avance merci à tous.

4 réponses

popotte, il y a 3 ans

Hello :)

Alors la façon de faire c'est de mettre un fond d'écran qui est déjà flouté de base

Tu peux appliquer l'effet blur, mais le problème c'est que c'est un style CSS trop récent, certains navigateurs ne le supportent pas, faudra attendre un peu avant de l'utiliser ^^'

andy.durbecq, il y a 3 ans

Merci Popotte mais l'effet blur on est d'accord qu'il s'applique sur la boite entière et non sur le texte uniquement ?

J'ai bien pensé à l'arrière plan avec un background-clip mais pas top 😭

Chelios, il y a 3 ans

Bonne question, peut-être avec avec un svg? Je sais qu'on peut y appliquer un gaussian backdrop egalement