Jester
House of LeaVerou

LeaVerou's hand

The top 100 gists by star count
A♦
vunits.js★ 81

Static polyfill for vw, vh, vm units

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Polyfill for the vw, vh, vm units
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Requires StyleFix from -prefix-free http://leaverou.github.com/prefixfree/
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * @author Lea Verou
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

(function() {

if(!window.StyleFix) {
	return;
}
A♦
K♣
dabblet.css★ 31

Vertical centering with Flexbox + margin fallback

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Vertical centering with Flexbox + margin fallback
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Lea Verou & David Storey
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html, body { height: class="_tkNum_1klyn_175">100%; }

body {
	width: class="_tkNum_1klyn_175">100%; class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* needed for FF */
	margin: class="_tkNum_1klyn_175">0;
	
	class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* Flexbox hawtness */
K♣
Q♥
dabblet.css★ 17

Scrolling shadows by @kizmarh and @leaverou

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Scrolling shadows by @kizmarh and @leaverou
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Only works in browsers supporting background-attachment: local; & CSS gradients
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Degrades gracefully
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html {
	background: white;
	font: class="_tkNum_1klyn_175">120% sans-serif;
}

.scrollbox {
Q♥
J♠
dabblet.css★ 6

Move in a circle without wrapper elements

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Move in a circle without wrapper elements
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Idea by Aryeh Gregor, simplified by Lea Verou
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

@keyframes rot {
	from {
		transform: rotate(0deg)
		           translate(-150px)
		           rotate(0deg);
	}
	to {
J♠
10♦
dabblet.css★ 5

Typing animation with pure CSS. 

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Typing animation with pure CSS. 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Works best in browsers supporting the ch unit.
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

@keyframes typing { from { width: class="_tkNum_1klyn_175">0; } }
@keyframes blink-caret { class="_tkNum_1klyn_175">50% { border-color: transparent; } }

h1 { 
	font: bold class="_tkNum_1klyn_175">200% Consolas, Monaco, monospace;
	border-right: .1em solid;
	width: class="_tkNum_1klyn_175">16.5em; class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* fallback */
10♦
9♣
dabblet.css★ 4

Lined paper that follows the text


/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Lined paper that follows the text
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Support: Chrome, FF class="_tkNum_1klyn_175">3.6+, Saf class="_tkNum_1klyn_175">5.1+, Opera class="_tkNum_1klyn_175">11.50+, IE10
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* Just decorative */
padding: 20px;

/* The font. Try changing font-size and see how the lines
   still follow the text */
font: italic class="_tkNum_1klyn_175">200%/class="_tkNum_1klyn_175">1.5 Baskerville, class="_tkStr_1klyn_166">"Palatino Linotype", serif;
9♣
8♥
dabblet.css★ 3

TV screen

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * TV screen
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html { background: white; }

.tv {
	position: relative;
	width: 200px;
	height: 150px;
	margin: 100px auto class="_tkNum_1klyn_175">0;
	background: black;
8♥
7♠
dabblet.css★ 2

Flexible multiline definition lists with 2 lines of CSS

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Flexible multiline definition lists with class="_tkNum_1klyn_175">2 lines of CSS
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

dt, dd { display: inline; margin: class="_tkNum_1klyn_175">0; }

dd:after {
	content: class="_tkStr_1klyn_166">'\A';
	white-space: pre;
}
7♠
6♦
markup.html★ 1

Illustrating correct & wrong inner border-radius

<div class=class="_tkStr_1klyn_166">"outer right"><div>This</div></div>
<div class=class="_tkStr_1klyn_166">"outer wrong"><div>NOT this</div></div>
6♦
5♣
dabblet.css★ 1

Previewer test

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Previewer test
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: #f06;
background: linear-gradient(left bottom, 
	    hsla(class="_tkNum_1klyn_175">340, class="_tkNum_1klyn_175">100%, class="_tkNum_1klyn_175">50%,.class="_tkNum_1klyn_175">7), yellow);
background: url(http:class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">//placekitten.com/class="_tkNum_1klyn_175">330/class="_tkNum_1klyn_175">340);
content: class="_tkStr_1klyn_166">'\class="_tkNum_1klyn_175">2665';
min-width: 100px;
width: 2in;
transition-duration: 6s;
5♣
4♥
dabblet.css★ 1

Seigaiha

background-color:silver;
background-image: 
	radial-gradient(class="_tkNum_1klyn_175">100% class="_tkNum_1klyn_175">150%, circle, silver class="_tkNum_1klyn_175">24%, white class="_tkNum_1klyn_175">25%, white class="_tkNum_1klyn_175">28%, silver class="_tkNum_1klyn_175">29%, silver class="_tkNum_1klyn_175">36%, white class="_tkNum_1klyn_175">36%, white class="_tkNum_1klyn_175">40%, transparent class="_tkNum_1klyn_175">40%, transparent),
	radial-gradient(class="_tkNum_1klyn_175">0    class="_tkNum_1klyn_175">150%, circle, silver class="_tkNum_1klyn_175">24%, white class="_tkNum_1klyn_175">25%, white class="_tkNum_1klyn_175">28%, silver class="_tkNum_1klyn_175">29%, silver class="_tkNum_1klyn_175">36%, white class="_tkNum_1klyn_175">36%, white class="_tkNum_1klyn_175">40%, transparent class="_tkNum_1klyn_175">40%, transparent),
	radial-gradient(class="_tkNum_1klyn_175">50%  class="_tkNum_1klyn_175">100%, circle, white class="_tkNum_1klyn_175">10%, silver class="_tkNum_1klyn_175">11%, silver class="_tkNum_1klyn_175">23%, white class="_tkNum_1klyn_175">24%, white class="_tkNum_1klyn_175">30%, silver class="_tkNum_1klyn_175">31%, silver class="_tkNum_1klyn_175">43%, white class="_tkNum_1klyn_175">44%, white class="_tkNum_1klyn_175">50%, silver class="_tkNum_1klyn_175">51%, silver class="_tkNum_1klyn_175">63%, white class="_tkNum_1klyn_175">64%, white class="_tkNum_1klyn_175">71%, transparent class="_tkNum_1klyn_175">71%, transparent),
	radial-gradient(class="_tkNum_1klyn_175">100% class="_tkNum_1klyn_175">50%,  circle, white class="_tkNum_1klyn_175">5%, silver class="_tkNum_1klyn_175">6%, silver class="_tkNum_1klyn_175">15%, white class="_tkNum_1klyn_175">16%, white class="_tkNum_1klyn_175">20%, silver class="_tkNum_1klyn_175">21%, silver class="_tkNum_1klyn_175">30%, white class="_tkNum_1klyn_175">31%, white class="_tkNum_1klyn_175">35%, silver class="_tkNum_1klyn_175">36%, silver class="_tkNum_1klyn_175">45%, white class="_tkNum_1klyn_175">46%, white class="_tkNum_1klyn_175">49%, transparent class="_tkNum_1klyn_175">50%, transparent),
	radial-gradient(class="_tkNum_1klyn_175">0    class="_tkNum_1klyn_175">50%,  circle, white class="_tkNum_1klyn_175">5%, silver class="_tkNum_1klyn_175">6%, silver class="_tkNum_1klyn_175">15%, white class="_tkNum_1klyn_175">16%, white class="_tkNum_1klyn_175">20%, silver class="_tkNum_1klyn_175">21%, silver class="_tkNum_1klyn_175">30%, white class="_tkNum_1klyn_175">31%, white class="_tkNum_1klyn_175">35%, silver class="_tkNum_1klyn_175">36%, silver class="_tkNum_1klyn_175">45%, white class="_tkNum_1klyn_175">46%, white class="_tkNum_1klyn_175">49%, transparent class="_tkNum_1klyn_175">50%, transparent);
background-size:class="_tkNum_1klyn_175">10
4♥
3♠
dabblet.css★ 1

Japanese cube pattern */

class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* Japanese cube pattern */

background-color:#class="_tkNum_1klyn_175">556;
background-image: linear-gradient(60deg, #class="_tkNum_1klyn_175">445 class="_tkNum_1klyn_175">12%, transparent class="_tkNum_1klyn_175">12.5%, transparent class="_tkNum_1klyn_175">87%, #class="_tkNum_1klyn_175">445 class="_tkNum_1klyn_175">87.5%, #class="_tkNum_1klyn_175">445),
    linear-gradient(-60deg, #class="_tkNum_1klyn_175">445 class="_tkNum_1klyn_175">12%, transparent class="_tkNum_1klyn_175">12.5%, transparent class="_tkNum_1klyn_175">87%, #class="_tkNum_1klyn_175">445 class="_tkNum_1klyn_175">87.5%, #class="_tkNum_1klyn_175">445),
    linear-gradient(60deg, #class="_tkNum_1klyn_175">445 class="_tkNum_1klyn_175">12%, transparent class="_tkNum_1klyn_175">12.5%, transparent class="_tkNum_1klyn_175">87%, #class="_tkNum_1klyn_175">445 class="_tkNum_1klyn_175">87.5%, #class="_tkNum_1klyn_175">445),
    linear-gradient(-60deg, #class="_tkNum_1klyn_175">445 class="_tkNum_1klyn_175">12%, transparent class="_tkNum_1klyn_175">12.5%, transparent class="_tkNum_1klyn_175">87%, #class="_tkNum_1klyn_175">445 class="_tkNum_1klyn_175">87.5%, #class="_tkNum_1klyn_175">445),
    linear-gradient(30deg, #99a class="_tkNum_1klyn_175">25%, transparent class="_tkNum_1klyn_175">25.5%, transparent class="_tkNum_1klyn_175">75%, #99a class="_tkNum_1klyn_175">75%, #99a), 
    linear-gradient(30deg, #99a class="_tkNum_1klyn_175">25%, transparent class="_tkNum_1klyn_175">25.5%, transparent class="_tkNum_1klyn_175">75%, #99a class="_tkNum_1klyn_175">75%, #99a);
background-size:80px 140px;
background-position: class="_tkNum_1klyn_175">0 class="_tkNum_1klyn_175">0, class="_tkNum_1klyn_175">0 class="_tkNum_1klyn_175">0, 40px 70px, 40px 70px, class="_tkNum_1klyn_175">0 class="_tkNum_1klyn_175">0, 40px 70px;
height:class="_tkNum_1klyn_175">100%;
3♠
2♦
dabblet.css★ 1

Polka dot pattern

/** 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Polka dot pattern
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: radial-gradient(circle, white class="_tkNum_1klyn_175">10%, transparent class="_tkNum_1klyn_175">10%),
  radial-gradient(circle, white class="_tkNum_1klyn_175">10%, black class="_tkNum_1klyn_175">10%) 50px 50px;
background-size:100px 100px;
2♦
A♦
dabblet.css★ 1

Checkerboard pattern

/** 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Checkerboard pattern
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * (a bit buggy in Webkit, see bug #class="_tkNum_1klyn_175">54615)
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background-color: white;
background-image: linear-gradient(45deg, black class="_tkNum_1klyn_175">25%, transparent class="_tkNum_1klyn_175">25%, transparent class="_tkNum_1klyn_175">75%, black class="_tkNum_1klyn_175">75%, black), 
    linear-gradient(45deg, black class="_tkNum_1klyn_175">25%, transparent class="_tkNum_1klyn_175">25%, transparent class="_tkNum_1klyn_175">75%, black class="_tkNum_1klyn_175">75%, black);
background-size:100px 100px;
background-position: class="_tkNum_1klyn_175">0 class="_tkNum_1klyn_175">0, 50px 50px;
A♦
K♣
dabblet.css★ 1

box-shadow vs drop-shadow

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * box-shadow vs drop-shadow
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

div {
	position: relative;
	width: 150px;
	padding: 20px;
	border: 5px dotted;
	border-radius: 20px;
	margin: 60px;
K♣
Q♥
dabblet.css★ 1

cross-fade testcase 

class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* cross-fade testcase */

div {
	width: 400px;
	height: 200px;
	background-image: -moz-cross-fade(url(class="_tkStr_1klyn_166">"http:class="_tkCom_1klyn_170class="_tkStr_1klyn_166">">//lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">1/"), url(class="_tkStr_1klyn_166">"http://lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">2/"), class="_tkNum_1klyn_175">50%);
	background-image: -ms-cross-fade(url(class="_tkStr_1klyn_166">"http:class="_tkCom_1klyn_170class="_tkStr_1klyn_166">">//lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">1/"), url(class="_tkStr_1klyn_166">"http://lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">2/"), class="_tkNum_1klyn_175">50%);
	background-image: -o-cross-fade(url(class="_tkStr_1klyn_166">"http:class="_tkCom_1klyn_170class="_tkStr_1klyn_166">">//lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">1/"), url(class="_tkStr_1klyn_166">"http://lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">2/"), class="_tkNum_1klyn_175">50%);
	background-image: -webkit-cross-fade(url(class="_tkStr_1klyn_166">"http:class="_tkCom_1klyn_170class="_tkStr_1klyn_166">">//lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">1/"), url(class="_tkStr_1klyn_166">"http://lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">2/"), class="_tkNum_1klyn_175">50%);
	background-image: cross-fade(url(class="_tkStr_1klyn_166">"http:class="_tkCom_1klyn_170class="_tkStr_1klyn_166">">//lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">1/"), url(class="_tkStr_1klyn_166">"http://lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">2/"), class="_tkNum_1klyn_175">50%);
	background-repeat: no-repeat;
}
Q♥
J♠
dabblet.css★ 1

White space collapsing playground

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * White space collapsing playground
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

div {
	display: inline-block;
	width: 50px; height: 50px; 
	background: gold;
}
J♠
10♦
dabblet.css★ 1

Image interpolation demo

/* Image interpolation demo
   WebKit-only at the time (April class="_tkNum_1klyn_175">2012)
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

@keyframes browsers {
	class="_tkNum_1klyn_175">20% { background-image: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//lea.verou.me/css-4d/img/chrome-logo.png'); }
	class="_tkNum_1klyn_175">40% { background-image: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//lea.verou.me/css-4d/img/safari-logo.png'); }
	class="_tkNum_1klyn_175">60% { background-image: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//lea.verou.me/css-4d/img/opera-logo.png'); }
	class="_tkNum_1klyn_175">80% { background-image: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//lea.verou.me/css-4d/img/ie-logo.png'); }
}

html {
10♦
9♣
dabblet.css★ 1

Magic corners in gradients!

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Magic corners in gradients!
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */


background: linear-gradient(to bottom right, 
transparent class="_tkNum_1klyn_175">49.9%, red class="_tkNum_1klyn_175">0, red class="_tkNum_1klyn_175">50.1%, transparent class="_tkNum_1klyn_175">0, transparent),
linear-gradient(to bottom left, 
transparent class="_tkNum_1klyn_175">49.9%, red class="_tkNum_1klyn_175">0, red class="_tkNum_1klyn_175">50.1%, transparent class="_tkNum_1klyn_175">0, transparent);
min-height: class="_tkNum_1klyn_175">100%;
9♣
8♥
dabblet.css★ 1

Playing with background-attachment

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Playing with background-attachment
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

pre {
	max-height: 150px;
	border: 1px solid silver;
	overflow: auto;
	background: url(class="_tkStr_1klyn_166">'https:class="_tkCom_1klyn_170">//placecats.com/class="_tkNum_1klyn_175">200/class="_tkNum_1klyn_175">200');
	color: white;
	text-shadow: class="_tkNum_1klyn_175">0 -.1em .1em black;
}
8♥
7♠
dabblet.css★ 1

Text masking — The SVG way

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Text masking — The SVG way
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

svg {
	width: 6em; height: class="_tkNum_1klyn_175">1.5em;
	font: class="_tkNum_1klyn_175">900 class="_tkNum_1klyn_175">500%/class="_tkNum_1klyn_175">1.2 class="_tkStr_1klyn_166">'Arial Black', sans-serif;
}

text { fill: url(#wood); }
7♠
6♦
dabblet.css★ 1

Weird behavior when combining opacity & z-index: -1

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Weird behavior when combining opacity & z-index: -class="_tkNum_1klyn_175">1
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

div {
	position: relative;
	width: 200px; height: 200px;
	background: yellowgreen;
	
	class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* Try commenting this or setting it to class="_tkNum_1klyn_175">1: */
	opacity: .class="_tkNum_1klyn_175">9;
}
6♦
5♣
dabblet.css★ 1

Transforms & regular CSS properties

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Transforms & regular CSS properties
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

@keyframes subpixel-mess {
	to {
		top: 100px;
		transform: translateY(class="_tkNum_1klyn_175">0)
	}
}

div {
5♣
4♥
gistfile1.txt★ 0

Improved ZenCocoon's pattern

background: 
  linear-gradient(63deg, #class="_tkNum_1klyn_175">131313 5px, transparent 5px) class="_tkNum_1klyn_175">0 5px,
  linear-gradient(243deg, #class="_tkNum_1klyn_175">131313 5px, transparent 5px) 10px class="_tkNum_1klyn_175">0,
  linear-gradient(63deg, #class="_tkNum_1klyn_175">242424 5px, transparent 5px) class="_tkNum_1klyn_175">0 10px,
  linear-gradient(243deg, #class="_tkNum_1klyn_175">242424 5px, transparent 5px) 10px 5px,
  linear-gradient(63deg, #1d1d1d 5px, transparent 5px) class="_tkNum_1klyn_175">0 15px,
  linear-gradient(243deg, #1d1d1d 5px, transparent 5px) 10px 10px,
  linear-gradient(63deg, #1a1a1a 5px, transparent 5px) class="_tkNum_1klyn_175">0 20px,
  linear-gradient(243deg, #1a1a1a 5px, transparent 5px) 10px 15px,
  linear-gradient(#1b1b1b 5px, #1c1c1c 5px, #1c1c1c 10px, transparent 10px, transparent 15px, #class="_tkNum_1klyn_175">222 15px, #class="_tkNum_1klyn_175">222 20px);
background-color: #class="_tkNum_1klyn_175">151515;
background-size: 20px 20px;
4♥
3♠
3♠
2♦
dabblet.css★ 0

Syntax highlighting test

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Syntax highlighting test
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

@media screen {
	body { background: silver; }
}

html, body { height: class="_tkNum_1klyn_175">100% }

body:not(.foo):not(#id) {
	background: #f06;
2♦
A♦
dabblet.css★ 0

Experiments with stroke-dasharray */

class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* Experiments with stroke-dasharray */
circle {
	stroke: hsl(class="_tkNum_1klyn_175">200, class="_tkNum_1klyn_175">10%, class="_tkNum_1klyn_175">20%);
	stroke-opacity: .class="_tkNum_1klyn_175">9;
	fill: transparent;
	stroke-width: class="_tkNum_1klyn_175">31.8;
}
A♦
K♣
dabblet.css★ 0

your title goes here 

class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* your title goes here */
background-color:silver;
background-image: 
	radial-gradient(class="_tkNum_1klyn_175">100% class="_tkNum_1klyn_175">150%, circle, silver class="_tkNum_1klyn_175">24%, white class="_tkNum_1klyn_175">25%, white class="_tkNum_1klyn_175">28%, silver class="_tkNum_1klyn_175">29%, silver class="_tkNum_1klyn_175">36%, white class="_tkNum_1klyn_175">36%, white class="_tkNum_1klyn_175">40%, transparent class="_tkNum_1klyn_175">40%, transparent),
	radial-gradient(class="_tkNum_1klyn_175">0    class="_tkNum_1klyn_175">150%, circle, silver class="_tkNum_1klyn_175">24%, white class="_tkNum_1klyn_175">25%, white class="_tkNum_1klyn_175">28%, silver class="_tkNum_1klyn_175">29%, silver class="_tkNum_1klyn_175">36%, white class="_tkNum_1klyn_175">36%, white class="_tkNum_1klyn_175">40%, transparent class="_tkNum_1klyn_175">40%, transparent),
	radial-gradient(class="_tkNum_1klyn_175">50%  class="_tkNum_1klyn_175">100%, circle, white class="_tkNum_1klyn_175">10%, silver class="_tkNum_1klyn_175">11%, silver class="_tkNum_1klyn_175">23%, white class="_tkNum_1klyn_175">24%, white class="_tkNum_1klyn_175">30%, silver class="_tkNum_1klyn_175">31%, silver class="_tkNum_1klyn_175">43%, white class="_tkNum_1klyn_175">44%, white class="_tkNum_1klyn_175">50%, silver class="_tkNum_1klyn_175">51%, silver class="_tkNum_1klyn_175">63%, white class="_tkNum_1klyn_175">64%, white class="_tkNum_1klyn_175">71%, transparent class="_tkNum_1klyn_175">71%, transparent),
	radial-gradient(class="_tkNum_1klyn_175">100% class="_tkNum_1klyn_175">50%,  circle, white class="_tkNum_1klyn_175">5%, silver class="_tkNum_1klyn_175">6%, silver class="_tkNum_1klyn_175">15%, white class="_tkNum_1klyn_175">16%, white class="_tkNum_1klyn_175">20%, silver class="_tkNum_1klyn_175">21%, silver class="_tkNum_1klyn_175">30%, white class="_tkNum_1klyn_175">31%, white class="_tkNum_1klyn_175">35%, silver class="_tkNum_1klyn_175">36%, silver class="_tkNum_1klyn_175">45%, white class="_tkNum_1klyn_175">46%, white class="_tkNum_1klyn_175">49%, transparent class="_tkNum_1klyn_175">50%, transparent),
	radial-gradient(class="_tkNum_1klyn_175">0    class="_tkNum_1klyn_175">50%,  circle, white class="_tkNum_1klyn_175">5%, silver class="_tkNum_1klyn_175">6%, silver class="_tkNum_1klyn_175">15%, white class="_tkNum_1klyn_175">16%, white class="_tkNum_1klyn_175">20%, silver class="_tkNum_1klyn_175">21%, silver class="_tkNum_1klyn_175">30%, white class="_tkNum_1klyn_175">31%, white class="_tkNum_1klyn_175">35%, silver class="_tkNum_1klyn_175">36%, silver class="_tkNum_1klyn_175">45%, white class="_tkNum_1klyn_175">46%, white class="_tkNum_1klyn_175">49%, transparent class="_tkNum_1klyn_175">50%, trans
K♣
Q♥
dabblet.css★ 0

First example 

/** 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * First example 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: linear-gradient(left, white class="_tkNum_1klyn_175">20%, #8b0 class="_tkNum_1klyn_175">80%);
height: class="_tkNum_1klyn_175">100%;
Q♥
J♠
dabblet.css★ 0

Second example, stops starting to get closer

/** 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Second example, stops starting to get closer
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: linear-gradient(left, white class="_tkNum_1klyn_175">30%, #8b0 class="_tkNum_1klyn_175">70%);
height: class="_tkNum_1klyn_175">100%;
J♠
10♦
dabblet.css★ 0

Third example, stops getting even closer

/** 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Third example, stops getting even closer
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: linear-gradient(left, white class="_tkNum_1klyn_175">40%, #8b0 class="_tkNum_1klyn_175">60%);
height: class="_tkNum_1klyn_175">100%;
10♦
9♣
dabblet.css★ 0

Fourth example, stops at the same position

/** 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Fourth example, stops at the same position
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: linear-gradient(left, white class="_tkNum_1klyn_175">50%, #8b0 class="_tkNum_1klyn_175">50%);
height: class="_tkNum_1klyn_175">100%;
9♣
8♥
dabblet.css★ 0

Fifth example, colors meeting at different position

/** 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Fifth example, colors meeting at different position
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: linear-gradient(left, white class="_tkNum_1klyn_175">30%, #8b0 class="_tkNum_1klyn_175">30%);
height: class="_tkNum_1klyn_175">100%;
8♥
7♠
dabblet.css★ 0

First example 

/** 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * First example 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: linear-gradient(left, deeppink class="_tkNum_1klyn_175">30%, gold class="_tkNum_1klyn_175">30%);
height: class="_tkNum_1klyn_175">100%;
7♠
6♦
dabblet.css★ 0

Sixth example, colors meeting at different position

/** 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Sixth example, colors meeting at different position
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: linear-gradient(left, white class="_tkNum_1klyn_175">90%, #8b0 class="_tkNum_1klyn_175">90%);
height: class="_tkNum_1klyn_175">100%;
6♦
5♣
dabblet.css★ 0

Vertical stripes

/** 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Vertical stripes
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: linear-gradient(left, white class="_tkNum_1klyn_175">50%, #8b0 class="_tkNum_1klyn_175">50%);
background-size: 100px 100px;
5♣
4♥
dabblet.css★ 0

First attempt to make diagonal stripes

/** 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * First attempt to make diagonal stripes
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: linear-gradient(45deg, white class="_tkNum_1klyn_175">50%, #8b0 class="_tkNum_1klyn_175">50%);
background-size: 100px 100px;
4♥
3♠
dabblet.css★ 0

Diagonal stripes

/** 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Diagonal stripes
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: linear-gradient(45deg, white class="_tkNum_1klyn_175">25%, #8b0 class="_tkNum_1klyn_175">25%, #8b0 class="_tkNum_1klyn_175">50%, white class="_tkNum_1klyn_175">50%, white class="_tkNum_1klyn_175">75%, #8b0 class="_tkNum_1klyn_175">75%, #8b0);
background-size:100px 100px;
3♠
2♦
dabblet.css★ 0

Diagonal stripes with repeating gradients

/** 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Diagonal stripes with repeating gradients
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: repeating-linear-gradient(60deg, deeppink, deeppink 35px, gold 35px, gold 70px);
height: class="_tkNum_1klyn_175">100%;
2♦
A♦
dabblet.css★ 0

SVG experiments 

class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* SVG experiments */
svg {
	margin: 50px;
	background: #eee;
}

line {
	stroke: slategray;
	stroke-width: class="_tkNum_1klyn_175">2;
	marker: url(#circle);
}
A♦
K♣
dabblet.css★ 0

Diagonal stripes

/** 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Diagonal stripes
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: repeating-linear-gradient(60deg, white, white 35px, #8b0 35px, #8b0 70px);
min-height: class="_tkNum_1klyn_175">100%;
K♣
Q♥
dabblet.css★ 0

The first commented line is your dabblet’s title

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * The first commented line is your dabblet’s title
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height:class="_tkNum_1klyn_175">100%;
}

div { width: 220px; height: 100px; background: white; }
Q♥
J♠
dabblet.css★ 0

Dabblet logo

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Dabblet logo
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */
 
@font-face {
	font-family: class="_tkStr_1klyn_166">'Dabblet';
	src: url(http:class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">//dabblet.com/img/dabblet.ttf);
}

html { background: white }

body {
J♠
10♦
dabblet.css★ 0

Dabblet avatar

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Dabblet avatar
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */
 
@font-face {
	font-family: class="_tkStr_1klyn_166">'Dabblet';
	src: url(/img/dabblet.ttf);
}

html { background: white }

body {
10♦
9♣
dabblet.css★ 0

Incrementable test

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Incrementable test
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: #f06;
background: linear-gradient(45deg, #f203f6 class="_tkNum_1klyn_175">80%, yellow 100px);
min-height:class="_tkNum_1klyn_175">100%;
z-index: class="_tkNum_1klyn_175">1;
border-width: 1px 2px 3px 10px;
9♣
8♥
dabblet.css★ 0

Do browsers fire the resize event for CSS resize?

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Do browsers fire the resize event for CSS resize?
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

#resize {
	overflow: hidden;
	resize: both;
	width: 200px;
	min-height:200px;
	background:deeppink;
}
8♥
7♠
dabblet.css★ 0

Fit in viewport demo

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Fit in viewport demo
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

img {
    width: class="_tkNum_1klyn_175">100%;
    height: class="_tkNum_1klyn_175">100%;
    position: absolute;
    top: class="_tkNum_1klyn_175">0;
    left: class="_tkNum_1klyn_175">0;
    bottom: class="_tkNum_1klyn_175">0;
    right: class="_tkNum_1klyn_175">0;
7♠
6♦
dabblet.css★ 0

Frosted glass effect with filters

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Frosted glass effect with filters
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">* { padding: class="_tkNum_1klyn_175">0; margin: class="_tkNum_1klyn_175">0 }
body, html { min-height: class="_tkNum_1klyn_175">100%; }

body, div:after {
	background: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//devslovebacon.com/images/bacon-bg.jpg') center;
}

div {
6♦
5♣
dabblet.css★ 0

Animation with one keyframe 

class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* Animation with one keyframe */

html { background: white }
body {
	width: 100px; height: 100px;
	background: slategray;
}

html:hover > body {
	animation: 1s animation infinite;
}
5♣
4♥
dabblet.css★ 0

The -Webkit-scrollbar challenge

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * The -Webkit-scrollbar challenge
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * * * * * * * * * * * * * * * * * * * * * * * * * * * *
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Make the first div’s scrollbar like the second’s 
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * without changing the styling of the div (i.e. you
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * can only change the ::-webkit-scrollbar-* rules
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * * * * * * * * * * * * * * * * * * * * * * * * * * * *
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * It doesnclass="_tkStr_1klyn_166">'t matter if the second div doesn't look the same
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * after your changes, it's only there to show you how the
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * end result should look.
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * * * * * * * * * * * * * * * * * * * * * * * * * * * *
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Basically the goal is to see if we can apply some kind
4♥
3♠
dabblet.css★ 0

Webkit bug reduction

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Webkit bug reduction
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Bug originally spotted in http://dabblet.com/gist/class="_tkNum_1klyn_175">1560717
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */


/* The font. Try changing font-size and see how the lines
   still follow the text
   In Webkit, certain numbers  */
   
font: italic class="_tkNum_1klyn_175">18.5px/class="_tkNum_1klyn_175">1.5 Baskerville, class="_tkStr_1klyn_166">"Palatino Linotype", serif;
3♠
2♦
dabblet.css★ 0

WebKit bug? 

class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* WebKit bug? */

a {
	-moz-transition: border-color 1s;
	-ms-transition: border-color 1s;
	-o-transition: border-color 1s;
	-webkit-transition: 1s background;

	display: block;
	height: 100px;
	background: rgba(class="_tkNum_1klyn_175">0,class="_tkNum_1klyn_175">0,class="_tkNum_1klyn_175">0,.class="_tkNum_1klyn_175">01);
}
2♦
A♦
dabblet.css★ 0

box-shadow vs drop-shadow

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * box-shadow vs drop-shadow
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

div {
	position: relative;
	width: 150px;
	padding: 20px;
	border: 5px dotted;
	border-radius: 20px;
	margin: 60px;
A♦
K♣
dabblet.css★ 0

grayscale() and saturate() filters demo

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * grayscale() and saturate() filters demo
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

img {
	transition: .5s -webkit-filter;
}

img:first-of-type {
	-webkit-filter: grayscale(class="_tkNum_1klyn_175">100%);
}
K♣
Q♥
dabblet.css★ 0

Combined filters demo

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Combined filters demo
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

img {
	transition: .5s -webkit-filter;
}

img:first-of-type {
	-webkit-filter: contrast(class="_tkNum_1klyn_175">2000%) grayscale();
}
Q♥
J♠
dabblet.css★ 0

Colorize black element with filters

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Colorize black element with filters
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

body {
	background: pink;
}

div {
	position: relative;
	width: 100px;
J♠
10♦
dabblet.css★ 0

Elliptical gradient test

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Elliptical gradient test
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: #f06;
background: radial-gradient(closest-side, #f06 class="_tkNum_1klyn_175">98%, gold class="_tkNum_1klyn_175">99%);
min-height:class="_tkNum_1klyn_175">100%;
10♦
9♣
dabblet.css★ 0

Transitioning visibility

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Transitioning visibility
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

div {
	width: 100px; height: 100px;
	background: #f06;
	transition: 1s background, 1s visibility step-start;
} 

div:hover { visibility: hidden;  background: gold; }
9♣
8♥
dabblet.css★ 0

oli

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * oli
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

body { position: relative; margin: 50px; }

div {
	position: absolute;
	top: class="_tkNum_1klyn_175">0; left: class="_tkNum_1klyn_175">0;
	border: 40px solid black;
	border-radius: 99px;
}
8♥
7♠
dabblet.css★ 0

Angled Navigation?

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Angled Navigation?
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * to help @Chrisedmo
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

nav li {
	list-style: none;
	float: left;
}

nav a {
	position: relative;
7♠
6♦
dabblet.css★ 0

Learning CSS3

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Learning CSS3
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * background-size, background-origin, outline
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html { 
	min-height:class="_tkNum_1klyn_175">100%;
	background: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//leaverou.github.com/CSSS/img/rainbow-wood.jpg') bottom;
	background-size: cover;
}

section {
6♦
5♣
dabblet.css★ 0

Learning CSS3

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Learning CSS3
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Multiple backgrounds, basic linear gradients
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html {
	background: linear-gradient(black, #class="_tkNum_1klyn_175">444);	
	background-color: #class="_tkNum_1klyn_175">222;
	height: class="_tkNum_1klyn_175">100%;
}

body {
5♣
4♥
dabblet.css★ 0

Weird body sizing

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Weird body sizing
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html, body { 
	min-height: class="_tkNum_1klyn_175">100%;
}

html {
	background: red;
}
4♥
3♠
dabblet.css★ 0

Learning CSS3

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Learning CSS3
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Before background-size, background-origin, outline
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html { 
	min-height:class="_tkNum_1klyn_175">100%;
	background: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//leaverou.github.com/CSSS/img/rainbow-wood.jpg');
}

section {
	max-width: 25em;
3♠
2♦
dabblet.css★ 0

Learning CSS3

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Learning CSS3
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * background-clip
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html { 
	min-height:class="_tkNum_1klyn_175">100%;
	background: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//leaverou.github.com/CSSS/img/rainbow-wood.jpg') top;
	background-size: cover;
}

section {
2♦
A♦
dabblet.css★ 0

Learning CSS3

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Learning CSS3
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * border-image
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html { 
	min-height:class="_tkNum_1klyn_175">100%;
	background: white url(http:class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">//leaverou.github.com/chainvas/img/background.jpg);
}

section {
	max-width: 20em;
A♦
K♣
dabblet.css★ 0

Learning CSS3

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Learning CSS3
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * RGBA/HSLA, border-radius, box-shadow, text-shadow
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html { 
	min-height:class="_tkNum_1klyn_175">100%;
	background: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//leaverou.github.com/CSSS/img/rainbow-wood.jpg') center;
}

section {
	max-width: 20em;
K♣
Q♥
dabblet.css★ 0

Learning CSS3

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Learning CSS3
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Transitions & transforms
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html { 
	min-height:class="_tkNum_1klyn_175">100%;
	background: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//leaverou.github.com/CSSS/img/rainbow-wood.jpg') top;
	background-size: cover;
}

section {
Q♥
J♠
dabblet.css★ 0

Learning CSS3

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Learning CSS3
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * RGBA/HSLA, border-radius, box-shadow, text-shadow
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html { 
	min-height:class="_tkNum_1klyn_175">100%;
	background: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//leaverou.github.com/CSSS/img/rainbow-wood.jpg') center;
}

section {
	max-width: 20em;
J♠
10♦
dabblet.css★ 0

text-shadow when letters are overlapping

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * text-shadow when letters are overlapping
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

font: bold class="_tkNum_1klyn_175">800% class="_tkStr_1klyn_166">'Palatino Linotype', Palatino, Georgia, serif;
text-align: center;
letter-spacing: -.3em;
text-shadow: class="_tkNum_1klyn_175">0 .5em hsla(class="_tkNum_1klyn_175">0,class="_tkNum_1klyn_175">0%,class="_tkNum_1klyn_175">50%,.class="_tkNum_1klyn_175">5);
color: rgba(class="_tkNum_1klyn_175">255,class="_tkNum_1klyn_175">0,class="_tkNum_1klyn_175">100,.class="_tkNum_1klyn_175">5);
10♦
9♣
dabblet.css★ 0

Regain default button styling by CSS overrides. Possible?

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Regain default button styling by CSS overrides. Possible?
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

button {
	background: red; class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* we can't remove this */
	background: initial; class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* failed */
	background: none; class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* failed */
	class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* anything else? */
}
9♣
8♥
dabblet.css★ 0

Testcase

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Testcase
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Should be true on a class="_tkNum_1klyn_175">13.3" LCD at 1280x800
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html { background: red }

@media (min-resolution: 112dpi) and (max-resolution: 113dpi) {
	html { background: lime }
}
8♥
7♠
dabblet.css★ 0

Learning CSS3

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Learning CSS3
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Animations
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html { 
	min-height:class="_tkNum_1klyn_175">100%;
	background: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//leaverou.github.com/CSSS/img/rainbow-wood.jpg') top;
	background-size: cover;
}

@keyframes fall {
7♠
6♦
dabblet.css★ 0

Untitled

div {
	width: 400px;
	height: 200px;
	background-image: url(class="_tkStr_1klyn_166">"http:class="_tkCom_1klyn_170class="_tkStr_1klyn_166">">//lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">1/");
	background-repeat: no-repeat;
	transition: all class="_tkNum_1klyn_175">0.5s;
}
div:hover {
	background-image: url(class="_tkStr_1klyn_166">"http:class="_tkCom_1klyn_170class="_tkStr_1klyn_166">">//lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">2/");
	transition: all class="_tkNum_1klyn_175">0.5s;
}
6♦
5♣
dabblet.css★ 0

Untitled

div {
	width: 400px;
	height: 200px;
	background-image: url(class="_tkStr_1klyn_166">"http:class="_tkCom_1klyn_170class="_tkStr_1klyn_166">">//lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">1/");
	background-repeat: no-repeat;
	transition: all class="_tkNum_1klyn_175">0.5s;
}
div:hover {
	background-image: url(class="_tkStr_1klyn_166">"http:class="_tkCom_1klyn_170class="_tkStr_1klyn_166">">//lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">2/");
	transition: all class="_tkNum_1klyn_175">0.5s;
}
5♣
4♥
dabblet.css★ 0

Untitled

div {
	width: 400px;
	height: 200px;
	background-image: url(class="_tkStr_1klyn_166">"http:class="_tkCom_1klyn_170class="_tkStr_1klyn_166">">//lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">1/");
	background-repeat: no-repeat;
	transition: all class="_tkNum_1klyn_175">0.5s;
}
div:hover {
	background-image: url(class="_tkStr_1klyn_166">"http:class="_tkCom_1klyn_170class="_tkStr_1klyn_166">">//lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">2/");
	transition: all class="_tkNum_1klyn_175">0.5s;
}
4♥
3♠
dabblet.css★ 0

Untitled

div {
	width: 400px;
	height: 200px;
	background-image: url(class="_tkStr_1klyn_166">"http:class="_tkCom_1klyn_170class="_tkStr_1klyn_166">">//lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">1/");
	background-repeat: no-repeat;
	transition: all class="_tkNum_1klyn_175">0.5s;
}
div:hover {
	background-image: url(class="_tkStr_1klyn_166">"http:class="_tkCom_1klyn_170class="_tkStr_1klyn_166">">//lorempixel.com/class="_tkNum_1klyn_175">400/class="_tkNum_1klyn_175">200/animals/class="_tkNum_1klyn_175">2/");
	transition: all class="_tkNum_1klyn_175">0.5s;
}
3♠
2♦
dabblet.css★ 0

Learning CSS3

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Learning CSS3
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * box-sizing
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html { 
	min-height:class="_tkNum_1klyn_175">100%;
	background: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//leaverou.github.com/CSSS/img/rainbow-wood.jpg') top;
	background-size: cover;
}

section {
2♦
A♦
dabblet.css★ 0

Learning CSS3

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Learning CSS3
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * box-sizing
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html { 
	min-height:class="_tkNum_1klyn_175">100%;
	background: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//leaverou.github.com/CSSS/img/rainbow-wood.jpg') top;
	background-size: cover;
}

section {
A♦
K♣
dabblet.css★ 0

Subpixel font sizes

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Subpixel font sizes
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Is this a smooth progression (correct) or
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * class="_tkNum_1klyn_175">3-class="_tkNum_1klyn_175">4 distinct sizes (no subpixel measurements)?
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html {
	font-size: 10px;
	padding-top: 50px;
}

div {
K♣
Q♥
dabblet.css★ 0

SVG gradients through data URI

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * SVG gradients through data URI
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: #f06;
background: radial-gradient(class="_tkNum_1klyn_175">50% -class="_tkNum_1klyn_175">80%, red, yellow);
background: url(class="_tkStr_1klyn_166">'data:image/svg+xml,<svg xmlns="http:class="_tkCom_1klyn_170">//www.w3.org/class="_tkNum_1klyn_175">2000/svg"><radialGradient id="g" cy="-class="_tkNum_1klyn_175">80%" r="class="_tkNum_1klyn_175">180%"><stop stop-color="red" /><stop offset="class="_tkNum_1klyn_175">100%" stop-color="yellow" /></radialGradient><rect width="class="_tkNum_1klyn_175">100%" height="class="_tkNum_1klyn_175">100%" fill="url(#g)" /></svg>');
min-height: class="_tkNum_1klyn_175">100%;
Q♥
J♠
dabblet.css★ 0

outline-offset

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * outline-offset
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

div {
	width: 100px; height: 100px;
	background: gold;
	outline: 1px dashed red;
	outline-offset: -12px;
}
J♠
10♦
dabblet.css★ 0

Color test

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Color test
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

span {
	display: inline-block;
	width: 50px; height: 50px; 
	background: gold;
}

div { margin: 30px class="_tkNum_1klyn_175">0; }
10♦
9♣
dabblet.css★ 0

WebKit bug with display:table + position:absolute

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * WebKit bug with display:table + position:absolute
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Incorrect width calculation
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

div {
	position: relative;
	width: 300px;
	height: 200px;
	padding: 10px;
	border: 1px solid silver;
}
9♣
8♥
dabblet.css★ 0

Opera bug with box-shadow: inherit

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Opera bug with box-shadow: inherit
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

div {
	width: 300px; height: 200px;
	padding: 20px;
	box-shadow: 1px 1px 10px black;
}

span {
	display: block;
8♥
7♠
dabblet.css★ 0

Testing viewport relative units

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Testing viewport relative units
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

font-size: 20vh;
7♠
6♦
dabblet.css★ 0

WebKit bug testcase (Reproducible only in Nightlies)

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * WebKit bug testcase (Reproducible only in Nightlies)
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

@-webkit-keyframes test {
	from, to { background-color: yellowgreen }
}

html {
	background-color: red;
	-webkit-animation: 1s test infinite;
}
6♦
5♣
dabblet.css★ 0

Sticker 

class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* Sticker */

.sticker {
	position: relative;
	width: class="_tkNum_1klyn_175">3.5em;
	height: class="_tkNum_1klyn_175">3.5em;
	padding: 1em .5em class="_tkNum_1klyn_175">0;
	margin: 100px;
	background: slategray;
	color: white;
	font: italic class="_tkNum_1klyn_175">200% Baskerville, class="_tkStr_1klyn_166">'Palatino Linotype', Palatino, serif;;
	text-align: center;
5♣
4♥
dabblet.css★ 0

Bug testcase: No local in background shorthand

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Bug testcase: No local in background shorthand
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

background: red;
background: yellowgreen local;
4♥
3♠
dabblet.css★ 0

WebKit bug testcase: calc() is dropped from CSSOM

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * WebKit bug testcase: calc() is dropped from CSSOM
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */
3♠
2♦
dabblet.css★ 0

CSS3 Filter testcase

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * CSS3 Filter testcase
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */
 
html { background: red }

@media all, (min-width: class="_tkNum_1klyn_175">0) {
	html { background: yellowgreen }
}
2♦
A♦
dabblet.css★ 0

Negative blur radius?

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Negative blur radius?
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

div {
	width: 300px; height: 200px;
	background:yellowgreen;
	box-shadow: class="_tkNum_1klyn_175">0 class="_tkNum_1klyn_175">0 -100px red inset;
}
A♦
K♣
dabblet.css★ 0

Starting point for pound animation

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Starting point for pound animation
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

@keyframes pound {
  from { transform:scale(class="_tkNum_1klyn_175">1); }
  to { transform:scale(class="_tkNum_1klyn_175">1.2); }
}

img {
	display: block;
	width: 300px;
K♣
Q♥
dabblet.css★ 0

Semi-transparent color masking

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Semi-transparent color masking
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * (answer to question)
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

.img-wrapper {
	position: relative;
	float: left;
	overflow: hidden;
}

.img-wrapper:after {
Q♥
J♠
dabblet.css★ 0

box-shadow: 10px 10px 10px -5px gray; applied in stages

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * box-shadow: 10px 10px 10px -5px gray; applied in stages
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

@keyframes box-shadow {
	from { box-shadow: class="_tkNum_1klyn_175">0 class="_tkNum_1klyn_175">0 orange }
	class="_tkNum_1klyn_175">10% { box-shadow: 10px class="_tkNum_1klyn_175">0 orange } class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* x offset */
	class="_tkNum_1klyn_175">20% { box-shadow: 10px 15px orange } class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* y offset */
	class="_tkNum_1klyn_175">30% { box-shadow: 10px 15px class="_tkNum_1klyn_175">0 -5px orange } class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* spread */
	class="_tkNum_1klyn_175">40% { box-shadow: 10px 15px class="_tkNum_1klyn_175">0 -5px gray } class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* color */
	class="_tkNum_1klyn_175">60% { box-shadow: 10px 15px 10px -5px gray } class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">/* blur */
}
J♠
10♦
dabblet.css★ 0

Transitioning font-size and relative lengths

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Transitioning font-size and relative lengths
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * See: http://lists.w3.org/Archives/Public/www-style/2011Nov/class="_tkNum_1klyn_175">0016.html
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */


#inner, #outer {
   transition: 3s font-size, 1s width;
}

#outer {
   font-size: 20px;
10♦
9♣
dabblet.css★ 0

Masking an image with a gradient (answer to question)

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Masking an image with a gradient (answer to question)
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

div {
	width: 200px; height: 200px;
	background: linear-gradient(white, hsla(class="_tkNum_1klyn_175">0,class="_tkNum_1klyn_175">0%,class="_tkNum_1klyn_175">100%,class="_tkNum_1klyn_175">0)),
		url(http:class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170">//placekitten.com/class="_tkNum_1klyn_175">200/class="_tkNum_1klyn_175">200);
}
9♣
8♥
dabblet.css★ 0

drop-shadow filter vs box-shadow

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * drop-shadow filter vs box-shadow
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

html {
	background: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//subtlepatterns.com/patterns/purty_wood.png')
}

.speech-bubble {
	position: relative;
	float: left;
	width: 7em;
8♥
7♠
dabblet.css★ 0

border-image

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * border-image
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

div {
	width: 300px; padding: .5em;
	border: 20px solid transparent;
	-moz-border-image: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//leaverou.github.com/chainvas/img/cloth.png') class="_tkNum_1klyn_175">33.3% round;
	-ms-border-image: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//leaverou.github.com/chainvas/img/cloth.svg') class="_tkNum_1klyn_175">33.3% round;
	-webkit-border-image: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//leaverou.github.com/chainvas/img/cloth.svg') class="_tkNum_1klyn_175">33.3% round;
	-o-border-image: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//leaverou.github.com/chainvas/img/cloth.svg') class="_tkNum_1klyn_175">33.3% round;
	border-image: url(class="_tkStr_1klyn_166">'http:class="_tkCom_1klyn_170">//leaverou.github.com/chainvas/img/cloth.svg') class="_tkNum_1klyn_175">33.3% round fill;
7♠
6♦
dabblet.css★ 0

Sprite Sheet animation with CSS3 using the steps() feature

/**
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Sprite Sheet animation with CSS3 using the steps() feature
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> * Simplified from simurai’s original example at http://jsfiddle.net/simurai/CGmCe/
class=class="_tkStr_1klyn_166">"_tkCom_1klyn_170"> */

@keyframes wink {
    from { background-position: 0px; }
    to { background-position: -500px; }
}

body {
    background: url(class="_tkStr_1klyn_166">"http:class="_tkCom_1klyn_170class="_tkStr_1klyn_166">">//i.imgur.com/6za6I.png");
6♦