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
 
nikhil27b profile image
Nikhil Bobade

CSS is better option for me

Collapse
 
louislow profile image
Louis Low • Edited

Can be easily done it with Yogurt CSS.

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

Sure, but I think this is the easy way!

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

Great!

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

This is great! But I tried to make it as simple as possible.

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
 
luanzinhowhoami profile image
Luan Campos

Show

Collapse
 
andy profile image
Andy Zhao (he/him)

Very cool!

Collapse
 
czarwalz profile image
CzarWalz

I love this

Collapse
 
murtuzaalisurti profile image
Murtuzaali Surti

That's great!