Skip to content

Instantly share code, notes, and snippets.

@oli
oli / dabblet.css
Created April 15, 2013 11:55
animating background colors
/* 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);}
@oli
oli / dabblet.css
Created April 15, 2013 06:02
background-size: cover
/* 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;
}
@oli
oli / dabblet.css
Created February 17, 2013 04:23
background-size: cover
/* 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;
}
@oli
oli / dabblet.css
Created February 6, 2013 07:03
AppStore Badge with SVG and fallback to png
/**
* 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;
@oli
oli / dabblet.css
Created December 6, 2012 03:49
Comparing transitions of RGB(a) and HSL(a) colors
/* 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 {
@oli
oli / dabblet.css
Created December 3, 2012 06:07
Example 2 — The calc() and attr() functions
/* 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 {
@oli
oli / dabblet.css
Created December 3, 2012 05:50
Example 1 — the CSS Counter Styles Module
/* 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;
@oli
oli / dabblet.css
Created December 3, 2012 04:51
Example 29 — CSS Animation gotchas
/* 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;
@oli
oli / dabblet.css
Created December 3, 2012 04:41
Example 28 — animation shorthand property (Figure 12-33)
/* 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;
@oli
oli / dabblet.css
Created December 2, 2012 09:15
Example 27 — animation-play-state (Figure 12-32)
/* 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;