Skip to content

Instantly share code, notes, and snippets.

View LeaVerou's full-sized avatar

Lea Verou LeaVerou

15.4k followers · 31 following
View GitHub Profile
@LeaVerou
LeaVerou / dabblet.css
Created April 22, 2012 09:19 — forked from kizu/dabblet.css
Scrolling shadows by @kizmarh and @LeaVerou
/**
* Scrolling shadows by @kizmarh and @leaverou
* Only works in browsers supporting background-attachment: local; & CSS gradients
* Degrades gracefully
*/
html {
background: white;
font: 120% sans-serif;
}
@LeaVerou
LeaVerou / detect_custom_elements.js
Last active April 21, 2022 21:02 — forked from ebidel/highlight_custom_elements.js
Get a list of custom elements used on a page
// Highlights all custom elements on the page.
// 7/31/2016: updated to work with both shadow dom v0 and v1.
// To create a bookmarklet, use http://ted.mielczarek.org/code/mozilla/bookmarklet.html
var allCustomElements = [];
function isCustomElement(el) {
const isAttr = el.getAttribute('is');
// Check for <super-button> and <button is="super-button">.
return el.localName.includes('-') || isAttr && isAttr.includes('-');
@LeaVerou
LeaVerou / colorNotebook.md
Last active July 16, 2020 00:30 — forked from svgeesus/colorNotebook.md

Title

let color = new Color("srgb", [0, 1, 1]);
let color2 = color.to("lch");
color2.chroma = 5;
color2.toGamut({space: "srgb", inPlace: true});
color.lab;
color2.lab;
@LeaVerou
LeaVerou / dabblet.css
Created June 9, 2016 15:43 — forked from anonymous/dabblet.css
Testcase for SVG geometry properties in CSS.
/**
* Testcase for SVG geometry properties in CSS.
* Green rectangle: Pass
* Red rectangle: Fail
*/
circle {
r: 70%;
cx: 50%;
cy: 50%;
@LeaVerou
LeaVerou / 0_reuse_code.js
Created February 4, 2016 23:59
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
@LeaVerou
LeaVerou / dabblet.css
Created February 28, 2012 10:46 — forked from ZeeAgency/dabblet.css
Untitled
div {
width: 400px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/animals/1/");
background-repeat: no-repeat;
transition: all 0.5s;
}
div:hover {
background-image: url("http://lorempixel.com/400/200/animals/2/");
transition: all 0.5s;
@LeaVerou
LeaVerou / dabblet.css
Created February 28, 2012 10:46 — forked from ZeeAgency/dabblet.css
Untitled
div {
width: 400px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/animals/1/");
background-repeat: no-repeat;
transition: all 0.5s;
}
div:hover {
background-image: url("http://lorempixel.com/400/200/animals/2/");
transition: all 0.5s;
@LeaVerou
LeaVerou / dabblet.css
Created February 28, 2012 10:48 — forked from ZeeAgency/dabblet.css
cross-fade testcase
/* cross-fade testcase */
div {
width: 400px;
height: 200px;
background-image: -moz-cross-fade(url("http://lorempixel.com/400/200/animals/1/"), url("http://lorempixel.com/400/200/animals/2/"), 50%);
background-image: -ms-cross-fade(url("http://lorempixel.com/400/200/animals/1/"), url("http://lorempixel.com/400/200/animals/2/"), 50%);
background-image: -o-cross-fade(url("http://lorempixel.com/400/200/animals/1/"), url("http://lorempixel.com/400/200/animals/2/"), 50%);
background-image: -webkit-cross-fade(url("http://lorempixel.com/400/200/animals/1/"), url("http://lorempixel.com/400/200/animals/2/"), 50%);
background-image: cross-fade(url("http://lorempixel.com/400/200/animals/1/"), url("http://lorempixel.com/400/200/animals/2/"), 50%);
@LeaVerou
LeaVerou / dabblet.css
Created February 28, 2012 10:45 — forked from ZeeAgency/dabblet.css
Untitled
div {
width: 400px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/animals/1/");
background-repeat: no-repeat;
transition: all 0.5s;
}
div:hover {
background-image: url("http://lorempixel.com/400/200/animals/2/");
transition: all 0.5s;
@LeaVerou
LeaVerou / dabblet.css
Created February 28, 2012 10:46 — forked from ZeeAgency/dabblet.css
Untitled
div {
width: 400px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/animals/1/");
background-repeat: no-repeat;
transition: all 0.5s;
}
div:hover {
background-image: url("http://lorempixel.com/400/200/animals/2/");
transition: all 0.5s;