Just a random post.. comment
2.11.13
Recently, I've stumbled upon quite a number of stuffs on the internet that seemed to have catch my interest or sth. So, um, yeah.. the following are few of them;

From Codrops's Collective #87

Smart Transition in User Experience Design

this is umm..a great example of smart transitions and subtle animation pattern that improves user experience on websites. Yeah, that's about it..pretty interesting I would say..


Collective87_doCapture

well this site is no any better than the snipping tool or so, but what this app has to offer is sth snipping tool of screen capture can't .

take a look at the screen cap below, pretty cool huh? It screen captured my entire blog!


180 Beautiful Flat Icons (AI, EPS,PDF, PNG)

Collective87_flaticons

it simply is..Wonderful to have this thing free of charge! Impposible to get this thing elsewhere(for free) I guess..

Opening Type Font
Collective87_openingtype

the CSS:

@import url(http://fonts.googleapis.com/css?family=Lato:900);
*, *:before, *:after{
box-sizing:border-box;
}
body{
font-family: 'Lato', sans-serif;
}
div.foo{
width: 90%;
margin: 0 auto;
text-align: center;
}
.letter{
display: inline-block;
font-weight: 900;
font-size: 8em;
margin: 0.2em;
position: relative;
color: #00B4F1;
transform-style: preserve-3d;
perspective: 400;
z-index: 1;
}
.letter:before, .letter:after{
position:absolute;
content: attr(data-letter);
transform-origin: top left;
top:0;
left:0;
}
.letter, .letter:before, .letter:after{
transition: all 0.3s ease-in-out;
}
.letter:before{
color: #fff;
text-shadow:
-1px 0px 1px rgba(255,255,255,.8),
1px 0px 1px rgba(0,0,0,.8);
z-index: 3;
transform:
rotateX(0deg)
rotateY(-15deg)
rotateZ(0deg);
}
.letter:after{
color: rgba(0,0,0,.11);
z-index:2;
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(0deg)
rotateZ(0deg)
skew(0deg,1deg);
}
.letter:hover:before{
color: #fafafa;
transform:
rotateX(0deg)
rotateY(-40deg)
rotateZ(0deg);
}
.letter:hover:after{
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(40deg)
rotateZ(0deg)
skew(0deg,22deg);
}
The HTML :
<div class="foo">
  <span class="letter" data-letter="A">A</span>
  <span class="letter" data-letter="B">B</span>
  <span class="letter" data-letter="C">C</span>
  <span class="letter" data-letter="D">D</span>
  <span class="letter" data-letter="E">E</span>
  <span class="letter" data-letter="F">F</span>
  <span class="letter" data-letter="G">G</span>
  <span class="letter" data-letter="H">H</span>
  <span class="letter" data-letter="I">I</span>
  <span class="letter" data-letter="L">L</span>
  <span class="letter" data-letter="M">M</span>
  <span class="letter" data-letter="N">N</span>
  <span class="letter" data-letter="O">O</span>
  <span class="letter" data-letter="P">P</span>
  <span class="letter" data-letter="Q">Q</span>
  <span class="letter" data-letter="R">R</span>
  <span class="letter" data-letter="S">S</span>
  <span class="letter" data-letter="T">T</span>
  <span class="letter" data-letter="U">U</span>
  <span class="letter" data-letter="V">V</span>
  <span class="letter" data-letter="Z">Z</span>
</div>

Live Preview: http://codepen.io/diegopardo/pen/GqEho

Slidr.js

Collective87_slidrjs

really cool site XD


..and I pretty much drew my interest to Tumblr's default avatar pic.

 

 ..simply because .. I just love the colors and..and because they're origamis :|

...and I made these two icons (100px by 100px) . Apparently, it turned out to be really nice (to me) ..it's a surprise, surprise thing because.. I don't usually like anything I make :|


..the end..


..oh oh and before tht.. take a look at the pic below XD


...yep, that's bunneh Hitler :3 , LOL ><

...and this conversation:


..ROFL XD