Pens from Simon Goellner https://codepen.io/simeydotme/ en nospam@codepen.io Copyright 2024 2024-03-26T12:28:58-07:00 Toasty! Codepen Challenge https://codepen.io/simeydotme/pen/WNWGwgb https://codepen.io/simeydotme/pen/WNWGwgb Simon Goellner

See the Code - See it Full Page - See Details

Launch a Toast!

]]>
Toasty! Codepen Challenge 2024-03-14T18:07:20-07:00
Color Gradient Feature Table https://codepen.io/simeydotme/pen/KKYpPQx https://codepen.io/simeydotme/pen/KKYpPQx Simon Goellner

See the Code - See it Full Page - See Details

]]>
Color Gradient Feature Table 2024-03-26T12:28:58-07:00
Ambient Glow Card https://codepen.io/simeydotme/pen/eYXPLEP https://codepen.io/simeydotme/pen/eYXPLEP Simon Goellner

See the Code - See it Full Page - See Details

Using the new CSS @property to animate the borders and glow. Psuedo-random border effects with multiple rotating gradients and a highlighted mouse cursor.

]]>
Ambient Glow Card 2024-02-14T02:45:27-07:00
Social Feed ~ Poll with Animation https://codepen.io/simeydotme/pen/dyrOKNb https://codepen.io/simeydotme/pen/dyrOKNb Simon Goellner

See the Code - See it Full Page - See Details

]]>
Social Feed ~ Poll with Animation 2024-01-14T17:00:50-07:00
Pokemon Checkbox Animation Play State https://codepen.io/simeydotme/pen/WNmovJz https://codepen.io/simeydotme/pen/WNmovJz Simon Goellner

See the Code - See it Full Page - See Details

Use the checkbox to control the animation play state of various animations, and toggle visibility. No JS.

]]>
Pokemon Checkbox Animation Play State 2024-01-12T13:48:46-07:00
CSS Shimmer Button (JS for text) https://codepen.io/simeydotme/pen/GRzVKqr https://codepen.io/simeydotme/pen/GRzVKqr Simon Goellner

See the Code - See it Full Page - See Details

I was really inspired by an old button from Aaron which had a glowing edge, using an SVG effect. I wanted to see if I can create something similar with CSS only. I really love this.

]]>
CSS Shimmer Button (JS for text) 2024-03-18T08:42:11-07:00
CSS Only Shimmer Button https://codepen.io/simeydotme/pen/gOqNxRa https://codepen.io/simeydotme/pen/gOqNxRa Simon Goellner

See the Code - See it Full Page - See Details

I was really inspired by an old button from Aaron which had a glowing edge, using an SVG effect. I wanted to see if I can create something similar with CSS only. I really love this.

]]>
CSS Only Shimmer Button 2023-12-22T16:12:11-07:00
Anticipation Frame https://codepen.io/simeydotme/pen/PoVgNwa https://codepen.io/simeydotme/pen/PoVgNwa Simon Goellner

See the Code - See it Full Page - See Details

Level up !

]]>
Anticipation Frame 2023-12-12T16:46:20-07:00
Pixellated Canvas Component https://codepen.io/simeydotme/pen/WNPGgLV https://codepen.io/simeydotme/pen/WNPGgLV Simon Goellner

See the Code - See it Full Page - See Details

]]>
Pixellated Canvas Component 2023-11-06T18:43:59-07:00
Fancy Borders (w/ Transparency) https://codepen.io/simeydotme/pen/ZEVNZvL https://codepen.io/simeydotme/pen/ZEVNZvL Simon Goellner

See the Code - See it Full Page - See Details

I saw a bunch of people doing these borders, including that jhey guy, but it was bothering me that they were not able to have transparent backgrounds. I solved that here with clips/masks. the only caveat is the border is on a psuedo-element.

]]>
Fancy Borders (w/ Transparency) 2023-10-23T07:39:06-07:00