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
/* animating background colors | |
color animation happens in RGBa space, so you can’t e.g. animate from hsl(0,50%,45%) to hsl(360,50%,45%) to get every color */ | |
body { | |
background: #f06; | |
animation: bg alternate 10s infinite; | |
min-height: 100%; | |
} | |
@keyframes bg { | |
0% {background: rgb(172, 57, 57);} |
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
/* background-size: cover */ | |
body { | |
background: url("http://placekitten.com/150/200/") no-repeat center center fixed; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
-o-background-size: cover; | |
background-size: cover; | |
} |
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
/* background-size: cover */ | |
body { | |
background: url("http://placekitten.com/150/200/") no-repeat center center fixed; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
-o-background-size: cover; | |
background-size: cover; | |
} |
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
/** | |
* AppStore Badge with SVG and fallback to png | |
*/ | |
.b-download__app-store-badge { | |
display: inline-block; | |
background: url('http://www.leechy.ru/inn/appstore-en.png') no-repeat; | |
background: none, url('http://www.leechy.ru/inn/appstore-en.svg') no-repeat; | |
background-size: 100% 100%; | |
width: 135px; |
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
/* Comparing transitions of RGB(a) and HSL(a) colors */ | |
/* There should be two boxes per row during transition, not three/four */ | |
.wrapper { | |
min-height: 100%; | |
} | |
h1 { | |
font-weight: normal; | |
font-size: 1.5em; | |
} | |
.wrapper 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
/* Example 2 — The calc() and attr() functions */ | |
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */ | |
body { | |
width: 80%; | |
max-width: 42em; | |
margin: auto; | |
font: 1em/1.5 Georgia, serif; | |
} | |
h1, | |
h2 { |
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
/* Example 1 — the CSS Counter Styles Module */ | |
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */ | |
body { | |
width: 80%; | |
max-width: 42em; | |
margin: auto; | |
font: 1em/1.5 Georgia, serif; | |
} | |
h1 { | |
font-weight: normal; |
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
/* Example 29 — CSS Animation gotchas */ | |
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */ | |
body { | |
width: 80%; | |
max-width: 42em; | |
margin: auto; | |
font: 1em/1.5 Georgia, serif; | |
} | |
h1 { | |
font-weight: normal; |
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
/* Example 28 — animation shorthand property (Figure 12-33) */ | |
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */ | |
body { | |
width: 80%; | |
max-width: 42em; | |
margin: auto; | |
font: 1em/1.5 Georgia, serif; | |
} | |
h1 { | |
font-weight: normal; |
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
/* Example 27 — animation-play-state (Figure 12-32) */ | |
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */ | |
body { | |
width: 80%; | |
max-width: 42em; | |
margin: auto; | |
font: 1em/1.5 Georgia, serif; | |
} | |
h1 { | |
font-weight: normal; |