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%); |
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; |
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
/* 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
/** | |
* Diagonal stripes | |
*/ | |
background: repeating-linear-gradient(60deg, white, white 35px, #8b0 35px, #8b0 70px); | |
min-height: 100%; |
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 |
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> |