DEV Community

Cover image for How to create a notification badge with CSS ?

How to create a notification badge with CSS ?

Murtuzaali Surti on May 28, 2021

Notification badges annoy me most of the times by popping up every now and then and I am pretty sure most of you experience similar thing, but anyw...
Collapse
 
afif profile image
Temani Afif •

You can also rely on mask to have transparency, related: stackoverflow.com/a/51377952/8620333

Collapse
 
grahamthedev profile image
GrahamTheDev •

You ok buddy...you are recommending SVG! 😜😂

Collapse
 
afif profile image
Temani Afif •

not really, the question was initially using SVG so I gave the proper solution with SVG and then I added the CSS mask solution to show that it's also easy with CSS ;)

Thread Thread
 
grahamthedev profile image
GrahamTheDev •

Phew, for a second there I was going to call someone to come and check on you! 😜

Thread Thread
 
thefuckergithub profile image
thefuckergithub •

lol

Thread Thread
 
thefuckergithub profile image
thefuckergithub •

olo

Collapse
 
paulcodes profile image
Paul Golubkov •

Hi! Great article! Here is some advices for you

Good job!

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti •

Sure, thanks. I will definitely take that into consideration.

Collapse
 
genakalinovskiy profile image
Gena Kainovskiy •

Good, but what do you think about improving this solution with accessibility supporting. See example w3.org/WAI/WCAG21/Techniques/aria/....
thank you.

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti •

Thanks a lot!

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti •

Improved!

Collapse
 
czarwalz profile image
CzarWalz •

I love this

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti •

That's great!

Collapse
 
andy profile image
Andy Zhao (he/him) •

Very cool!

Collapse
 
luanzinhowhoami profile image
Luan Campos •

Show