Pens from Niels Oeltjen https://codepen.io/NielsOeltjen/ en nospam@codepen.io Copyright 2024 2022-11-28T06:07:12-07:00 Perfect barber-pole stripes loading animation https://codepen.io/NielsOeltjen/pen/RwJJmjG https://codepen.io/NielsOeltjen/pen/RwJJmjG Niels Oeltjen

See the Code - See it Full Page - See Details

You might have seen other techniques for barber-pole stripes that use linear gradients. The problem with those is they are scaled to the size of the containing element so that a small element will have tighter stripes than a larger one. This approach avoids the scaling.

]]>
Perfect barber-pole stripes loading animation 2022-11-28T06:07:12-07:00
Maths fun with checkers and Vue https://codepen.io/NielsOeltjen/pen/oNzqQoV https://codepen.io/NielsOeltjen/pen/oNzqQoV Niels Oeltjen

See the Code - See it Full Page - See Details

]]>
Maths fun with checkers and Vue 2021-01-04T07:05:23-07:00
Swatch pie https://codepen.io/NielsOeltjen/pen/dyGgQjO https://codepen.io/NielsOeltjen/pen/dyGgQjO Niels Oeltjen

See the Code - See it Full Page - See Details

A nice way to represent a swatch when multiple colours are selected Turn some colours on to see the how the swatch icon responds

]]>
Swatch pie 2020-07-17T05:20:05-07:00
Simple CSS method to fade out adjacent links in a nav on hover https://codepen.io/NielsOeltjen/pen/LYVBWBE https://codepen.io/NielsOeltjen/pen/LYVBWBE Niels Oeltjen

See the Code - See it Full Page - See Details

]]>
Simple CSS method to fade out adjacent links in a nav on hover 2020-03-19T23:50:12-07:00
Stylish nav https://codepen.io/NielsOeltjen/pen/bGdrdLx https://codepen.io/NielsOeltjen/pen/bGdrdLx Niels Oeltjen

See the Code - See it Full Page - See Details

]]>
Stylish nav 2020-03-03T01:09:45-07:00
Fun nav https://codepen.io/NielsOeltjen/pen/WNbymzW https://codepen.io/NielsOeltjen/pen/WNbymzW Niels Oeltjen

See the Code - See it Full Page - See Details

]]>
Fun nav 2021-03-23T02:41:07-07:00
Note styling https://codepen.io/NielsOeltjen/pen/bGNoZma https://codepen.io/NielsOeltjen/pen/bGNoZma Niels Oeltjen

See the Code - See it Full Page - See Details

]]>
Note styling 2021-03-23T02:40:35-07:00
Modern dot leaders using flexbox https://codepen.io/NielsOeltjen/pen/povwmLa https://codepen.io/NielsOeltjen/pen/povwmLa Niels Oeltjen

See the Code - See it Full Page - See Details

Using flexbox to implement dot leaders on a <table>. Note the dots don’t crop, but truncate.

]]>
Modern dot leaders using flexbox 2022-07-01T04:46:37-07:00
Truncate multi-line text with CSS https://codepen.io/NielsOeltjen/pen/jOEBwWj https://codepen.io/NielsOeltjen/pen/jOEBwWj Niels Oeltjen

See the Code - See it Full Page - See Details

Truncate multi-line text with ellipses on the last line using webkit prefixes (fairly widely supported)

]]>
Truncate multi-line text with CSS 2019-12-19T23:54:39-07:00
Nav with equal-length lines between items https://codepen.io/NielsOeltjen/pen/OJPMymO https://codepen.io/NielsOeltjen/pen/OJPMymO Niels Oeltjen

See the Code - See it Full Page - See Details

This nav style uses some flexbox hackery to create equal-length lines between the elements for a sweet-as spaced looked

]]>
Nav with equal-length lines between items 2019-12-09T03:13:05-07:00