Skip to content

Instantly share code, notes, and snippets.

@csssecrets
csssecrets / dabblet.css
Created January 28, 2015 18:15 — forked from LeaVerou/dabblet.css
Static interpolation via paused animations
/**
* Static interpolation via paused animations
* This technique becomes more useful if you need to interpolate more than 1 properties, and/or if you need multiple values in the spectrum
* Currently works in every modern browser except Safari
*/
@keyframes foo {
from { background: red }
to { background: yellowgreen }
}
@csssecrets
csssecrets / dabblet.css
Last active September 19, 2021 12:24 — forked from LeaVerou/dabblet.css
Trapezoid tabs
/**
* Trapezoid tabs
*/
body {
padding: 40px;
font: 130%/2 Frutiger LT Std, sans-serif;
}
nav {
@csssecrets
csssecrets / dabblet.css
Last active October 15, 2021 22:55 — forked from LeaVerou/dabblet.css
Test: color stops with two locations
/**
* Test: color stops with two locations
* PASS if green stripes, FAIL if red
*/
background: red;
background: repeating-linear-gradient(-45deg, limegreen 0 20px, green 20px 60px);
min-height: 100%;
@csssecrets
csssecrets / dabblet.css
Last active July 31, 2023 01:14 — forked from LeaVerou/dabblet.css
Interactive image comparison - with CSS resize
/**
* Interactive image comparison - with CSS resize
*/
.image-slider {
position:relative;
display: inline-block;
}
.image-slider > div {