Pens from Eric Cornelissen https://codepen.io/ericornelissen/ en nospam@codepen.io Copyright 2024 2022-12-03T11:25:04-07:00 Loading button animation https://codepen.io/ericornelissen/pen/yLEQYLp https://codepen.io/ericornelissen/pen/yLEQYLp Eric Cornelissen

See the Code - See it Full Page - See Details

]]>
Loading button animation 2022-12-03T11:25:04-07:00
Paragraph Styles Demo https://codepen.io/ericornelissen/pen/abdPPWO https://codepen.io/ericornelissen/pen/abdPPWO Eric Cornelissen

See the Code - See it Full Page - See Details

Simple em-based CSS rules for different paragraph styling techniques

]]>
Paragraph Styles Demo 2020-07-21T18:21:42-07:00
Fluent hovering effects with custom pointer https://codepen.io/ericornelissen/pen/ExjGozQ https://codepen.io/ericornelissen/pen/ExjGozQ Eric Cornelissen

See the Code - See it Full Page - See Details

iOS 13.4 inspired cursor pointer and button hovering effect.

]]>
Fluent hovering effects with custom pointer 2020-03-28T11:00:44-07:00
Input box with button attached https://codepen.io/ericornelissen/pen/OJPzXaW https://codepen.io/ericornelissen/pen/OJPzXaW Eric Cornelissen

See the Code - See it Full Page - See Details

Simple demonstration of how to create a input field that (seemingly) contains a button

]]>
Input box with button attached 2020-01-05T20:30:16-07:00
Bouncing letters https://codepen.io/ericornelissen/pen/VwwPbQw https://codepen.io/ericornelissen/pen/VwwPbQw Eric Cornelissen

See the Code - See it Full Page - See Details

Simple use of CSS animations to visually expand a single letter in a text. The pen makes use of CSS variables modified through JavaScript to fix the margin problem that comes with scaling the individual letters.

]]>
Bouncing letters 2020-02-18T22:15:53-07:00
CSS-only status tooltip (e.g. for "Copied!") https://codepen.io/ericornelissen/pen/zYORVje https://codepen.io/ericornelissen/pen/zYORVje Eric Cornelissen

See the Code - See it Full Page - See Details

Using only HTML and CSS this pen displays a "Copy" tooltip for a button to copy the contents of an <input> and changes the tooltip to "Copied!" (remaining visible) when clicked for a few seconds.

]]>
CSS-only status tooltip (e.g. for "Copied!") 2019-09-09T17:11:31-07:00
Exploring media queries: horizontal vs. vertical layout detection https://codepen.io/ericornelissen/pen/XvjORb https://codepen.io/ericornelissen/pen/XvjORb Eric Cornelissen

See the Code - See it Full Page - See Details

]]>
Exploring media queries: horizontal vs. vertical layout detection 2019-07-26T12:20:29-07:00
Single element counter component with animation https://codepen.io/ericornelissen/pen/JgjMBx https://codepen.io/ericornelissen/pen/JgjMBx Eric Cornelissen

See the Code - See it Full Page - See Details

]]>
Single element counter component with animation 2019-07-27T10:09:13-07:00
Exploring CSS transform and transform-origin https://codepen.io/ericornelissen/pen/agjErd https://codepen.io/ericornelissen/pen/agjErd Eric Cornelissen

See the Code - See it Full Page - See Details

]]>
Exploring CSS transform and transform-origin 2019-07-13T13:06:17-07:00
Sticky scroll progress bar https://codepen.io/ericornelissen/pen/dLzQmb https://codepen.io/ericornelissen/pen/dLzQmb Eric Cornelissen

See the Code - See it Full Page - See Details

Simple sticky scroll progress bar using HTML5 and vanilla JavaScript

]]>
Sticky scroll progress bar 2019-07-13T13:07:15-07:00