Skip to content

Instantly share code, notes, and snippets.

🏠
Working from home

Stan Williams stanwmusic

🏠
Working from home
Block or report user

Report or block stanwmusic

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View index.html
<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>
View css-coffee-machine-bio-recharger.markdown
View advanced-css.markdown

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.

View active-table-of-contents.markdown

Active Table of Contents

Table of contents currently browsing section highlighting using IntersectionObserver.

A Pen by Stan Williams on CodePen.

License.

View absolute-centering.markdown

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
stanwmusic / index.html
Created Feb 5, 2020
Stack of Photos Animation
View index.html
<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>
View follow-along-navigation.markdown

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.

View fractional-stars.markdown
@stanwmusic
stanwmusic / index.html
Created Feb 5, 2020
Smooth Horizontal Scrolling
View index.html
<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
stanwmusic / index.html
Created Jan 19, 2020
Responsive Iframe
View index.html
<div style="--aspect-ratio: 16/9;">
<iframe
src="https://nativelore.org"
width="1600"
height="900"
frameborder="0"
>
</iframe>
</div>
You can’t perform that action at this time.