Skip to content

Instantly share code, notes, and snippets.

Max West maxw3st

Block or report user

Report or block maxw3st

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
@maxw3st
maxw3st / dabblet.css
Created Jan 31, 2015 — forked from LeaVerou/dabblet.css
Simple folded corners
View dabblet.css
/**
* Simple folded corners
*/
div {
background: yellowgreen; /* fallback */
background: linear-gradient(45deg, rgba(0,0,0,.4) 50%, transparent 0) 100% 0 / 25px 25px no-repeat,
linear-gradient(-135deg, transparent 18px, yellowgreen 0) 0 / auto; /* ceil(25/sqrt(2)) = 18 */
padding: 1em;
@maxw3st
maxw3st / dabblet.css
Created Oct 28, 2014 — forked from LeaVerou/dabblet.css
Static interpolation via paused animations
View dabblet.css
/**
* 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
*/
@keyframes foo {
from { background: red }
to { background: yellowgreen }
}
@maxw3st
maxw3st / dabblet.css
Created Oct 28, 2014 — forked from LeaVerou/dabblet.css
Static interpolation via paused animations
View dabblet.css
/**
* 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
*/
@keyframes foo {
from { background: red }
to { background: yellowgreen }
}
View dabblet.css
/**
* 3D cube via @LeaVerou http://lea.verou.me/2014/04/dynamically-generated-svg-through-sass-a-3d-animated-rgb-cube/
*/
body {
perspective: 600px;
perspective-origin: 300px -90px;
}
.cube, .cube:before, .cube:after,
@maxw3st
maxw3st / dabblet.css
Created Jul 20, 2013 — forked from LeaVerou/dabblet.css
Loading animation like the one seen on http://www.freeger.com/projects/contextad/ with CSS
View dabblet.css
/**
* Loading animation like the one seen on http://www.freeger.com/projects/contextad/ with CSS
* Caveat: Not DRY. The content needs to be repeated in a data- attribute (or directly in the CSS).
* Another good idea from @LeaVerou.
*/
body {
background: #ccc51c;
min-height: 100%;
}
@maxw3st
maxw3st / dabblet.css
Created Jul 16, 2013
body {perspective: 10000px;}
View dabblet.css
**
* CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
answer via: @meyerweb. but doesn't work in IE9. the solution below will, but it's brute force and not DRY.
*/
/* body {perspective: 10000px;} */
ul {transform: rotateY(1deg); transform-origin: 0 0; perspective: 10000px; transform-style: preserve-3d;}
li {
list-style: none;
/*display: inline-block;*/
padding: 1em 1em 1em 2em;
@maxw3st
maxw3st / dabblet.css
Created Jul 15, 2013
CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
View dabblet.css
/**
* CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
answer via: @meyerweb
*/
body {perspective: 10000px;}
ul {transform: rotateY(1deg); transform-origin: 0 0; perspective: 10000px; transform-style: preserve-3d;}
li {
list-style: none;
display: inline-block;
padding: 1em 2em 1em 2em;
@maxw3st
maxw3st / dabblet.css
Created Jul 15, 2013 — forked from anonymous/dabblet.css
CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
View dabblet.css
/**
* CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
answer via: @meyerweb
*/
body {perspective: 10000px;}
ul {transform: rotateY(1deg); transform-origin: 0 0; perspective: 10000px; transform-style: preserve-3d;}
li {
list-style: none;
display: inline-block;
padding: 1em 2em 1em 2em;
@maxw3st
maxw3st / dabblet.css
Created Jul 15, 2013
CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
View dabblet.css
/**
* CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
I used flex box to solve this. "flex-direction:column-reverse; " reverses the stacking order of the li elements.
*/
div {
display: inline-flex;
-moz-flex-direction: column;
-webkit-flex-direction: column;
@maxw3st
maxw3st / dabblet.css
Created Jul 15, 2013 — forked from LeaVerou/dabblet.css
CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
View dabblet.css
/**
* CSS Puzzle: Reverse the z-order of the <li>s without setting a separate z-index on each one in a way that works in IE9 and up
I used flex box to solve this. "flex-direction:column-reverse; " reverses the stacking order of the li elements.
*/
div {
display: inline-flex;
flex-direction: column;
padding: 1em 2em 1em 1em;
You can’t perform that action at this time.