LeaVerou

// 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

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

/**
 * Testcase for SVG geometry properties in CSS.
 * Green rectangle: Pass
 * Red rectangle: Fail
 */

circle {
	r: 70%;
	cx: 50%;
	cy: 50%;

LeaVerou

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

LeaVerou

/**
 * The first commented line is your dabblet’s title
 */

div {
	width: 100px;
	height: 100px;
	display: inline-block;
	background: gray;
	margin: 10px;

LeaVerou

/**
 * Scrolling hints
 */

ul {
	display: inline-block;
	overflow: auto;
	width: 7.2em;
	height: 7em;
	border: 1px solid silver;

LeaVerou

/**
 * 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

/**
 * Cropping images in a diamond shape
 */

.diamond {
	width: 350px;
	height: 350px;
	transform: rotate(45deg);
	outline: 1px solid black;
	position: relative;

LeaVerou

/**
 * Hyphenation
 */

width: 8.7em;
font: 180%/1.4 Baskerville, serif;
text-align: justify;
hyphens: auto;

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;
}