menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Swatch Book with CSS3 and jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Animated Swatch Book with CSS3 and jQuery" />
<meta name="keywords" content="swatch book, css3, jquery, animated, rotation, transition, folding fan" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="modernizr.js"></script>
<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top clearfix">
<a href="http://tympanus.net/Development/3DPanelLayout/">
<strong>« Previous Demo: </strong>3D Panel Layout
</a>
<span class="right">
<a href="http://fontello.com/">Icon Font made with Fontello</a>
<a href="http://tympanus.net/codrops/2012/07/02/swatch-book-with-css3-and-jquery/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
</div><!--/ Codrops top bar -->
<header>
<h1><span>Swatch Book</span> with CSS3 & jQuery</h1>
<h2>Fun with skeuomorphism & CSS3 rotations</h2>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
<a href="index5.html">Demo 5</a>
</nav>
<div class="support-note"><!-- let's check browser support with modernizr -->
<!--span class="no-cssanimations">CSS animations are not supported in your browser</span-->
<span class="no-csstransforms">CSS transforms are not supported in your browser</span>
<!--span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span-->
<span class="no-csstransitions">CSS transitions are not supported in your browser</span>
<span class="note-ie">Sorry, only modern browsers.</span>
</div>
</header>
<section class="main">
<div id="sb-container" class="sb-container">
<div>
<span class="sb-icon icon-cog"></span>
<h4><span>All Settings</span></h4>
</div>
<div>
<span class="sb-icon icon-flight"></span>
<h4><span>User Modes</span></h4>
</div>
<div>
<span class="sb-icon icon-eye"></span>
<h4><span>Browse All</span></h4>
</div>
<div>
<span class="sb-icon icon-install"></span>
<h4><span>Install App</span></h4>
</div>
<div>
<span class="sb-icon icon-bag"></span>
<h4><span>Productivity</span></h4>
</div>
<div>
<span class="sb-icon icon-globe"></span>
<h4><span>All Options</span></h4>
</div>
<div>
<span class="sb-icon icon-picture"></span>
<h4><span>User Images</span></h4>
</div>
<div>
<span class="sb-icon icon-video"></span>
<h4><span>User Videos</span></h4>
</div>
<div>
<span class="sb-icon icon-download"></span>
<h4><span>Download App</span></h4>
</div>
<div>
<span class="sb-icon icon-mobile"></span>
<h4><span>Mobile Theme</span></h4>
</div>
<div>
<span class="sb-icon icon-camera"></span>
<h4><span>Digital App</span></h4>
</div>
<div>
<h4><span>Profile</span></h4>
<h5><span>We ♥ color</span></h5>
</div>
</div><!-- sb-container -->
</section>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="swatchbook.js"></script>
<script type="text/javascript">
$(function() {
$( '#sb-container' ).swatchbook();
});
</script>
<script src="http://tympanus.net/codrops/adpacks/demoad.js"></script>
</body>
</html>
style.css
.sb-container {
position: relative;
width: 150px;
height: 400px;
margin: 30px auto 0 auto;
}
.sb-container div {
position: absolute;
top: 0;
left: 0;
width: 130px;
background: #fff;
height: 400px;
border-radius: 5px;
cursor: pointer;
text-align: center;
background-image: url(../images/fabric.png);
-webkit-transform-origin: 25% 90%;
-moz-transform-origin: 25% 90%;
-o-transform-origin: 25% 90%;
-ms-transform-origin: 25% 90%;
transform-origin: 25% 90%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.sb-container div:nth-child(1){
background-color: #ea2a29;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);
}
.sb-container div:nth-child(2){
background-color: #f16729;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 2px 2px 1px rgba(0,0,0,0.1);
}
.sb-container div:nth-child(3){
background-color: #f89322;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 3px 3px 2px rgba(0,0,0,0.2);
}
.sb-container div:nth-child(4){
background-color: #ffcf14;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 4px 4px 4px rgba(0,0,0,0.2);
}
.sb-container div:nth-child(5){
background-color: #ffea0d;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 5px 5px 6px rgba(0,0,0,0.3);
}
.sb-container div:nth-child(6){
background-color: #87b11d;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3);
}
.sb-container div:nth-child(7){
background-color: #008253;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 7px 7px 10px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(8){
background-color: #3277b5;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 8px 8px 12px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(9){
background-color: #4c549f;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 9px 9px 14px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(10){
background-color: #764394;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 10px 10px 16px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(11){
background-color: #ca0d86;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 11px 11px 18px rgba(0,0,0,0.4);
}
.sb-container div:last-child{
background: #645b5c url(../images/cover.jpg) repeat center center;
box-shadow:
-1px -1px 3px rgba(0,0,0,0.2),
12px 12px 20px rgba(0,0,0,0.6),
inset 2px 2px 0 rgba(255, 255, 255, 0.1);
}
.sb-container div:last-child:after{
content: '';
position: absolute;
bottom: 15px;
left: 15px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #dddddd;
background: -moz-linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#dddddd), color-stop(48%,#58535e), color-stop(100%,#889396));
background: -webkit-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%);
background: -o-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%);
background: -ms-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%);
background: linear-gradient(135deg, #dddddd 0%,#58535e 48%,#889396 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#889396',GradientType=1 );
box-shadow: -1px -1px 1px rgba(0,0,0,0.5), 1px 1px 1px rgba(255,255,255,0.1);
}
.sb-container div h4{
color: rgba(255,255,255,0.9);
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
font-weight: 700;
font-size: 16px;
text-transform: uppercase;
border-top: 1px dashed rgba(0,0,0,0.1);
border-bottom: 1px dashed rgba(0,0,0,0.1);
margin: 5px;
padding: 5px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sb-container div:last-child h4{
background: rgba(0,0,0,0.2);
box-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
.sb-container div:last-child h5{
font-size: 50px;
white-space: nowrap;
text-align: left;
margin: 0;
padding: 0;
position: absolute;
line-height: 50px;
top: 0px;
left: 0px;
color: #111;
text-shadow: -1px -1px 1px rgba(255,255,255,0.1);
text-transform: uppercase;
-webkit-transform: rotate(-90deg) translateX(-157%) translateY(73px);
-moz-transform: rotate(-90deg) translateX(-157%) translateY(73px);
-o-transform: rotate(-90deg) translateX(-157%) translateY(73px);
-ms-transform: rotate(-90deg) translateX(-157%) translateY(73px);
transform: rotate(-90deg) translateX(-157%) translateY(73px);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
span.sb-icon{
display: block;
height: 70px;
width: 70px;
margin: 20px auto;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
span.sb-icon:before {
font-family: 'icons';
font-style: normal;
font-weight: normal;
speak: none;
display: block;
text-decoration: inherit;
text-align: center;
text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
line-height: 64px;
width: 100%;
font-size: 60px;
color: #000;
text-shadow: 0 0 1px #000;
}
.icon-cog:before { content: '\35'; } /* '5' */
.icon-flight:before { content: '\37'; } /* '7' */
.icon-eye:before { content: '\34'; } /* '4' */
.icon-install:before { content: '\39'; } /* '9' */
.icon-bag:before { content: '\36'; } /* '6' */
.icon-globe:before { content: '\38'; } /* '8' */
.icon-picture:before { content: '\32'; } /* '2' */
.icon-video:before { content: '\30'; } /* '0' */
.icon-download:before { content: '\41'; } /* 'A' */
.icon-mobile:before { content: '\42'; } /* 'B' */
.icon-camera:before { content: '\33'; } /* '3' */
swatchbook.js
/**
* jquery.swatchbook.js v1.1.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2012, Codrops
* http://www.codrops.com
*/
;( function( $, window, undefined ) {
'use strict';
// global
var Modernizr = window.Modernizr;
jQuery.fn.reverse = [].reverse;
$.SwatchBook = function( options, element ) {
this.$el = $( element );
this._init( options );
};
$.SwatchBook.defaults = {
// index of initial centered item
center : 6,
// number of degrees that is between each item
angleInc : 8,
speed : 700,
easing : 'ease',
// amount in degrees for the opened item's next sibling
proximity : 45,
// amount in degrees between the opened item's next siblings
neighbor : 4,
// animate on load
onLoadAnim : true,
// if it should be closed by default
initclosed : false,
// index of the element that when clicked, triggers the open/close function
// by default there is no such element
closeIdx : -1,
// open one specific item initially (overrides initclosed)
openAt : -1
};
$.SwatchBook.prototype = {
_init : function( options ) {
this.options = $.extend( true, {}, $.SwatchBook.defaults, options );
this.$items = this.$el.children( 'div' );
this.itemsCount = this.$items.length;
this.current = -1;
this.support = Modernizr.csstransitions;
this.cache = [];
if( this.options.onLoadAnim ) {
this._setTransition();
}
if( !this.options.initclosed ) {
this._center( this.options.center, this.options.onLoadAnim );
}
else {
this.isClosed = true;
if( !this.options.onLoadAnim ) {
this._setTransition();
}
}
if( this.options.openAt >= 0 && this.options.openAt < this.itemsCount ) {
this._openItem( this.$items.eq( this.options.openAt ) );
}
this._initEvents();
},
_setTransition : function() {
if( this.support ) {
this.$items.css( { 'transition': 'all ' + this.options.speed + 'ms ' + this.options.easing } );
}
},
_openclose : function() {
this.isClosed ? this._center( this.options.center, true ) : this.$items.css( { 'transform' : 'rotate(0deg)' } );
this.isClosed = !this.isClosed;
},
_center : function( idx, anim ) {
var self = this;
this.$items.each( function( i ) {
var transformStr = 'rotate(' + ( self.options.angleInc * ( i - idx ) ) + 'deg)';
$( this ).css( { 'transform' : transformStr } );
} );
},
_openItem : function( $item ) {
var itmIdx = $item.index();
if( itmIdx !== this.current ) {
if( this.options.closeIdx !== -1 && itmIdx === this.options.closeIdx ) {
this._openclose();
this._setCurrent();
}
else {
this._setCurrent( $item );
$item.css( { 'transform' : 'rotate(0deg)' } );
this._rotateSiblings( $item );
}
}
},
_initEvents : function() {
var self = this;
this.$items.on( 'click.swatchbook', function( event ) {
self._openItem( $( this ) );
} );
},
_rotateSiblings : function( $item ) {
var self = this,
idx = $item.index(),
$cached = this.cache[ idx ],
$siblings;
if( $cached ) {
$siblings = $cached;
}
else {
$siblings = $item.siblings();
this.cache[ idx ] = $siblings;
}
$siblings.each( function( i ) {
var rotateVal = i < idx ?
self.options.angleInc * ( i - idx ) :
i - idx === 1 ?
self.options.proximity :
self.options.proximity + ( i - idx - 1 ) * self.options.neighbor;
var transformStr = 'rotate(' + rotateVal + 'deg)';
$( this ).css( { 'transform' : transformStr } );
} );
},
_setCurrent : function( $el ) {
this.current = $el ? $el.index() : -1;
this.$items.removeClass( 'ff-active' );
if( $el ) {
$el.addClass( 'ff-active' );
}
}
};
var logError = function( message ) {
if ( window.console ) {
window.console.error( message );
}
};
$.fn.swatchbook = function( options ) {
var instance = $.data( this, 'swatchbook' );
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
if ( !instance ) {
logError( "cannot call methods on swatchbook prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for swatchbook instance" );
return;
}
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
if ( instance ) {
instance._init();
}
else {
instance = $.data( this, 'swatchbook', new $.SwatchBook( options, this ) );
}
});
}
return instance;
};
} )( jQuery, window );
modernizr.js
/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
* Build: http://www.modernizr.com/download/#-cssanimations-csstransforms-csstransforms3d-csstransitions-shiv-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes
*/
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.5.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);return f=["­","<style>",a,"</style>"].join(""),k.id=h,(l?k:m).innerHTML+=f,m.appendChild(k),l||(m.style.background="",g.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e});var G=function(a,c){var d=a.join(""),f=c.length;w(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d?d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"":"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=(i.csstransforms3d&&i.csstransforms3d.offsetLeft)===9&&i.csstransforms3d.offsetHeight===3},f,c)}([,["@media (",m.join("transform-3d),("),h,")","{#csstransforms3d{left:9px;position:absolute;height:3px;}}"].join("")],[,"csstransforms3d"]);q.cssanimations=function(){return F("animationName")},q.csstransforms=function(){return!!F("transform")},q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d),a},q.csstransitions=function(){return F("transition")};for(var H in q)y(q,H)&&(v=H.toLowerCase(),e[v]=q[H](),t.push((e[v]?"":"no-")+v));return z(""),i=k=null,function(a,b){function g(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function h(){var a=k.elements;return typeof a=="string"?a.split(" "):a}function i(a){var b={},c=a.createElement,e=a.createDocumentFragment,f=e();a.createElement=function(a){var e=(b[a]||(b[a]=c(a))).cloneNode();return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+h().join().replace(/\w+/g,function(a){return b[a]=c(a),f.createElement(a),'c("'+a+'")'})+");return n}")(k,f)}function j(a){var b;return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),f||(b=!i(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;(function(){var a=b.createElement("a");a.innerHTML="<xyz></xyz>",e="hidden"in a,f=a.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var k={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j};a.html5=k,j(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document);
demo.css
@font-face {
font-family: 'icons';
src: url("font/icons.eot");
src: url(".font/icons.eot?#iefix") format('embedded-opentype'), url("font/icons.woff") format('woff'), url("font/icons.ttf") format('truetype'), url("font/icons.svg#icons") format('svg');
font-weight: normal;
font-style: normal;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
body{
font-family: 'Open Sans Condensed','Arial Narrow', serif;
background: #ddd url(../images/egg_shell.jpg) repeat top left;
font-weight: 400;
font-size: 15px;
color: #333;
overflow: scroll;
overflow-x: hidden;
}
a{
color: #555;
text-decoration: none;
}
.container{
width: 100%;
position: relative;
}
.clr{
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.main{
width: 1000px;
height: 700px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.container > header{
margin: 10px;
padding: 20px 10px 10px 10px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
text-align: center;
}
.container > header h1{
font-size: 36px;
line-height: 36px;
margin: 0;
position: relative;
font-weight: 300;
color: #524f4e;
text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
}
.container > header h1 span{
font-weight: 700;
}
.container > header h2{
font-size: 14px;
font-weight: 300;
margin: 0;
padding: 15px 0 5px 0;
color: #888;
font-family: Cambria, Georgia, serif;
font-style: italic;
text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
}
/* Header Style */
.codrops-top{
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
z-index: 9999;
position: relative;
font-family: Cambria, Georgia, serif;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a{
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover{
background: rgba(255,255,255,0.3);
}
.codrops-top span.right{
float: right;
}
.codrops-top span.right a{
float: left;
display: block;
}
/* Demo Buttons Style */
.codrops-demos{
text-align:center;
display: block;
line-height: 30px;
padding: 5px 0px;
}
.codrops-demos a{
display: inline-block;
margin: 0px 4px;
padding: 0px 6px;
color: #aaa;
line-height: 20px;
font-size: 13px;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #fff;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.codrops-demos a:hover{
color: #333;
background: #fff;
}
.codrops-demos a:active{
background: #fff;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{
background: #f0f0f0;
border-color: #d9d9d9;
color: #aaa;
box-shadow: 0 1px 1px rgba(255,255,255,0.7);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
.support-note span{
color: #ac375d;
font-size: 16px;
display: none;
font-weight: bold;
text-align: center;
padding: 5px 0;
}
.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions{
display: block;
}
The output shows like:
