ludviglindblom

!function(){t=[,,function(t){function e(t){this.__parent=t,this.__character_count=0,this.__indent_count=-1,this.__alignment_count=0,this.__wrap_point_index=0,this.__wrap_point_character_count=0,this.__wrap_point_indent_count=-1,this.__wrap_point_alignment_count=0,this.__items=[]}function i(t,e){this.__cache=[""],this.__indent_size=t.indent_size,this.__indent_string=t.indent_char,t.indent_with_tabs||(this.__indent_string=Array(t.indent_size+1).join(t.indent_char)),e=e||"",t.indent_level>0&&(e=Array(t.indent_level+1).join(this.__indent_string)),this.__base_string=e,this.__base_string_length=e.length}function n(t,n){this.__indent_cache=new i(t,n),this.raw=!1,this._end_with_newline=t.end_with_newline,this.indent_size=t.indent_size,this.wrap_line_length=t.wrap_line_length,this.indent_empty_lines=t.indent_empty_lines,this.__lines=[],this.previous_line=null,this.current_line=null,this.next_line=new e(this),this.space_before_token=!1,this.non_breaking_space=!1,this.previous_token_wrapped=!1,this.__add_outputline()}e.

ludviglindblom

jPOVjW

A Pen by Ludvig Lindblom on CodePen.

License.

ludviglindblom

Keybase proof

I hereby claim:

• I am ludviglindblom on github.
• I am ludvig (https://keybase.io/ludvig) on keybase.
• I have a public key whose fingerprint is 1DC6 BD21 F67D 26D4 5831 3211 A6C3 1847 0D22 1965

To claim this, I am signing this object:

ludviglindblom

<div class="wrapper">
  <div class="box one">
    <p>Hello World!</p>
  </div>
  <div class="box two">
    <p>Hello World!</p>
  </div>
  <div class="box one">
    <p>Hello World!</p>
  </div>

ludviglindblom

/* Image interpolation demo */

@keyframes browsers {
	from, to { background-image: url('http://lea.verou.me/css-4d/img/firefox-logo.png'); }
	20% { background-image: url('http://lea.verou.me/css-4d/img/chrome-logo.png'); }
	40% { background-image: url('http://lea.verou.me/css-4d/img/safari-logo.png'); }
	60% { background-image: url('http://lea.verou.me/css-4d/img/opera-logo.png'); }
	80% { background-image: url('http://lea.verou.me/css-4d/img/ie-logo.png'); }
}

ludviglindblom

/* CSS States */
body {
	background: url(http://dabblet.com/img/noise.png);
	background-color: #F5F2F0;
	font-family: Georgia, serif;
	font-size: 18px;
	line-height: 1.6em;
	text-shadow: 0 2px 0 white;
	color: #222;
}

ludviglindblom

div {
	width: 400px;
	height: 200px;
	background-image: url("http://lorempixel.com/400/200/animals/1/");
	background-repeat: no-repeat;
	transition: all 0.5s;
}
div:hover {
	background-image: url("http://lorempixel.com/400/200/animals/2/");
	transition: all 0.5s;

ludviglindblom

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

ludviglindblom

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

ludviglindblom

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