loading...
Cover image for A πŸ’© Notification Code Pen

A πŸ’© Notification Code Pen

nickytonline profile image Nick Taylor (he/him) Updated on ・1 min read

my codepens (6 Part Series)

1) Quick Hulk Code Pen 2) A Simple ⭐ Rating Code Pen 3 ... 4 3) A πŸ’© Notification Code Pen 4) Probably another Battleship board on Code Pen 5) The CSS mask property 6) Toast Messages

If you want to see the previous Code Pen I did, check out A Simple ⭐ Rating Code Pen.

Continuing along with my 2018 Resolutions to make Code Pens this year, here is my latest.

A fun little poop notification component. Maybe Squatty Potty can use it πŸ˜‚ (watch their commercial if you're having a bad day).

One of the reasons I wanted to start making Code Pens was to see how much I can do without the help of JS. In this example, Javascript is only used to increment a CSS variable.

The easiest way to work on the hover effect is to use the "force state" feature in Chrome. See it in action at 2:40, the Bonus Tip! part of the What's New in DevTools video on how to work with "force state".

Yes, the poop emoji looks like a pilgrim. That's the best I could do for their hat for now. That's all folks. Now go hover over that πŸ’© notification!

my codepens (6 Part Series)

1) Quick Hulk Code Pen 2) A Simple ⭐ Rating Code Pen 3 ... 4 3) A πŸ’© Notification Code Pen 4) Probably another Battleship board on Code Pen 5) The CSS mask property 6) Toast Messages

Posted on by:

nickytonline profile

Nick Taylor (he/him)

@nickytonline

Senior software developer at DEV/Forem. Caught the live coding bug on Twitch at livecoding.ca

Discussion

markdown guide
 

Hasn’t the forced-state feature been in Chrome dev tools for, like, years?

 

Yeah you're right, but for some reason I thought they had tweaked it in 64. They were just talking about the feature at 2.40 as a bonus tip in general, not Chrome 64 specific in m.youtube.com/watch?v=90wNAn05Cf4.

 

Bref, j'ai fais une petite gaffe. πŸ’©

 

Is force state new?

It's been around for ages, no?

 

Already commented above. πŸ˜‰ I changed the post to just show how to do it via force state. Maybe you're seeing a cached version of the article?

 

Yeah, possible, no comments when I read it