menu

CodePen

Hey Everybody! Come share Pens, ask front-end coding questions, and get/give feedback with your CodePen pals

Channels
Team
The CodePen community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

Show and Tell

June 6, 2018 at 10:48pm
Share your latest creations!

June 6, 2018 at 10:50pm
I'll get the ball rolling.... This is my latest. A mix of WebGL and Magic Eye! https://codepen.io/steveg3003/details/ZROeBm
like-fill
11
  • reply
  • like
My latest is just a busted pen testing Masonry.js so, instead I'll give you my greatest.
I recreated OS X with HTML and CSS: https://codepen.io/jackharner/pen/jPmKGe
It has "working" menus, selectable icons, and an animated dock. It got picked for the front page a while ago and it's almost over 30,000 views.
like-fill
10
  • reply
  • like
My latest is just a busted pen testing Masonry.js so, instead I'll give you my greatest.
I recreated OS X with HTML and CSS: https://codepen.io/jackharner/pen/jPmKGe
It has "working" menus, selectable icons, and an animated dock. It got picked for the front page a while ago and it's almost over 30,000 views.
amazing!
  • reply
  • like
amazing!
Thanks!
  • reply
  • like
My latest is just a busted pen testing Masonry.js so, instead I'll give you my greatest.
I recreated OS X with HTML and CSS: https://codepen.io/jackharner/pen/jPmKGe
It has "working" menus, selectable icons, and an animated dock. It got picked for the front page a while ago and it's almost over 30,000 views.
That's awesome! The most recent pen I've worked on was also a computer screen! It was a collaborative pen with 6 other CodePeners. https://codepen.io/KristopherVanSant/pen/pVdVpe
like-fill
5
  • reply
  • like
That's awesome! The most recent pen I've worked on was also a computer screen! It was a collaborative pen with 6 other CodePeners. https://codepen.io/KristopherVanSant/pen/pVdVpe
Ha, love what happens when you click yes on the dialog!
like-fill
2
  • reply
  • like
Hey! Here's my latest pen which uses the JavaScript speech recognition API to take a spoken color from a user and apply that color to an element 😄 (currently only supported in Chrome) https://codepen.io/GeorgePark/pen/gKrVJe
like-fill
6
  • reply
  • like
Ha, love what happens when you click yes on the dialog!
😁That genius contribution was from Cassie Evans!
like-fill
2
  • reply
  • like
Hi all! On my latest pen I created pixel art with CSS https://codepen.io/oldstandstudio/pen/MXKooX
like-fill
2
  • reply
  • like
Ha, love what happens when you click yes on the dialog!
Haha that took me by surprise. It was pretty awesome
like-fill
1
  • reply
  • like
I did the "cards" challenge for this week, interactive but no JS. Cards are always one of those UI things that always look real nice but I'm not sure they're entirely practical. Regardless I had fun :) https://codepen.io/cobra_winfrey/full/dKMpzO/
like-fill
9
  • reply
  • like
I did the "cards" challenge for this week, interactive but no JS. Cards are always one of those UI things that always look real nice but I'm not sure they're entirely practical. Regardless I had fun :) https://codepen.io/cobra_winfrey/full/dKMpzO/
I ran across yours on twitter the other day. It's pretty rad!
like-fill
4
  • reply
  • like
Hi all! On my latest pen I created pixel art with CSS https://codepen.io/oldstandstudio/pen/MXKooX
nice!
like-fill
2
  • reply
  • like
yeah those pixel guys are adorable
like-fill
1
  • reply
  • like
Jamie Coulter built a really nice pixel art generator, I believe it outputs as css gradients: https://codepen.io/jcoulterdesign/pen/oqPNXL
  • reply
  • like
Jamie Coulter built a really nice pixel art generator, I believe it outputs as css gradients: https://codepen.io/jcoulterdesign/pen/oqPNXL
Thanks! I'll have to check it out :)
  • reply
  • like
I think you end up hitting weird edge cases when you try to force anchors to work as buttons (not that I haven't caught myself doing the exact same thing). For example, if you cmd+click the <a> version it opens a blank tab— probably not what you're after.
That said, I totally get the frustration with focus rings on buttons, and muuuuch prefer the way they behave on links.
  • reply
  • like
Hey, I'm a designer, but I love playing around with css. I'm happy about feedback ✌️
  • reply
  • like
I think you end up hitting weird edge cases when you try to force anchors to work as buttons (not that I haven't caught myself doing the exact same thing). For example, if you cmd+click the <a> version it opens a blank tab— probably not what you're after.
That said, I totally get the frustration with focus rings on buttons, and muuuuch prefer the way they behave on links.
This is a good point of view, thanks for the feedback. But would users ever cmd+click a button-looking link? I mean they wouldn't think it's a link and they probably wouldn't do that. But even so, is it really bad that it opens the page in new tab? But yeah, I agree there could be potential edge cases like you mentioned.
  • reply
  • like
I'm learning GLSL (the language that WebGL uses), so my pens are mostly shaders at the moment. It's a lot of fun. For example, halftone mixing textures - https://codepen.io/onion2k/full/LrVMvr/
like-fill
3
  • reply
  • like
I think now I understood what you actually meant. We can easily solve that problem by putting “javascript:void(0)” inside href, or by putting event.preventDefault() in click listener. I’ll update the demo this way
  • reply
  • like
Nothing fancy... Just participating in this month's CodePen challenge. This is my first time experimenting with not completely plain animations: https://codepen.io/Booligoosh/full/mKPpQp
like-fill
4
  • reply
  • like

June 7, 2018 at 3:53pm
Nothing fancy... Just participating in this month's CodePen challenge. This is my first time experimenting with not completely plain animations: https://codepen.io/Booligoosh/full/mKPpQp
This is sweet :) If you want a 'level-up' project— try refactoring your animations to rely on transform (specifically scale) rather than width and height— you'll get better frame rates, especially on low-powered devices (https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108 could be good reading for why that's the case)
like-fill
2
  • reply
  • like
A remix on an old idea for Pride Month
like-fill
2
  • reply
  • like
Show more messages