brito

/* perspective */
* { transition:all 261ms cubic-bezier(.6,0,1,0.6) }
body { perspective:.6em; font-size:400px;
  background:#fff }
 
@keyframes spin {
  38.1% { transform:rotateX(111.24deg) }
  61.8% { transform:rotateY(137.49deg) }}
  
  section { background:hsla(222.45,61.8%,38.1%,.3);

brito

/**
 * Small Demos
 */

head, body { padding:0; margin:0 }
header menu { text-indent:-30em; display:inline-block;
  background:url(http://f.cl.ly/items/2b2D430f0I362O0B1B1I/511%20white.png) no-repeat 50% black;
  background-size:contain; margin:0;
  width:100%; height:3em }
  

brito

/* Small Rotations*/

* { transition:all 500ms }
body { perspective:5em; font:200px Georgia; background:#fff }
a { color:#b6d437; text-decoration:none }
 
@keyframes spin { to { transform:rotateY(360deg) }}
  
section { 

brito

/**
 * Floating image
 */
p { overflow:hidden }
img { float:left }

brito

/* Small Rotations*/

body { perspective:5em; font:200px Georgia; background:#fff }
a { color:#b6d437; text-decoration:none }
 
@keyframes spin { 
  from{ transform:rotateY(-35deg) }
  to { transform:rotateY(35deg) }}
  
section { 

brito

/* spinny */
section { width:1em; height:1em; margin:auto; 
  border:1px solid black; background:hsla(137,100%,30%,.3);
  transform-origin:50%; transform-style:preserve-3d }

  @keyframes spin { 50% { transform:rotate3d(1,1,1,579.6deg) } }
  #a { animation:spin 8s infinite }
  #b { animation:spin 5s infinite }
  #c { animation:spin 3s infinite }

brito

/**
 * Bubble Orchestra
 */

/* demo */
.bubble { top:20px }
.quote { left:200px }
.autocomplete { left:600px }

/* resets */

brito

/** 
 * jQuery.autocomplete
 * 
 * @param config {Object}
 * @example <code>
  $('#search [name=query]').autocomplete({ 
    url: '/search/suggest',
    list_container: '#suggestions',
    template: '<li>suggestion</li>'
  });

brito

/* message massage */

/* setup */
body { font:16px Proxima Nova }
#dialog { background:#BBDD49; box-shadow:0 0 15px rgba(0,0,0,.4);
  background:linear-gradient(top, #D2EE59, #85B524);
  border:3px solid #FFF; border-radius:10px;
  position:fixed; display:block; left:50%; top:50%;
  margin:-183px auto 0 -266px; padding:15px 20px 20px; width:486px }
  

brito

/* state transitions */

/* setup */
body { font:16px Proxima Nova }
#dialog { background:#BBDD49; box-shadow:0 0 15px rgba(0,0,0,.4);
  background:linear-gradient(top, #D2EE59, #85B524);
  border:3px solid #FFF; border-radius:10px;
  position:fixed; display:block; left:50%; top:50%;
  margin:-183px auto 0 -266px; padding:15px 20px 20px; width:486px }