Pens from progsman https://codepen.io/progsman/ en nospam@codepen.io Copyright 2024 2022-02-13T16:50:10-07:00 Expanding flex cards https://codepen.io/progsman/pen/vYWJeWG https://codepen.io/progsman/pen/vYWJeWG progsman

See the Code - See it Full Page - See Details

![](https://i.imgur.com/W6mroTN.gif) Edit 9th October 2021: Added theme switcher

]]>
Expanding flex cards 2022-02-13T16:50:10-07:00
Profile Card Hover Effect https://codepen.io/progsman/pen/JjWBJdr https://codepen.io/progsman/pen/JjWBJdr progsman

See the Code - See it Full Page - See Details

]]>
Profile Card Hover Effect 2021-06-08T20:43:59-07:00
Native HTML details element styled via CSS https://codepen.io/progsman/pen/xxqPpxd https://codepen.io/progsman/pen/xxqPpxd progsman

See the Code - See it Full Page - See Details

Rebound shot from Dribbble to implement an accordion-like element using only the details/summary native HTML element and CSS. Check the Dribbble shot over at: https://dribbble.com/shots/14907895-Native-HTML-details-element-styled-via-CSS. Best results can be seen in Chrome or Blink-based browsers. Firefox and others have decent results as well, but they could be improved creating alternative open/close icons.

]]>
Native HTML details element styled via CSS 2021-05-30T15:58:03-07:00
Random User w React & GSAP https://codepen.io/progsman/pen/ExWboxZ https://codepen.io/progsman/pen/ExWboxZ progsman

See the Code - See it Full Page - See Details

]]>
Random User w React & GSAP 2021-05-30T15:57:59-07:00
Pure CSS Lightbox https://codepen.io/progsman/pen/bGqBvZv https://codepen.io/progsman/pen/bGqBvZv progsman

See the Code - See it Full Page - See Details

This is a demo of a pure-CSS lightbox that uses the :target selector to hold state. The full tutorial can be found on Code Salad https://codesalad.dev/blog/pure-css-lightbox-25

]]>
Pure CSS Lightbox 2021-05-19T15:07:32-07:00
Free Solo WebGL Displacement Slider https://codepen.io/progsman/pen/MWgXdQN https://codepen.io/progsman/pen/MWgXdQN progsman

See the Code - See it Full Page - See Details

based on https://dribbble.com/shots/6726029-FREE-SOLO-online-route-exploring Best viewed in fullscreen/debug mode

]]>
Free Solo WebGL Displacement Slider 2019-09-13T21:04:57-07:00
A Pen by progsman https://codepen.io/progsman/pen/YbWvzJ https://codepen.io/progsman/pen/YbWvzJ progsman

See the Code - See it Full Page - See Details

]]>
A Pen by progsman 2019-05-12T10:29:11-07:00
Animated filter https://codepen.io/progsman/pen/OYLvJJ https://codepen.io/progsman/pen/OYLvJJ progsman

See the Code - See it Full Page - See Details

design by https://dribbble.com/shots/1372856-Flat-UI-Homepage-design-for-Juiiicy?list=users&offset=5

]]>
Animated filter 2019-05-04T02:40:21-07:00
Scheduled Maintenance - Proto.io https://codepen.io/progsman/pen/ROdjNL https://codepen.io/progsman/pen/ROdjNL progsman

See the Code - See it Full Page - See Details

]]>
Scheduled Maintenance - Proto.io 2019-04-28T15:44:17-07:00
Parallax Depth Cards https://codepen.io/progsman/pen/oVmadO https://codepen.io/progsman/pen/oVmadO progsman

See the Code - See it Full Page - See Details

After playing the Gwent Closed Beta from CD Projekt Red, I had to try this concept of parallaxed backgrounds and layers in cards. I'm thinking this could be really nice for my next portfolio site.

]]>
Parallax Depth Cards 2019-03-24T15:27:59-07:00