Animation experiment #10

Accessible CSS only fancy pattern rules

After I read [a blogpost](http://tkrugg.github.io/20130819/CSS-only-fancy-pattern-based-rules/) on how to style horizontal rules with generated content (`::before`) by @tkrugg, I read the comments on that article where Thomas Dobber had the following to say: > Unfortunately it would be a pain for people using screen readers: [CSS generated content and screen readers](http://www.456bereastreet.com/archive/201205/css_generated_content_and_screen_readers/). To show you can style horizontal rules

Card Swipe Animation Material Design

Card swipe animation based on this Dribbble: https://dribbble.com/shots/1721120-Keynote-animation-recreation

Material design morphing icons

Material Design Header Panel

An example of a fixed header with dynamic height and font height based on scroll position as shown in Material Design Specs. Using Skrollr

Test CSS shapes and clip-path

works in Chrome (Opera) and Safari - clip-path in Firefox works with SVG, but no shapes atm :(