I created this pen last week after stumbling across this 3D Red Switch design on Dribble. Since then it gained a lot of popularity (much more t...
For further actions, you may consider blocking this person and/or reporting abuse
Looks great! One tiny thing I'd change 🤏
Move the
inputoutside the label and make the clickable area of the label half the size of the switch. That way, you can't click the side that's pressed in. Then it'll be "realistic" 😉Yes, others have suggested this also, however, I think that this is problematic in terms of accessibility since the user expects the whole switch to be clickable.
I think that would be the least of the concerns in making this accessible 😅
However, If you want to take it a step further though, divs aren't allowed as children of
label👍Switch them to
spanand usedisplayto style them up.Yes, I guess you're right... 😅
And that's a good point regarding the divs 👍
Nicely explained!
This looks really nice (though it's not "pure CSS").
If I could make one suggestion? Drop the opacity on the characters to maybe 0.8 or so so they let a little of the light through.
Thanks for the feedback, interesting suggestion.
May I ask why you don't consider this as pure CSS?
It needs a bunch of HTML to back it up? There are several DIVs there whose sole purpose is presentation.
Pure CSS does not mean zero HTML, you need HTML elements to apply the CSS to.
I know what you're getting at. But pure CSS to me means using the elements that are already there, and no more.
If you're allowing adding HTML, then you may as well say, "Let's have 1920x1080 DIVs and give them all unique IDs", because then "Pure CSS" will let you do full HD video, and it all becomes meaningless.
To me, pure CSS is what you could apply to an existing page without having to ask the authors to change their markup.
I’ve always thought developers meant “no JavaScript” when they say pure CSS/ HTML.
Semantics aside, I’d say this is pretty impressive right?
Nobody says that though, they say "Pure CSS". It's kind of a trend.
Yes, it looks really good!
Nice work! Never knew you could stack multiple
box-shadowlike that.Amazing step-by-step guide. I have learned a lot. Thanks.
Since when I saw your last article, I was curious to have a step-by-step guide and you provided better than my expectations.
Thanks, Shivam! 🙏
پيرسينگ يا سوراخ کردن بدن، فرآيندي است که طي آن يک قسمت از بدن براي قرار دادن جواهرات سوراخ مي‌شود. اين عمل ممکن است پيرسينگ واژينال چيست؟ براي اهداف زيبايي، فرهنگي، مذهبي يا شخصي انجام شود. پيرسينگ‌ها مي‌توانند در نقاط مختلف بدن انجام شوند و هر نوع پيرسينگ ويژگي‌ها و نام خاص خود را دارد.
Impressive!
This is really impressive. Nice.
Amazing! Actual result aside, as far as tutorials/showcases go, this point but point approach works great for teaching.
Genial! and very well explained, thnks
Very cool and some of the possibilities of css very well explained, have bookmarked for future reference.
Looks wonderful. Thanks!
Nicely explained!
I have been clicking this for too long now, beautiful attention to detail!
I LOVE THIS SO MUCH!
Spent a good 15 minutes just toggling the switch, it's so satisfying! Great job
Wow! Incredible. Reminds me a bit of HAL9000 too.
One of the best if not THE BEST looking CSS gems I've seen in my entire life! Well done Yoav!
Thank you!
Nice, I saw this on Codepen I know you made it.
This is genius! Great job. I will definitely try this one. The level of realism you are giving it it's amazing. Thank you for sharing this!
impressive work! very interesting that so many feedback for improvement 🙄