Skip to content

Instantly share code, notes, and snippets.

View paceaux's full-sized avatar
🌐
Obsessing with languagey things

Paceaux paceaux

🌐
Obsessing with languagey things
View GitHub Profile
@paceaux
paceaux / Wanimate
Created March 9, 2012 06:08
A quick and dirty boilerplate for webkit animations
@-webkit-keyframes blink {
from {
opacity: 0.1;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 200%;
}
}
@paceaux
paceaux / digital-hourglass.css
Created March 9, 2012 06:31
Keep time using only CSS
body { background-color: #2574b0; }
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 100px;
background: #fff;
}
table{
border-spacing: .5em;
.triangle{
width: 0;
height: 0;
border-width: 5em;
border-style: solid;
border-color: green;
}
.triangle.side{
border-top-color: transparent;
@paceaux
paceaux / dabblet.css
Created April 6, 2012 04:50 — forked from anonymous/dabblet.css
css3 pendulum
body{
background: #f9f9f9;
}
div, article, section, p, ul, li html, body{
margin: 0;
padding:0;
}
@-webkit-keyframes swing{
@paceaux
paceaux / smooth-transitions.css
Created April 6, 2012 05:43
CSS3 smooth transitions
/*---
Normal state
---*/
a, a:link, a:visited{
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
@paceaux
paceaux / heart.css
Created May 10, 2012 19:09
Beating heart with CSS3
.heart {
width: 20em;
height: 20em;
position: relative;
overflow: hidden;
}
.heart span {
display: block;
position: absolute;
width: 10em;
@paceaux
paceaux / kedit.js
Created May 18, 2012 23:03
Konami Contenteditable plugin
(function($){
$.fn.kedit = function() {
var konami_keys = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
var konami_index = 0;
this.keydown(function(e){
if(e.keyCode === konami_keys[konami_index++]){
if(konami_index === konami_keys.length){
$(document).unbind('keydown', arguments.callee);
$('article, aside, header, footer, p, li, span').dblclick(function(e){
var $this = $(this);
@paceaux
paceaux / IE-after.js
Created May 29, 2012 20:36
Generated content for links to a PDF
if ($("html").is(".lt-ie9")){
$('a[href*="pdf"]').after(' <span class=".fuie">(PDF)</span>').css("display","inline");
@paceaux
paceaux / dabblet.css
Created June 27, 2012 02:16
the raven
.raven{
margin-left: 15em;
width: 21em;
border-top: .125em solid #333;
border-right: .125em solid #333;
border-bottom: .125em solid #333;
margin-right: 1em;
}
.raven p{
@paceaux
paceaux / css--and-html-debug-snippet
Created January 15, 2013 17:45
HTML and CSS debugging snippet. Use this to see every id and class on the page, along with the src/href and alt/title. Handing for quick debugging.
::before, ::after{
font-size: .75em;
padding: 0 1em;
text-decoration:none;
position:relative;
left: -2em;
}
::before{
color:blue;
top:-1em;