Skip to content

Instantly share code, notes, and snippets.

Avatar

Daniel Eden daneden

View GitHub Profile
@daneden
daneden / animate.js
Created Dec 6, 2011
A function to apply animate.css classes dynamically
View animate.js
// Use the animate.css animations
function animate(element, effect, delay, callback) {
// Set a delay if needed
var animation = setTimeout(function () {
// Add the animation effect with classes
$(element).addClass('animate ' + effect);
// Check if the elemenr has been hidden to start with to prevent FOUC
if ($(element).css('visibility') == 'hidden') {
// If it has, show it (after the class has been added)
@daneden
daneden / dabblet.css
Created Jan 5, 2012
Mac OS X Lion avatar in CSS
View dabblet.css
/* Mac OS X Lion avatar in CSS */
body {
background: #67676a;
padding: 100px;
}
.avatar {
display: block;
position: relative;
width: 128px;
@daneden
daneden / dabblet.css
Created Jan 10, 2012
Search Suggestions
View dabblet.css
/*
Search Suggestions
Original design by Visual Idiot - http://dribbble.com/shots/377281-Search-Suggestions
*/
html {
min-height: 100%;
background: -webkit-linear-gradient(#dbddde, #b6babb);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
@daneden
daneden / dabblet.css
Created Jan 10, 2012
Search Suggestions
View dabblet.css
/*
Search Suggestions
Original design by Visual Idiot - http://dribbble.com/shots/377281-Search-Suggestions
*/
html {
min-height: 100%;
background: -webkit-linear-gradient(#dbddde, #b6babb);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
View dabblet.css
.a {
background: #444;
width: 200px;
height: 200px;
margin: 24px auto;
box-shadow: 0 6px 10px -5px #000;
}
@daneden
daneden / dabblet.css
Created Jan 24, 2012
Experimental loader
View dabblet.css
/**
* Experimental loader
*/
* {
margin: 0;
padding: 0;
}
html {
View dabblet.css
/**
* Light loader
*/
* {
margin: 0;
padding: 0;
}
html {
@daneden
daneden / dabblet.css
Created Jan 24, 2012
Path icon hover
View dabblet.css
/**
* Path icon hover
*
* Example of the desired effect (hover over the user avatar) https://path.com/p/5Eplz
*
* Close, but annoying that the animation runs on page load.
* Possible solution could be to fade entire page content in while initial
* animation runs.
*/
View dabblet.css
html {
min-height: 100%;
background: #363640 linear-gradient(rgba(0,0,20,0), rgba(0,0,20,.2));
}
div {
width: 500px;
padding: 40px 0;
height: 40px;
position: absolute;
@daneden
daneden / dabblet.css
Created Jan 26, 2012
Path icon hover
View dabblet.css
/**
* Path icon hover
*
* Example of the desired effect (hover over the user avatar) https://path.com/p/5Eplz
*
* Close, but annoying that the animation runs on page load.
* Possible solution could be to fade entire page content in while initial
* animation runs.
*/
You can’t perform that action at this time.