Pens from Bram de Haan https://codepen.io/atelierbram/ en nospam@codepen.io Copyright 2024 2022-12-30T13:39:18-07:00 JavaScript Slideshow With Controls https://codepen.io/atelierbram/pen/BaPKVBp https://codepen.io/atelierbram/pen/BaPKVBp Bram de Haan

See the Code - See it Full Page - See Details

Forked from [Yaphi](http://codepen.io/yaphi1/)'s Pen [Basic JavaScript Slideshow without jQuery](http://codepen.io/yaphi1/pen/PNOZRr/).

]]>
JavaScript Slideshow With Controls 2022-12-30T13:39:18-07:00
Accessible Range Inputs https://codepen.io/atelierbram/pen/ExWKabL https://codepen.io/atelierbram/pen/ExWKabL Bram de Haan

See the Code - See it Full Page - See Details

Some more exciting form elements, accessible to keyboard and screen readers

]]>
Accessible Range Inputs 2021-05-13T17:43:13-07:00
Background Noise https://codepen.io/atelierbram/pen/RwoQOvm https://codepen.io/atelierbram/pen/RwoQOvm Bram de Haan

See the Code - See it Full Page - See Details

]]>
Background Noise 2021-02-27T09:16:33-07:00
Sticky Header with RequestAnimationFrame https://codepen.io/atelierbram/pen/xxRqpWd https://codepen.io/atelierbram/pen/xxRqpWd Bram de Haan

See the Code - See it Full Page - See Details

]]>
Sticky Header with RequestAnimationFrame 2021-02-15T19:38:37-07:00
Using CSS Custom attributes generated by JavaScript as a handover mechanism https://codepen.io/atelierbram/pen/jOMERxz https://codepen.io/atelierbram/pen/jOMERxz Bram de Haan

See the Code - See it Full Page - See Details

Straight fork of demo by Christian Heilmann - [christianheilmann.com/2019/07/29/using-css-custom-attributes-generated-by-javascript-as-a-handover-mechanism/](https://christianheilmann.com/2019/07/29/using-css-custom-attributes-generated-by-javascript-as-a-handover-mechanism/) - [jsbin.com/siheyuc/5/](https://jsbin.com/siheyuc/5/edit?html,css,js,output) -

]]>
Using CSS Custom attributes generated by JavaScript as a handover mechanism 2020-11-30T05:45:46-07:00
Vanilla JS Carousel https://codepen.io/atelierbram/pen/NWxRWOX https://codepen.io/atelierbram/pen/NWxRWOX Bram de Haan

See the Code - See it Full Page - See Details

]]>
Vanilla JS Carousel 2020-06-15T11:25:12-07:00
Pinstripe Background Image in SVG https://codepen.io/atelierbram/pen/NWqxJOW https://codepen.io/atelierbram/pen/NWqxJOW Bram de Haan

See the Code - See it Full Page - See Details

]]>
Pinstripe Background Image in SVG 2020-02-14T20:02:17-07:00
Toggle Switch for Dark Mode https://codepen.io/atelierbram/pen/oNgRyPb https://codepen.io/atelierbram/pen/oNgRyPb Bram de Haan

See the Code - See it Full Page - See Details

]]>
Toggle Switch for Dark Mode 2020-02-02T14:06:22-07:00
Layout with Two Columns Inside One Parent Container https://codepen.io/atelierbram/pen/oNgoXeM https://codepen.io/atelierbram/pen/oNgoXeM Bram de Haan

See the Code - See it Full Page - See Details

[grid-auto-flow](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-auto-flow) ```css grid-auto-flow: column; /* tells the auto-placement algorithm to fill in each column in turn, adding new columns as necessary */ ```

]]>
Layout with Two Columns Inside One Parent Container 2020-05-29T11:16:44-07:00
CSS Range Slider https://codepen.io/atelierbram/pen/wvBJWMN https://codepen.io/atelierbram/pen/wvBJWMN Bram de Haan

See the Code - See it Full Page - See Details

Styling an input range slider with pure CSS. JS only to grab the value.

]]>
CSS Range Slider 2019-12-19T18:41:24-07:00