Pens from Kreig Durham https://codepen.io/kreigd/ en nospam@codepen.io Copyright 2024 2022-10-19T04:13:48-07:00 Bottom Pinned Expanding Nav https://codepen.io/kreigd/pen/BaRLNyw https://codepen.io/kreigd/pen/BaRLNyw Kreig Durham

See the Code - See it Full Page - See Details

A bottom-position mobile nav that expands up over the page

]]>
Bottom Pinned Expanding Nav 2021-07-09T20:51:35-07:00
Bottom Mobile Nav https://codepen.io/kreigd/pen/YRxPgX https://codepen.io/kreigd/pen/YRxPgX Kreig Durham

See the Code - See it Full Page - See Details

A bottom-position mobile nav that expands up over the page

]]>
Bottom Mobile Nav 2018-11-16T20:01:16-07:00
Scrolling Bootstrap Card Carousel - 4 Cards per Slide https://codepen.io/kreigd/pen/OwJVPo https://codepen.io/kreigd/pen/OwJVPo Kreig Durham

See the Code - See it Full Page - See Details

Advance one item at a time, changes to one card per slide on mobile. Updated to show 4 items per slide

]]>
Scrolling Bootstrap Card Carousel - 4 Cards per Slide 2022-10-19T04:13:48-07:00
Embedded Video Background https://codepen.io/kreigd/pen/PagjRd https://codepen.io/kreigd/pen/PagjRd Kreig Durham

See the Code - See it Full Page - See Details

Use an iframe-embedded video element from YouTube, Vimeo, etc. like a background that is centered and sized as background-size: cover.

]]>
Embedded Video Background 2021-04-15T18:47:42-07:00
CSS Only Masonry Layout (No CSS Grid) https://codepen.io/kreigd/pen/KRYzdd https://codepen.io/kreigd/pen/KRYzdd Kreig Durham

See the Code - See it Full Page - See Details

A pure CSS masonry layout. Items stacking vertically first then flow to the next column, so if you need a horizontal masonry layout with lazy loading, you probably need to use masonry.js. But this method is versatile and quick to set up. Looks great in pretty much any browser, as well.

]]>
CSS Only Masonry Layout (No CSS Grid) 2019-03-15T20:57:09-07:00
Masonry JS Grid https://codepen.io/kreigd/pen/mLrgpa https://codepen.io/kreigd/pen/mLrgpa Kreig Durham

See the Code - See it Full Page - See Details

A masonry grid using the Masonry JS plugin

]]>
Masonry JS Grid 2018-05-22T20:51:26-07:00
Masonry-Like Grid Layout https://codepen.io/kreigd/pen/QmMgzP https://codepen.io/kreigd/pen/QmMgzP Kreig Durham

See the Code - See it Full Page - See Details

A CSS Grid powered image grid with a bit of a masonry style. Includes fallbacks for IE and for mobile layout. Hover effect is based on this blog post: https://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/

]]>
Masonry-Like Grid Layout 2018-04-27T18:16:17-07:00
Change Navbar Background on Scroll - Version 2 https://codepen.io/kreigd/pen/ddyBGX https://codepen.io/kreigd/pen/ddyBGX Kreig Durham

See the Code - See it Full Page - See Details

When a user scrolls, alter the CSS properties on the navbar. Also a nice transition to the CSS.

]]>
Change Navbar Background on Scroll - Version 2 2018-01-30T06:17:56-07:00
Change Navbar Background on Scroll https://codepen.io/kreigd/pen/RQwmJr https://codepen.io/kreigd/pen/RQwmJr Kreig Durham

See the Code - See it Full Page - See Details

When a user scrolls, add the "active" class with the new CSS properties on the navbar. Added a nice transition to the CSS.

]]>
Change Navbar Background on Scroll 2018-01-30T06:17:31-07:00
Dynamic Result from Form https://codepen.io/kreigd/pen/OzGeeW https://codepen.io/kreigd/pen/OzGeeW Kreig Durham

See the Code - See it Full Page - See Details

Select checkboxes and get a different output depending on your selection.

]]>
Dynamic Result from Form 2018-01-24T01:33:39-07:00