Skip to content

Instantly share code, notes, and snippets.

View roachhd's full-sized avatar

Lachlan Seward roachhd

93 followers · 65 following
View GitHub Profile
@roachhd
roachhd / dabblet.css
Last active August 29, 2015 14:08 — forked from LeaVerou/dabblet.css
/**
* RGB plane for R=255
*/
@roachhd
roachhd / dabblet.css
Last active August 29, 2015 14:08 — forked from LeaVerou/dabblet.css
/**
* Blinking animations
*/
@keyframes blink-smooth { to { opacity: 0 } }
@keyframes blink { 50% { opacity: 0 } }
p {
animation: blink-smooth .3s 10 alternate;
background: yellow;
@roachhd
roachhd / dabblet.css
Last active August 29, 2015 14:08 — forked from LeaVerou/dabblet.css
/**
* Bouncy bouncy
*/
@keyframes foo {
60%, 80%, to { margin-top: 400px; }
70% { margin-top: 330px; animation-timing-function: ease-in; }
90% { margin-top: 370px; animation-timing-function: ease-in; }
}
@roachhd
roachhd / dabblet.css
Last active August 29, 2015 14:08 — forked from LeaVerou/dabblet.css
/**
* animation-fill-mode with non-integer animation-iteration-count
*/
@keyframes foo { to { background: black }}
body {
animation: foo 3s .4 both linear;
}
@roachhd
roachhd / dabblet.css
Last active August 29, 2015 14:08 — forked from LeaVerou/dabblet.css
/**
* Border clipping with border-image
* Support: Chrome, Opera, Safari, Firefox. Cannot get it to work in IE11, even though it supports border-image…
* Note: In CSS Backgrounds & Borders 4, there will be a property to clip borders (likely called border-clip). Until then though…
* Author: Lea Verou
*/
div {
border-top: .2em solid; /* Sets the thickness, also serves as fallback when no border-image */
border-image: 100% 0 0 linear-gradient(90deg, currentColor 5em, transparent 0); /* 5em is the width of clipped border */
@roachhd
roachhd / dabblet.css
Last active August 29, 2015 14:08 — forked from LeaVerou/dabblet.css
/**
* (C)Leanest CSS spinner ever
*/
@keyframes spin {
to { transform: rotate(1turn); }
}
.progress {
position: relative;
@roachhd
roachhd / Neutrons-loop.markdown
Last active August 29, 2015 14:08 — forked from anonymous/Neutrons-loop.markdown
@roachhd
roachhd / GSAP-JS-Bezier:-Cubic.markdown
Created October 17, 2014 03:15 — forked from anonymous/GSAP-JS-Bezier:-Cubic.markdown
@roachhd
roachhd / GSAP-JS-Bezier:-Cubic.markdown
Created October 17, 2014 03:14 — forked from anonymous/GSAP-JS-Bezier:-Cubic.markdown
@roachhd
roachhd / index.html
Created October 17, 2014 03:14 — forked from anonymous/index.html
<div class="box red"></div>
<div class="box blue"></div>
<div class="box red"></div>
<div class="box blue"></div>
<div class="box red"></div>
<div class="box blue"></div>
<div class="box red"></div>
<div class="box blue"></div>