Pens from Gavin Elster https://codepen.io/elstgav/ en nospam@codepen.io Copyright 2024 2024-01-31T23:09:02-07:00 Resetting z-index stacking context with isolation: isolate; https://codepen.io/elstgav/pen/dydNmgj https://codepen.io/elstgav/pen/dydNmgj Gavin Elster

See the Code - See it Full Page - See Details

]]>
Resetting z-index stacking context with isolation: isolate; 2022-05-16T15:48:01-07:00
SVG drop shadow test https://codepen.io/elstgav/pen/dBLgEL https://codepen.io/elstgav/pen/dBLgEL Gavin Elster

See the Code - See it Full Page - See Details

]]>
SVG drop shadow test 2019-07-16T00:06:12-07:00
Epilepifier https://codepen.io/elstgav/pen/MaxYMm https://codepen.io/elstgav/pen/MaxYMm Gavin Elster

See the Code - See it Full Page - See Details

Threw together some quick CSS that can be thrown on any page to recreate this epilepsy GIF: http://vignette3.wikia.nocookie.net/mrpeople/images/8/80/Epilepsy.gif

]]>
Epilepifier 2015-11-17T22:53:13-07:00
Slide open with transparency mask https://codepen.io/elstgav/pen/RWxbYp https://codepen.io/elstgav/pen/RWxbYp Gavin Elster

See the Code - See it Full Page - See Details

An experiment with -webkit-mask. I want a block of content to fade to transparent, and able to animate open. The challenge is getting the effect to work across any background, which necessitates the use of a mask vs. other methods (like a gradient that matches the background color).

]]>
Slide open with transparency mask 2024-01-31T23:08:02-07:00
Flexbox image gallery https://codepen.io/elstgav/pen/PPmaWV https://codepen.io/elstgav/pen/PPmaWV Gavin Elster

See the Code - See it Full Page - See Details

]]>
Flexbox image gallery 2024-01-31T23:09:02-07:00
SVG iOS Test https://codepen.io/elstgav/pen/QbVzqy https://codepen.io/elstgav/pen/QbVzqy Gavin Elster

See the Code - See it Full Page - See Details

SVGs with filter effects appear blurry on iOS when used inside <img> tags

]]>
SVG iOS Test 2015-07-22T22:45:32-07:00
A Pen by Gavin Elster https://codepen.io/elstgav/pen/Kpxqyj https://codepen.io/elstgav/pen/Kpxqyj Gavin Elster

See the Code - See it Full Page - See Details

]]>
A Pen by Gavin Elster 2015-12-22T00:42:21-07:00
TOC Nav https://codepen.io/elstgav/pen/mJGwbw https://codepen.io/elstgav/pen/mJGwbw Gavin Elster

See the Code - See it Full Page - See Details

]]>
TOC Nav 2015-12-11T18:41:13-07:00
Animated SVG https://codepen.io/elstgav/pen/QbxOPE https://codepen.io/elstgav/pen/QbxOPE Gavin Elster

See the Code - See it Full Page - See Details

An experiment in SVG animation with SMIL. Unfortunately SMIL is deprecated and losing browser support, but there's hope in CSS and JavaScript! https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features/

]]>
Animated SVG 2015-12-22T00:47:44-07:00
CSS Star Rating with counter https://codepen.io/elstgav/pen/mJpvdG https://codepen.io/elstgav/pen/mJpvdG Gavin Elster

See the Code - See it Full Page - See Details

Using radio buttons and a css counter, we can create a fully functional star rating control with no JavaScript.

]]>
CSS Star Rating with counter 2015-12-22T00:51:31-07:00