Pens from Thomas Vaeth https://codepen.io/thomasvaeth/ en nospam@codepen.io Copyright 2024 2020-11-20T22:57:28-07:00 Redfin Homecard https://codepen.io/thomasvaeth/pen/GRqbZLq https://codepen.io/thomasvaeth/pen/GRqbZLq Thomas Vaeth

See the Code - See it Full Page - See Details

]]>
Redfin Homecard 2020-11-20T22:57:28-07:00
Full-Page Navigation https://codepen.io/thomasvaeth/pen/VwYdgxe https://codepen.io/thomasvaeth/pen/VwYdgxe Thomas Vaeth

See the Code - See it Full Page - See Details

The menu and hamburger was originally made for Art by Elina. You can see the full website at https://artbyelina.com/ and read the case study at https://thomasvaeth.com/art-by-elina/.

]]>
Full-Page Navigation 2020-01-15T18:35:44-07:00
Apple Button Extend https://codepen.io/thomasvaeth/pen/JjPLxqv https://codepen.io/thomasvaeth/pen/JjPLxqv Thomas Vaeth

See the Code - See it Full Page - See Details

A Sass extend for the gradient button on Apple's website. https://www.apple.com/ I did not make this button. I just copied what they had for others to use easily.

]]>
Apple Button Extend 2019-09-10T19:16:40-07:00
Pacific Northwest Fog https://codepen.io/thomasvaeth/pen/EevQPV https://codepen.io/thomasvaeth/pen/EevQPV Thomas Vaeth

See the Code - See it Full Page - See Details

Is summer really over already?

]]>
Pacific Northwest Fog 2018-09-05T18:51:59-07:00
CSS Grid for Getty Images https://codepen.io/thomasvaeth/pen/mjLLKO https://codepen.io/thomasvaeth/pen/mjLLKO Thomas Vaeth

See the Code - See it Full Page - See Details

Getty Images is going through a whole redesign. This is the prototype code of the new homepage that uses CSS Grid. There is a fallback for IE that uses float.

]]>
CSS Grid for Getty Images 2018-12-25T19:49:54-07:00
A Pen by Thomas Vaeth https://codepen.io/thomasvaeth/pen/VBQEvQ https://codepen.io/thomasvaeth/pen/VBQEvQ Thomas Vaeth

See the Code - See it Full Page - See Details

]]>
A Pen by Thomas Vaeth 2018-07-31T22:11:50-07:00
A Pen by Thomas Vaeth https://codepen.io/thomasvaeth/pen/LmvNqM https://codepen.io/thomasvaeth/pen/LmvNqM Thomas Vaeth

See the Code - See it Full Page - See Details

]]>
A Pen by Thomas Vaeth 2018-05-22T22:26:52-07:00
Wraparound Progress Bar https://codepen.io/thomasvaeth/pen/XZQWMW https://codepen.io/thomasvaeth/pen/XZQWMW Thomas Vaeth

See the Code - See it Full Page - See Details

A progress bar that wraps around the outside of the whole window instead of only at the top. Unfortunately this is dependent on jQuery because I could not get the elements to have 0% height/width dependent on scroll speed.

]]>
Wraparound Progress Bar 2018-03-03T04:17:42-07:00
CSS Grid Mixin with Animation https://codepen.io/thomasvaeth/pen/baVqjo https://codepen.io/thomasvaeth/pen/baVqjo Thomas Vaeth

See the Code - See it Full Page - See Details

CSS grid mixin with option to include animations per row instead of animating the whole container at once using Wow.js.

]]>
CSS Grid Mixin with Animation 2017-12-16T03:33:55-07:00
Off-white https://codepen.io/thomasvaeth/pen/wPGoBV https://codepen.io/thomasvaeth/pen/wPGoBV Thomas Vaeth

See the Code - See it Full Page - See Details

For Virgil Abloh.

]]>
Off-white 2017-11-04T05:36:26-07:00