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

andy.durbecq
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 :

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

Chelios
Réponse acceptée

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

andy.durbecq
Auteur

Oops je pensais que les images étaient possibles voici le lien de l'image :
https://www.id-parallele.com/exemple-blur-lettrage.jpg

popotte

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
Auteur

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 😭