Skip to content

Instantly share code, notes, and snippets.

/* http://twitter.github.com/bootstrap/scaffolding.html#responsive */
/* Landscape phones and down */
@media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 768px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 940px) { ... }
@jcsrb
jcsrb / dabblet.css
Created August 13, 2012 10:13 — forked from LeaVerou/dabblet.css
Move in a circle without wrapper elements
/**
* Move in a circle without wrapper elements
* Idea by Aryeh Gregor, simplified by Lea Verou
*/
@keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
/**
* rotate card (Chrome bug http://code.google.com/p/chromium/issues/detail?id=97458 )
*/
.id-card {
width: 200px;
height: 200px;
padding: 5%;
border-radius: 50%;
box-sizing: border-box;
background: plum;
@jcsrb
jcsrb / dabblet.css
Created February 20, 2012 08:46
Pure CSS Picture Frame
/* Pure CSS Picture Frame */
html {
background-color: #653845;
background-image: linear-gradient(45deg, hsla(0,0%,0%,.1) 50%, transparent 50%),
linear-gradient(-45deg, hsla(0,0%,0%,.1) 50%, transparent 50%);
background-size: .25em .25em;
box-shadow: inset 0 0 500px hsla(0,0%,0%,.5);
height: 100%;
}
<!--[if lte IE 6]>
<style type="text/css">
#ie6msg{border:3px solid #090; margin:8px 0; background:#cfc; color:#000;}
#ie6msg h4{margin:8px; padding:0;}
#ie6msg p{margin:8px; padding:0;}
#ie6msg p a.getie8{font-weight:bold; color:#006;}
#ie6msg p a.ie6expl{font-weight:normal; color:#006;}
</style>
<div id="ie6msg">
<h4>Did you know that your browser is out of date?</h4>