CodePen / General

Show and Tell

Show and Tell

CodePen / General · 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
5
  • 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
8
  • 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

June 7, 2018 at 2:21am

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

June 7, 2018 at 3:35am

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

June 7, 2018 at 6:35am

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 ✌️

https://codepen.io/andreasstorm/pens/public/

  • 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

@alexzaworski 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

https://codepen.io/shubniggurath/pen/zpxjbG?editors=1001

like-fill
2
  • reply
  • like