Skip to content

Instantly share code, notes, and snippets.

Oli Studholme oli

Block or report user

Report or block oli

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@oli
oli / dabblet.css
Created Dec 10, 2011
Testing testing
View dabblet.css
/**
* Testing testing
*/
background: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)
;
@oli
oli / dabblet.css
Created Dec 12, 2011
matrix() units for variables e & f
View dabblet.css
/* matrix() units for variables e & f */
body {font-size: 10px;}
div {
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 180px;
text-align: center;
}
span {font-size: 20px;}
@oli
oli / dabblet.css
Created Dec 16, 2011
Comparing perspective to perspective()
View dabblet.css
/* Comparing perspective to perspective() */
body {margin-top: 48px;}
.x {float: left;
width: 100px;
height: 100px;
border: 1px solid #ccc;}
.x div {width: 100%;
height: 100%;}
.a div {
transform: perspective(200px) rotateY(45deg);
@oli
oli / dabblet.css
Created Dec 27, 2011
CSS Transitions test cases
View dabblet.css
/* CSS Transitions test cases */
/* ref: http://meyerweb.com/eric/thoughts/2011/03/24/inconsistent-transitions/
http://dev.w3.org/csswg/css3-transitions/#starting */
div {width: 80px; height: 80px; border: 1px solid #ccc;}
div > div {width: 50px; height: 50px; margin: 14px; border-color: #777;}
/* transition on mouseover, not mouseout (snaps back) */
.one:hover div {transition: transform 1s linear; transform: rotate(270deg);}
/* transition on default state: transitions both ways */
.two div {transition: transform 1s linear;}
@oli
oli / dabblet.css
Created Dec 27, 2011
CSS Transitions we’d like to use
View dabblet.css
/* CSS Transitions we’d like to use */
/*
the spec doesn’t allow these atm:
1 background-image
2 gradients
3 float
4 display between none & anything
5 position between static and absolute
6 height/width (plus top/right/bottom/left) between auto & a length/% (ref: 7,8)
7 max-height/max-width workaround for height/width
@oli
oli / dabblet.css
Created Jan 1, 2012
Using multiple values for CSS Transitions
View dabblet.css
/* Using multiple values for CSS Transitions
1 individual: declare three transitions as comma-separated per property
2 repeated: as individual, but transition delay only declared once
3 shorthand property
Results:
* Chrome 16: in .repeated single value is repeated
* Safari 5.1.2: in .repeated single value is repeated
* FF 9: in .repeated single value is repeated
* Opera 11.60: in .repeated single value is repeated (but box-shadow instant in all)
@oli
oli / dabblet.css
Created Jan 2, 2012
Transitions bug with links
View dabblet.css
/* Transitions bug with links */
/* ref: http://jsfiddle.net/sMH9K/embedded/result,html,css/ */
body {background-color: #ccc;}
a {
font-size: 300%;
color: blue;
transition: all 1s linear;
}
a:visited {color: yellow;}
a:visited:hover, a:hover, a:focus, a:active {color: red;}
@oli
oli / dabblet.css
Created Jan 6, 2012
anti-aliasing in 2D and 3D transforms
View dabblet.css
/* anti-aliasing in 2D and 3D transforms */
/* from KrofDrakula https://github.com/LeaVerou/prefixfree/issues/16 */
.wrapper {width: 264px;}
div > div, .box {
width: 240px;
height: 80px;
margin: 24px;
border: 5px solid #999;
border-radius: 5px;
padding: 3px;
@oli
oli / dabblet.css
Created Jan 9, 2012
CSS Animations basic tests
View dabblet.css
/* CSS Animations basic tests */
/* via default (on page load), :hover and :checked */
@keyframes startsame {from {background-color: rgba(245,163,163,.7);}}
@keyframes endsame {to {background-color: rgba(163, 245, 163, .7);}}
@keyframes startonly {from {background-color: #ccc;}}
@keyframes endonly {to {background-color: #ccc;}}
@keyframes bothsame {
from {background-color: rgba(245,163,163,.7);}
to {background-color: rgba(163, 245, 163, .7);}
}
@oli
oli / dabblet.css
Created Jan 10, 2012
CSS Animations we’d like to use
View dabblet.css
/* CSS Animations we’d like to use */
/*
the spec doesn’t allow these atm:
1 background-image
2 gradients
3 float
5 display between none & anything
6 position between static and absolute
6 height/width (plus top/right/bottom/left) between auto & a length/% (ref: 7,8)
You can’t perform that action at this time.