Pens from Frida Nyvall https://codepen.io/fridanyvall/ en nospam@codepen.io Copyright 2024 2022-02-07T12:20:44-07:00 Script SVG path animation https://codepen.io/fridanyvall/pen/ExbZxmp https://codepen.io/fridanyvall/pen/ExbZxmp Frida Nyvall

See the Code - See it Full Page - See Details

SVG Path Animation for my wedding site.

]]>
Script SVG path animation 2022-02-07T12:20:44-07:00
Frosted Glass Effect with backdrop-filter blur https://codepen.io/fridanyvall/pen/PoNPJbB https://codepen.io/fridanyvall/pen/PoNPJbB Frida Nyvall

See the Code - See it Full Page - See Details

]]>
Frosted Glass Effect with backdrop-filter blur 2020-08-27T14:35:07-07:00
Fork to show how to add more pairs: Web Celebrity Memory Game https://codepen.io/fridanyvall/pen/jOWyjdB https://codepen.io/fridanyvall/pen/jOWyjdB Frida Nyvall

See the Code - See it Full Page - See Details

Memory game with web celebrities from different areas of the industry. You'll probably recognize most of them, although one or two might be less known than the others. Find them on twitter using the links at the bottom. Note: Created for fun, not tested or created for outdated browsers :P.

]]>
Fork to show how to add more pairs: Web Celebrity Memory Game 2020-06-20T09:56:47-07:00
CSS Blend Mode Example: Overlapping Text and Blending Images https://codepen.io/fridanyvall/pen/xxwQLZB https://codepen.io/fridanyvall/pen/xxwQLZB Frida Nyvall

See the Code - See it Full Page - See Details

]]>
CSS Blend Mode Example: Overlapping Text and Blending Images 2020-05-18T15:11:29-07:00
CSS Blend Mode Example: Overlapping Text https://codepen.io/fridanyvall/pen/KKdrqXN https://codepen.io/fridanyvall/pen/KKdrqXN Frida Nyvall

See the Code - See it Full Page - See Details

]]>
CSS Blend Mode Example: Overlapping Text 2020-05-18T14:32:32-07:00
CSS Blend Mode Example: Knockout Text https://codepen.io/fridanyvall/pen/KKdrqwV https://codepen.io/fridanyvall/pen/KKdrqwV Frida Nyvall

See the Code - See it Full Page - See Details

]]>
CSS Blend Mode Example: Knockout Text 2020-05-18T14:01:17-07:00
CSS Blend Mode Example: Blending Images Together https://codepen.io/fridanyvall/pen/yLYQgaV https://codepen.io/fridanyvall/pen/yLYQgaV Frida Nyvall

See the Code - See it Full Page - See Details

]]>
CSS Blend Mode Example: Blending Images Together 2020-05-18T14:36:45-07:00
CSS Blend Mode Example: Tinting an Image https://codepen.io/fridanyvall/pen/dyYQNyK https://codepen.io/fridanyvall/pen/dyYQNyK Frida Nyvall

See the Code - See it Full Page - See Details

]]>
CSS Blend Mode Example: Tinting an Image 2020-05-19T11:02:50-07:00
Fighting the Flying Footer with margins https://codepen.io/fridanyvall/pen/LqKjJX https://codepen.io/fridanyvall/pen/LqKjJX Frida Nyvall

See the Code - See it Full Page - See Details

Position the footer at the bottom of the page using margins. For situations when the footer height is known and will not change, and you need to support old browsers.

]]>
Fighting the Flying Footer with margins 2019-03-05T14:21:03-07:00
Fighting the Flying Footer with vh units https://codepen.io/fridanyvall/pen/omreYy https://codepen.io/fridanyvall/pen/omreYy Frida Nyvall

See the Code - See it Full Page - See Details

Position the footer at the bottom of the page using vh units. Applicable when the minimum footer height is decided, and you need support down to IE9.

]]>
Fighting the Flying Footer with vh units 2019-03-05T14:20:54-07:00