Lea Verou LeaVerou

## detect_custom_elements.js
// 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('-');

## colorNotebook.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                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;

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

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

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

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

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

## dabblet.css
/**
 * Scrolling hints
 */

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

## dabblet.css
/**
 * 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;

## dabblet.css
/**
 * Cropping images in a diamond shape
 */

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

## dabblet.css
/**
 * Hyphenation
 */

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

## dabblet.css
/**
 * 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;
}
	// 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('-');
	/**
	* Testcase for SVG geometry properties in CSS.
	* Green rectangle: Pass
	* Red rectangle: Fail
	*/

	circle {
	r: 70%;
	cx: 50%;
	cy: 50%;
	// Use Gists to store code you would like to remember later on
	console.log(window); // log the "window" object to the console
	/**
	* The first commented line is your dabblet’s title
	*/

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

	ul {
	display: inline-block;
	overflow: auto;
	width: 7.2em;
	height: 7em;
	border: 1px solid silver;
	/**
	* 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;
	/**
	* Cropping images in a diamond shape
	*/

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

	width: 8.7em;
	font: 180%/1.4 Baskerville, serif;
	text-align: justify;
	hyphens: auto;
	/**
	* 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;
	}