stanwmusic

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 100 100">
        <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#00bc9b" />
                <stop offset="100%" stop-color="#5eaefd" />
            </linearGradient>
            <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#5eaefd" />
                <stop offset="100%" stop-color="#00bc9b" />
            </linearGradient>

stanwmusic

CSS Coffee Machine (Bio recharger)

I love coffee. Do you? Inspired by: http://drbl.in/hKAm. I used box-reflect for the reflection http://caniuse.com/#feat=css-reflections

A Pen by Stan Williams on CodePen.

License.

stanwmusic

Advanced CSS

Using CSS Grid, mix-blend-modes, and clip paths in order to create interested and unique designs.

A Pen by Stan Williams on CodePen.

License.

stanwmusic

Active Table of Contents

Table of contents currently browsing section highlighting using IntersectionObserver.

A Pen by Stan Williams on CodePen.

License.

stanwmusic

Absolute Centering

Perfect horizontal AND vertical centering in CSS, at any width or height!

Works with percentage based width/height, min-/max- width, images, position: fixed and even variable content heights.

Updated Aug 13: Added a comparison table, an explanation, more documentation, and a Modernizr test for variable height

Updated Aug 16: Minor corrections and clarifications

stanwmusic

<div id="albums">
  <a href="https://stanwilliams.org/sources-of-media-which-are-in-the-public-domain/" target="_blank">
    <img class="primary" src="http://k007.kiwi6.com/hotlink/aq9oct1t26/Sounds-better-Loud-Partial-mp3-image.jpg">
    <img class="secondary-1" src="http://k007.kiwi6.com/hotlink/j380mikbvp/Lake_2844x2133px-cable-cove-1_101KB.jpg">
    <img class="secondary-2" src="http://k007.kiwi6.com/hotlink/gblhe7yqi6/Lake_Cable_Cove_1440x1080px.jpg">
  </a>
</div>

stanwmusic

Follow Along Navigation

Inspired by the slick navigation on Stripe's site, this is a navigation that has a follow along background. We use JavaScript to add/remove classes to handle the toggle. Then we use getBoundingClientRect() to transform a white background as the user moves across each dropdown link.

A Pen by Stan Williams on CodePen.

License.

stanwmusic

Fractional Stars

A simple CSS/jQuery solution to create fractional star ratings with very little code.

A Pen by Stan Williams on CodePen.

License.

stanwmusic

<main>
  <header>
    <h1>Smooth Horizontal Scrolling</h1>
  </header>
<section class="content">
  
  
  <p>In the era of responsive design, often times we will have a series of card-like divs. While we may show them all on desktop, on mobile things tend to be different. What if we want to have an inner container where the user scrolls left and right to view each card? How do we achieve that?</p>
  <p>Here's a demo. There are more cards to the right that can be scrolled to.</p>
  

stanwmusic

<div style="--aspect-ratio: 16/9;">
  <iframe 
    src="https://nativelore.org"
    width="1600"
    height="900"
    frameborder="0"
  >
  </iframe>
</div>