Pens from Stephan Max https://codepen.io/stephanmax/ en nospam@codepen.io Copyright 2024 2022-07-07T14:03:31-07:00 Scrollama: Different Root https://codepen.io/stephanmax/pen/OJvMdpm https://codepen.io/stephanmax/pen/OJvMdpm Stephan Max

See the Code - See it Full Page - See Details

]]>
Scrollama: Different Root 2022-07-07T14:03:31-07:00
Scrollama: Triggering Events https://codepen.io/stephanmax/pen/MWVaMmK https://codepen.io/stephanmax/pen/MWVaMmK Stephan Max

See the Code - See it Full Page - See Details

A slightly improved version of the code presented at https://www.linkedin.com/learning/scrollytelling-creating-a-one-page-web-experience/triggering-events - No .interactive class is necessary, simply triggering the active class is enough - Add margin: 0 to the body rule to avoid horizontal scrolling

]]>
Scrollama: Triggering Events 2022-07-07T10:02:16-07:00
Breaking Out With CSS Grid Layout (including constrained width) https://codepen.io/stephanmax/pen/NJqJPP https://codepen.io/stephanmax/pen/NJqJPP Stephan Max

See the Code - See it Full Page - See Details

Additionally, it adds two extra columns to the grid which enables you to constrain the maximum width of the breaking elements.

]]>
Breaking Out With CSS Grid Layout (including constrained width) 2019-02-27T20:40:29-07:00
03 – The Shadow DOM with styles and JavaScript https://codepen.io/stephanmax/pen/pxqoye https://codepen.io/stephanmax/pen/pxqoye Stephan Max

See the Code - See it Full Page - See Details

]]>
03 – The Shadow DOM with styles and JavaScript 2018-10-25T09:02:50-07:00
02 – The Shadow DOM with styles https://codepen.io/stephanmax/pen/WaLNvw https://codepen.io/stephanmax/pen/WaLNvw Stephan Max

See the Code - See it Full Page - See Details

]]>
02 – The Shadow DOM with styles 2018-10-25T09:00:34-07:00
01 – The Shadow DOM https://codepen.io/stephanmax/pen/PyXYrM https://codepen.io/stephanmax/pen/PyXYrM Stephan Max

See the Code - See it Full Page - See Details

]]>
01 – The Shadow DOM 2018-10-25T09:00:07-07:00
CSS Grid and position:sticky https://codepen.io/stephanmax/pen/odyxWE https://codepen.io/stephanmax/pen/odyxWE Stephan Max

See the Code - See it Full Page - See Details

A little experiment to playfully reveal text by scrolling a grid with sticky elements.

]]>
CSS Grid and position:sticky 2018-05-12T23:41:03-07:00
Slides with CSS Grid, position: sticky and object-fit https://codepen.io/stephanmax/pen/JvZGOG https://codepen.io/stephanmax/pen/JvZGOG Stephan Max

See the Code - See it Full Page - See Details

Inspired by http://melaniedaveid.com/, I recreated this slides + sticky sidebar effect with CSS Grid, position: sticky and object-fit.

]]>
Slides with CSS Grid, position: sticky and object-fit 2018-11-01T03:48:43-07:00
Document hasFocus https://codepen.io/stephanmax/pen/wrPoPX https://codepen.io/stephanmax/pen/wrPoPX Stephan Max

See the Code - See it Full Page - See Details

]]>
Document hasFocus 2022-07-01T18:52:08-07:00
Diagonally colored text with background-clip https://codepen.io/stephanmax/pen/rGzMbN https://codepen.io/stephanmax/pen/rGzMbN Stephan Max

See the Code - See it Full Page - See Details

Using background-clip to color a headline diagonally in two tones. Includes fallback to white color via feature queries.

]]>
Diagonally colored text with background-clip 2017-10-01T12:30:28-07:00