🎭 Jester gist stars for LeaVerou
A♦
vunits.js★ 81 stars

Static polyfill for vw, vh, vm units

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

(function() {

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

Vertical centering with Flexbox + margin fallback

/**
 * Vertical centering with Flexbox + margin fallback
 * Lea Verou & David Storey
 */

html, body { height: 100%; }

body {
	width: 100%; /* needed for FF */
	margin: 0;
	
	/* Flexbox hawtness */
K♣
Q♥
dabblet.css★ 17 stars

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

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

Move in a circle without wrapper elements

/**
 * Move in a circle without wrapper elements
 * Idea by Aryeh Gregor, simplified by Lea Verou
 */

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

Typing animation with pure CSS. 

/**
 * Typing animation with pure CSS. 
 * Works best in browsers supporting the ch unit.
 */

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }

h1 { 
	font: bold 200% Consolas, Monaco, monospace;
	border-right: .1em solid;
	width: 16.5em; /* fallback */
十♦
9♣
dabblet.css★ 4 stars

Lined paper that follows the text


/**
 * Lined paper that follows the text
 * Support: Chrome, FF 3.6+, Saf 5.1+, Opera 11.50+, IE10
 */

/* Just decorative */
padding: 20px;

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

TV screen

/**
 * TV screen
 */

html { background: white; }

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

Flexible multiline definition lists with 2 lines of CSS

/**
 * Flexible multiline definition lists with 2 lines of CSS
 */

dt, dd { display: inline; margin: 0; }

dd:after {
	content: '\A';
	white-space: pre;
}
7♠
6♦
markup.html★ 1 stars

Illustrating correct & wrong inner border-radius

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

Previewer test

/**
 * Previewer test
 */

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

Seigaiha

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

Japanese cube pattern */

/* Japanese cube pattern */

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

Polka dot pattern

/** 
 * Polka dot pattern
 */

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

Checkerboard pattern

/** 
 * Checkerboard pattern
 * (a bit buggy in Webkit, see bug #54615)
 */

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

box-shadow vs drop-shadow

/**
 * box-shadow vs drop-shadow
 * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
 */

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

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%);
	background-repeat: no-repeat;
}
Q♥
J♠
dabblet.css★ 1 stars

White space collapsing playground

/**
 * White space collapsing playground
 */

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

Image interpolation demo

/* Image interpolation demo
   WebKit-only at the time (April 2012)
 */

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

html {
十♦
9♣
dabblet.css★ 1 stars

Magic corners in gradients!

/**
 * Magic corners in gradients!
 */


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

Playing with background-attachment

/**
 * Playing with background-attachment
 */

pre {
	max-height: 150px;
	border: 1px solid silver;
	overflow: auto;
	background: url('http://placekitten.com/200/200');
	color: white;
	text-shadow: 0 -.1em .1em black;
}
8♥
7♠
dabblet.css★ 1 stars

Text masking — The SVG way

/**
 * Text masking — The SVG way
 */

svg {
	width: 6em; height: 1.5em;
	font: 900 500%/1.2 'Arial Black', sans-serif;
}

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

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

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

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

Transforms & regular CSS properties

/**
 * Transforms & regular CSS properties
 */

@keyframes subpixel-mess {
	to {
		top: 100px;
		transform: translateY(0)
	}
}

div {
5♣
4♥
gistfile1.txt★ 0 stars

Improved ZenCocoon's pattern

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

Syntax highlighting test

/**
 * Syntax highlighting test
 */

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

html, body { height: 100% }

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

Experiments with stroke-dasharray */

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

your title goes here 

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

First example 

/** 
 * First example 
 */

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

Second example, stops starting to get closer

/** 
 * Second example, stops starting to get closer
 */

background: linear-gradient(left, white 30%, #8b0 70%);
height: 100%;
J♠
十♦
dabblet.css★ 0 stars

Third example, stops getting even closer

/** 
 * Third example, stops getting even closer
 */

background: linear-gradient(left, white 40%, #8b0 60%);
height: 100%;
十♦
9♣
dabblet.css★ 0 stars

Fourth example, stops at the same position

/** 
 * Fourth example, stops at the same position
 */

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

Fifth example, colors meeting at different position

/** 
 * Fifth example, colors meeting at different position
 */

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

First example 

/** 
 * First example 
 */

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

Sixth example, colors meeting at different position

/** 
 * Sixth example, colors meeting at different position
 */

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

Vertical stripes

/** 
 * Vertical stripes
 */

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

First attempt to make diagonal stripes

/** 
 * First attempt to make diagonal stripes
 */

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

Diagonal stripes

/** 
 * Diagonal stripes
 */

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

Diagonal stripes with repeating gradients

/** 
 * Diagonal stripes with repeating gradients
 */

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

SVG experiments 

/* SVG experiments */
svg {
	margin: 50px;
	background: #eee;
}

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

Diagonal stripes

/** 
 * Diagonal stripes
 */

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

The first commented line is your dabblet’s title

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

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

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

Dabblet logo

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

html { background: white }

body {
J♠
十♦
dabblet.css★ 0 stars

Dabblet avatar

/**
 * Dabblet avatar
 */
 
@font-face {
	font-family: 'Dabblet';
	src: url(/img/dabblet.ttf);
}

html { background: white }

body {
十♦
9♣
dabblet.css★ 0 stars

Incrementable test

/**
 * Incrementable test
 */

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

Do browsers fire the resize event for CSS resize?

/**
 * Do browsers fire the resize event for CSS resize?
 */

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

Fit in viewport demo

/**
 * Fit in viewport demo
 */

img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
7♠
6♦
dabblet.css★ 0 stars

Frosted glass effect with filters

/**
 * Frosted glass effect with filters
 */

* { padding: 0; margin: 0 }
body, html { min-height: 100%; }

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

div {
6♦
5♣
dabblet.css★ 0 stars

Animation with one keyframe 

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

The -Webkit-scrollbar challenge

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

Webkit bug reduction

/**
 * Webkit bug reduction
 * Bug originally spotted in http://dabblet.com/gist/1560717
 */


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

WebKit bug? 

/* 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(0,0,0,.01);
}
2♦
A♦
dabblet.css★ 0 stars

box-shadow vs drop-shadow

/**
 * box-shadow vs drop-shadow
 * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
 */

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

grayscale() and saturate() filters demo

/**
 * grayscale() and saturate() filters demo
 * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
 */

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

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

Combined filters demo

/**
 * Combined filters demo
 * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
 */

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

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

Colorize black element with filters

/**
 * Colorize black element with filters
 * Webkit-only at the moment (Chrome Canary or Webkit nightlies)
 */

body {
	background: pink;
}

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

Elliptical gradient test

/**
 * Elliptical gradient test
 */

background: #f06;
background: radial-gradient(closest-side, #f06 98%, gold 99%);
min-height:100%;
十♦
9♣
dabblet.css★ 0 stars

Transitioning visibility

/**
 * Transitioning visibility
 */

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 stars

oli

/**
 * oli
 */

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

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

Angled Navigation?

/**
 * Angled Navigation?
 * to help @Chrisedmo
 */

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

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

Learning CSS3

/**
 * Learning CSS3
 * background-size, background-origin, outline
 */

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

section {
6♦
5♣
dabblet.css★ 0 stars

Learning CSS3

/**
 * Learning CSS3
 * Multiple backgrounds, basic linear gradients
 */

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

body {
5♣
4♥
dabblet.css★ 0 stars

Weird body sizing

/**
 * Weird body sizing
 */

html, body { 
	min-height: 100%;
}

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

Learning CSS3

/**
 * Learning CSS3
 * Before background-size, background-origin, outline
 */

html { 
	min-height:100%;
	background: url('http://leaverou.github.com/CSSS/img/rainbow-wood.jpg');
}

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

Learning CSS3

/**
 * Learning CSS3
 * background-clip
 */

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

section {
2♦
A♦
dabblet.css★ 0 stars

Learning CSS3

/**
 * Learning CSS3
 * border-image
 */

html { 
	min-height:100%;
	background: white url(http://leaverou.github.com/chainvas/img/background.jpg);
}

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

Learning CSS3

/**
 * Learning CSS3
 * RGBA/HSLA, border-radius, box-shadow, text-shadow
 */

html { 
	min-height:100%;
	background: url('http://leaverou.github.com/CSSS/img/rainbow-wood.jpg') center;
}

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

Learning CSS3

/**
 * Learning CSS3
 * Transitions & transforms
 */

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

section {
Q♥
J♠
dabblet.css★ 0 stars

Learning CSS3

/**
 * Learning CSS3
 * RGBA/HSLA, border-radius, box-shadow, text-shadow
 */

html { 
	min-height:100%;
	background: url('http://leaverou.github.com/CSSS/img/rainbow-wood.jpg') center;
}

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

text-shadow when letters are overlapping

/**
 * text-shadow when letters are overlapping
 */

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

Regain default button styling by CSS overrides. Possible?

/**
 * Regain default button styling by CSS overrides. Possible?
 */

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

Testcase

/**
 * Testcase
 * Should be true on a 13.3" LCD at 1280x800
 */

html { background: red }

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

Learning CSS3

/**
 * Learning CSS3
 * Animations
 */

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

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

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;
}
6♦
5♣
dabblet.css★ 0 stars

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;
}
5♣
4♥
dabblet.css★ 0 stars

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;
}
4♥
3♠
dabblet.css★ 0 stars

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;
}
3♠
2♦
dabblet.css★ 0 stars

Learning CSS3

/**
 * Learning CSS3
 * box-sizing
 */

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

section {
2♦
A♦
dabblet.css★ 0 stars

Learning CSS3

/**
 * Learning CSS3
 * box-sizing
 */

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

section {
A♦
K♣
dabblet.css★ 0 stars

Subpixel font sizes

/**
 * Subpixel font sizes
 * Is this a smooth progression (correct) or
 * 3-4 distinct sizes (no subpixel measurements)?
 */

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

div {
K♣
Q♥
dabblet.css★ 0 stars

SVG gradients through data URI

/**
 * SVG gradients through data URI
 */

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

outline-offset

/**
 * outline-offset
 */

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

Color test

/**
 * Color test
 */

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

div { margin: 30px 0; }
十♦
9♣
dabblet.css★ 0 stars

WebKit bug with display:table + position:absolute

/**
 * WebKit bug with display:table + position:absolute
 * Incorrect width calculation
 */

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

Opera bug with box-shadow: inherit

/**
 * Opera bug with box-shadow: inherit
 */

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

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

Testing viewport relative units

/**
 * Testing viewport relative units
 */

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

WebKit bug testcase (Reproducible only in Nightlies)

/**
 * WebKit bug testcase (Reproducible only in Nightlies)
 */

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

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

Sticker 

/* Sticker */

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

Bug testcase: No local in background shorthand

/**
 * Bug testcase: No local in background shorthand
 */

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

WebKit bug testcase: calc() is dropped from CSSOM

/**
 * WebKit bug testcase: calc() is dropped from CSSOM
 */
3♠
2♦
dabblet.css★ 0 stars

CSS3 Filter testcase

/**
 * CSS3 Filter testcase
 */
 
html { background: red }

@media all, (min-width: 0) {
	html { background: yellowgreen }
}
2♦
A♦
dabblet.css★ 0 stars

Negative blur radius?

/**
 * Negative blur radius?
 */

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

Starting point for pound animation

/**
 * Starting point for pound animation
 */

@keyframes pound {
  from { transform:scale(1); }
  to { transform:scale(1.2); }
}

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

Semi-transparent color masking

/**
 * Semi-transparent color masking
 * (answer to question)
 */

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

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

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

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

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

Transitioning font-size and relative lengths

/**
 * Transitioning font-size and relative lengths
 * See: http://lists.w3.org/Archives/Public/www-style/2011Nov/0016.html
 */


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

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

Masking an image with a gradient (answer to question)

/**
 * Masking an image with a gradient (answer to question)
 */

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

drop-shadow filter vs box-shadow

/**
 * drop-shadow filter vs box-shadow
 */

html {
	background: url('http://subtlepatterns.com/patterns/purty_wood.png')
}

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

border-image

/**
 * border-image
 */

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

Sprite Sheet animation with CSS3 using the steps() feature

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

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

body {
    background: url("http://i.imgur.com/6za6I.png");
6♦