Lea Verou LeaVerou
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p>Yooohooo</p> |
LeaVerou
/ dabblet.css
Created
December 10, 2011 03:06
— forked from estelle/dabblet.css
your title goes here
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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%, transparent); | |
| background-size |
LeaVerou
/ dabblet.css
Created
December 15, 2011 16:47
— forked from anonymous/dabblet.css
Diagonal stripes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Diagonal stripes | |
| */ | |
| background: repeating-linear-gradient(60deg, white, white 35px, #8b0 35px, #8b0 70px); | |
| min-height: 100%; |
LeaVerou
/ dabblet.css
Created
January 4, 2012 18:30
— forked from anonymous/dabblet.css
WebKit bug?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Colorize black element with filters | |
| * Webkit-only at the moment (Chrome Canary or Webkit nightlies) | |
| */ | |
| body { | |
| background: pink; | |
| } | |
| div { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
LeaVerou
/ dabblet.css
Created
February 28, 2012 10:48
— forked from ZeeAgency/dabblet.css
cross-fade testcase
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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%); |
OlderNewer