Win10 Mobile.15215.0
OneNote 17.8241.57592.0
Experimental features ON
- Visual UI is clean
/** | |
* The first commented line is your dabblet’s title | |
*/ | |
body { | |
padding: 50px; | |
} | |
input { | |
display: none; | |
} | |
label { |
/** | |
* Static interpolation via paused animations | |
* This technique becomes more useful if you need to interpolate more than 1 properties, and/or if you need multiple values in the spectrum | |
* Currently works in every modern browser except Safari | |
*/ | |
@keyframes foo { | |
from { background: red } | |
to { background: yellowgreen } | |
} |
.container { | |
width: 80px; | |
overflow: hidden; | |
} | |
.arrow { | |
width: 40px; | |
height:30px; | |
background: gray; | |
box-shadow: 0 0 7px rgba(0,0,0,0.6); | |
transform: rotate(24deg) skewX(-45deg) translateX(-9px) translateY(-22px); |
/* Common */ | |
html, body { | |
background:#eaeaea url(../img/bg.png) repeat; | |
font-size:12px; | |
font-family:"Open Sans", serif; | |
min-width:960px; | |
margin:0; | |
padding:0; | |
color:#aaa; |
/** | |
* Bug with 180deg rotation | |
*/ | |
div { | |
border: 1px solid black; | |
width: 100px; | |
height: 30px; | |
} | |
#div2 { |
/** | |
* Bug with 180deg rotation | |
*/ | |
div { | |
border: 1px solid black; | |
width: 100px; | |
height: 30px; | |
} | |
#div2 { |
/** | |
* The first commented line is your dabblet’s title | |
*/ | |
background: #f06; | |
background: linear-gradient(45deg, #f06, yellow); | |
min-height:100%; |
/* | |
* Изображение с боковыми элементами | |
*/ | |
#wrapper { | |
width: 600px; | |
margin: 10px auto; | |
background-color: transparent; | |
} |