Lea Verou LeaVerou
This file contains hidden or 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
| /** | |
| * Hues | |
| */ | |
| background: #f06; | |
| background: linear-gradient(transparent, gray), linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia, red); | |
| min-height: 100%; |
This file contains hidden or 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
| /** | |
| * Structural selector tester | |
| */ | |
| body { counter-reset: i } | |
| article { | |
| display: inline-block; | |
| width: 4em; | |
| padding: 1.5em 0; |
This file contains hidden or 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
| /** | |
| * Blending modes in Chrome / WebKit! | |
| * Requires chrome://flags/#enable-experimental-web-platform-features in Chrome | |
| */ | |
| body { | |
| text-align: center; | |
| background: black; | |
| } |
This file contains hidden or 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
| /** | |
| * Unprefixed animations do nothing in Blink | |
| */ | |
| @keyframes foo { | |
| to { background: lime; } | |
| } | |
| body { background: red; animation: foo 1s infinite; } |
This file contains hidden or 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
| /** | |
| * GB plane for R=0 | |
| */ | |
| div { | |
| width: 300px; height: 300px; | |
| } | |
| body > div { | |
| background: linear-gradient(90deg, black, lime); |
This file contains hidden or 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
| /** | |
| * Flexbox playground | |
| */ | |
| body { | |
| margin: 0; | |
| display: flex; | |
| flex-flow: row; | |
| flex-wrap: wrap; | |
| align-content: stretch; |
This file contains hidden or 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
| /** | |
| * 3D cube | |
| */ | |
| body { | |
| perspective: 600px; | |
| perspective-origin: 300px -90px; | |
| } | |
| .cube, .cube:before, .cube:after, |
This file contains hidden or 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
| /* Starting point */ | |
| @keyframes rot { | |
| to { transform:rotate(360deg); } | |
| } | |
| .smile { | |
| position: absolute; | |
| top: 50px; left: 50%; | |
| margin: -50px; |
This file contains hidden or 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
| font: 150% Baskerville, Palatino Linotype, serif; | |
| background: beige; |
This file contains hidden or 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
| /** | |
| * RGB plane for R=255 | |
| */ |
OlderNewer