Oceanic Overlays 🌊| CSS-only carousel | @keyframers 1.7.0 | Collaborative coding live stream

This week, David Khourshid and Stephen Shaw save the oceans using only CSS! Follow along as they toggle, slide and clip to create an inspiring page design. Streamed live on May 24, 2018.

Shownotes:

Animation Inspiration:
https://dribbble.com/shots/4592180-Sa...
Final code: https://codepen.io/shshaw/pen/RyzaYY/

Skip around:
2:20 Showcase
6:35 Animation overview
10:38 Start coding
49:00 Puns
1:41:00 Keyflections


Additional Resources:

CSS Mask animation https://codepen.io/shshaw/pen/NMeXoN
Encroachment (CSS-only) https://codepen.io/shshaw/pen/OZGMKq/
Overriding Default Button Styles https://css-tricks.com/overriding-def...
CSS-only Colorful Calendar Concept https://codepen.io/davidkpiano/pen/xw...

Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!

Like & Subscribe on YouTube
Spread the word! A Tweet about @keyframers is worth a thousand chars.
Follow & Subscribe on Twitch and join the live streams at   / keyframers  
Support us on Patreon at   / keyframers   !

Topics covered:

Checkbox toggles
CSS Variables
background-clip: text