Is there a way to recreate this design from dribbble with html and css?
Hello everyone, i was browsing through dribbble and came across the following design which caught my eye. I really like the style of the headline with that text background. I tried to recreate it but didn't really get to a solution. So i'm asking if there is even a way to recreate that headline design with that white background in html and css and to be able to use variable text content, that you can pull from a database for a blog website.
Thanks in advance for any tips and solutions.
Here the link to the dribbble post:
https://dribbble.com/shots/20895614-Blog-and-Magazine-Website
Dribbble
Blog and Magazine Website
7 Replies
you can use a 'gooey' effect, done with svg filter.
https://codepen.io/MarkBoots/pen/LYoRNBw
Mark Boots
CodePen
Gooey text background with SVG filters
Example of using a gooey SVG filter to create smooth edges around inline text with a background. More details: https://ines.io/blog/newwwyear-2017...
cool thank you very much that works
i tried to insert your code in a new html file in vscode. i don't know if i'm doing something wrong here but when there is a line break for me there is no padding on the right. only in the third line after the last word.
okay i found the missing piece. i was using chrome which apparently doesn't know "box-decoration-break: clone" so i had to use "-webkit-box-decoration-break: clone" that fixed the issue
Your svg knowledge 🤯 I can't barely draw a line. Doing curves and svg filters and animations and transitions/symbols/groups/defs; so so many attributes and tags. I'm shocked there isn't more content on YouTube about intermediate to advanced svgs. Most videos I've found are just the basics: line/circle/rect/viewBox
my svg knowledge ends with knowing what is already done. This is just a copy paste from my collection 'nice things i found on the interwebs'
Even then I remember trying to figure out a curvy clip path from a codepen demo and couldn’t make it work for my use case. This was way back and I believe was a view box issue but still. SVGs are so powerful and cool and there’s so little organized content beyond the basics