Skip to content

Instantly share code, notes, and snippets.

View dabblet.css
/* Pounding heart animation */
@keyframes pound {
to { transform: scale(1.4); }
}
.heart {
display: inline-block;
font-size: 150px;
color: #e00;
View dabblet.css
/**
* Links
*/
body {
background: #FFDEDB;
}
a {
display: inline-block;
@yangg
yangg / uri.js
Created Apr 24, 2012 — forked from jlong/uri.js
URI Parsing with Javascript
View uri.js
var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";
parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port; // => "3000"
parser.pathname; // => "/pathname/"
parser.search; // => "?search=test"
parser.hash; // => "#hash"
parser.host; // => "example.com:3000"
@yangg
yangg / dabblet.css
Created Feb 28, 2012 — forked from LeaVerou/dabblet.css
Flexible multiline definition lists with 2 lines of CSS
View dabblet.css
/**
* Flexible multiline definition lists with 2 lines of CSS
*/
dt, dd { display: inline; margin: 0; }
dd:after {
content: '\A';
white-space: pre;
}
@yangg
yangg / dabblet.css
Created Feb 9, 2012 — forked from LeaVerou/dabblet.css
Move in a circle without wrapper elements
View dabblet.css
/**
* 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);
@yangg
yangg / dabblet.css
Created Feb 9, 2012 — forked from LeaVerou/dabblet.css
Typing animation with pure CSS
View dabblet.css
/**
* Typing animation with pure CSS
* Revised. Browser support (as of Feb 2012): Firefox, IE10
*/
@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
h1 {
font: bold 200% Consolas, Monaco, monospace;
@yangg
yangg / dabblet.css
Created Dec 28, 2011 — forked from chriscoyier/dabblet.css
Checkbox Hack
View dabblet.css
/* Checkbox Hack */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
-webkit-appearance: push-button;
-moz-appearance: button;