daneden

// 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

/* Mac OS X Lion avatar in CSS */
body {
    background: #67676a;
    padding: 100px;
}

.avatar {
    display: block;
    position: relative;
    width: 128px;

daneden

/*
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

/*
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

.a {
background: #444;
width: 200px;
height: 200px;
margin: 24px auto;
box-shadow: 0 6px 10px -5px #000;
}

daneden

/**
 * Experimental loader
 */
 
 * {
 margin: 0;
 padding: 0;
 }

html {

daneden

/**
 * Light loader
 */
 
 * {
 margin: 0;
 padding: 0;
 }

html {

daneden

/**
 * 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.
 */
 

daneden

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

/**
 * 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.
 */