Skip to content

Instantly share code, notes, and snippets.

View LeaVerou's full-sized avatar
💭
Unavailable until Aug 30 (and after that I’ll be taking a break)

Lea Verou LeaVerou

💭
Unavailable until Aug 30 (and after that I’ll be taking a break)
View GitHub Profile
@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('-');

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
Last active August 29, 2015 14:16 — forked from anonymous/dabblet.css
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
div {
width: 100px;
height: 100px;
display: inline-block;
background: gray;
margin: 10px;
@LeaVerou
LeaVerou / dabblet.css
Created February 14, 2015 07:36 — forked from csssecrets/dabblet.css
Scrolling hints
/**
* Scrolling hints
*/
ul {
display: inline-block;
overflow: auto;
width: 7.2em;
height: 7em;
border: 1px solid silver;
@LeaVerou
LeaVerou / dabblet.css
Created January 19, 2015 04:29 — forked from csssecrets/dabblet.css
Patterned borders
/**
* Patterned borders
*/
div {
max-width: 20em;
padding: 1em;
border: 1em solid rgba(0,0,0,.1);
background: repeating-linear-gradient(-45deg, blue 0, blue 1em, transparent 0, transparent 3em),
repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 3em) 2.2em 0;
@LeaVerou
LeaVerou / dabblet.css
Created November 13, 2014 18:45 — forked from csssecrets/dabblet.css
Cropping images in a diamond shape
/**
* Cropping images in a diamond shape
*/
.diamond {
width: 350px;
height: 350px;
transform: rotate(45deg);
outline: 1px solid black;
position: relative;
@LeaVerou
LeaVerou / dabblet.css
Created July 31, 2014 21:25 — forked from csssecrets/dabblet.css
Hyphenation
/**
* Hyphenation
*/
width: 8.7em;
font: 180%/1.4 Baskerville, serif;
text-align: justify;
hyphens: auto;
@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;
}