roachhd

/**
 * animation-fill-mode with non-integer animation-iteration-count
 */

@keyframes foo { to { background: black }}

body {
	animation: foo 3s .4 both linear;
}

roachhd

/**
 * Bouncy bouncy
 */

@keyframes foo {
	60%, 80%, to { margin-top: 400px; }
	70% { margin-top: 330px; animation-timing-function: ease-in; }
	90% { margin-top: 370px; animation-timing-function: ease-in; }
}

roachhd

/**
 * Blinking animations
 */

@keyframes blink-smooth { to { opacity: 0 } }
@keyframes blink { 50% { opacity: 0 } }

p {
	animation: blink-smooth .3s 10 alternate;
	background: yellow;

roachhd

/**
 * RGB plane for R=255
 */

roachhd

Image Swapping ↔ pure Css

Drag the black border. Credits:Original idea: solipsistaCP´s pen

A Pen by Kseso on CodePen.

License.

roachhd

<h1>Increasing border-left width</h1>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>
<div class="progress"></div>

roachhd

.box {
  -moz-box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
  -o-box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 9px 5px 5px rgba(0, 0, 0, 0.75);
}

roachhd

function get_avatar_from_service(service, userid, size) {
    // this return the url that redirects to the according user image/avatar/profile picture
    // implemented services: google profiles, facebook, gravatar, twitter, tumblr, default fallback
    // for google   use get_avatar_from_service('google', profile-name or user-id , size-in-px )
    // for facebook use get_avatar_from_service('facebook', vanity url or user-id , size-in-px or size-as-word )
    // for gravatar use get_avatar_from_service('gravatar', md5 hash email@adress, size-in-px )
    // for twitter  use get_avatar_from_service('twitter', username, size-in-px or size-as-word )
    // for tumblr   use get_avatar_from_service('tumblr', blog-url, size-in-px )
    // everything else will go to the fallback
    // google and gravatar scale the avatar to any site, others will guided to the next best version

roachhd

// ==UserScript==
// @name Use Markdown, sometimes, in your HTML.
// @author Paul Irish <http://paulirish.com/>
// @link http://git.io/data-markdown
// @match *
// ==/UserScript==


// If you're not using this as a userscript just delete from this line up. It's cool, homey.

roachhd

Ways to handle space between inline-block elements

Forked from Chris Coyier's Pen Ways to handle space between inline-block elements.

A Pen by Captain Anonymous on CodePen.

License.