Skip to content

Instantly share code, notes, and snippets.

View loai-kanou's full-sized avatar
🎯
Focusing

Loai Kanou loai-kanou

🎯
Focusing
View GitHub Profile
@loai-kanou
loai-kanou / dabblet.css
Created August 5, 2013 03:44
Refactor of the WPD breadcrumbs bar based on the idea by @wernull
/**
* Refactor of the WPD breadcrumbs bar based on the idea by @wernull
*/
ol.breadcrumbs {
margin: 0 0 0 -1.1em;
padding: 0;
height: 1em;
text-transform: uppercase;
float: left;
@loai-kanou
loai-kanou / dabblet.css
Created August 5, 2013 03:44 — forked from LeaVerou/dabblet.css
Loading animation like the one seen on http://www.freeger.com/projects/contextad/ with 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).
*/
body {
background: #ccc51c;
min-height: 100%;
}
@loai-kanou
loai-kanou / dabblet.css
Created August 5, 2013 03:45 — forked from LeaVerou/dabblet.css
CSS transitions on stroke-dasharray
/**
* CSS transitions on stroke-dasharray
*/
circle {
stroke: red;
stroke-width: 10;
stroke-dasharray: 20, 20;
transition: 1s;
}
@loai-kanou
loai-kanou / dabblet.css
Created August 5, 2013 03:45 — forked from LeaVerou/dabblet.css
Playing with background-attachment
/**
* Playing with background-attachment
*/
pre {
max-height: 150px;
border: 1px solid silver;
overflow: auto;
border: 10px dotted red;
background: url('http://placedog.com/200/200');
@loai-kanou
loai-kanou / dabblet.css
Created August 5, 2013 03:46 — 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
/**
* 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
*/
li {
list-style: none;
display: inline-block;
padding: 1em 2em 1em 1em;
border: 1px solid rgba(0,0,0,.3);
border-radius: 0 999px 999px 0;
@loai-kanou
loai-kanou / dabblet.css
Created August 5, 2013 03:46 — forked from LeaVerou/dabblet.css
Flexible buttons with ems (duh!)
/**
* Flexible buttons with ems (duh!)
*/
body {
font-family: sans-serif
}
button {
padding: .5em .8em .4em;
@loai-kanou
loai-kanou / dabblet.css
Created August 5, 2013 03:46 — forked from LeaVerou/dabblet.css
Flags (In progress!)
/**
* Flags (In progress!)
*/
@font-face {
font-family: 'WPSymbols';
src: url('http://docs.webplatform.org/w/skins/webplatform/fonts/WPSymbols.woff') format('woff'),
url('http://docs.webplatform.org/w/skins/webplatform/fonts/WPSymbols.ttf') format('truetype');
}
@loai-kanou
loai-kanou / dabblet.css
Created August 5, 2013 03:46 — forked from LeaVerou/dabblet.css
Standardization status
/**
* Standardization status
*/
body {
background: #f9f7f3;
font-size: 14px;
}
/* Don't copy this rule, it’s just for the demo */
@loai-kanou
loai-kanou / dabblet.css
Created August 5, 2013 03:46 — forked from LeaVerou/dabblet.css
Overlapping shadows?
/**
* Overlapping shadows?
*/
font: bold 600% sans-serif;
letter-spacing: -.2em;
text-decoration: line-through underline;
text-shadow: 1em 1em rgba(0,255,0,.5);
@loai-kanou
loai-kanou / dabblet.css
Created August 5, 2013 03:46 — forked from LeaVerou/dabblet.css
Overflow border-radius (Gecko bug)
/**
* Overflow border-radius (Gecko bug)
*/
div {
background: deeppink;
width: 400px;
height: 300px;
border-radius: 9999999999999999999999999999999999px
}