├── README.md ├── css ├── demo.css ├── font │ ├── icons.eot │ ├── icons.svg │ ├── icons.ttf │ └── icons.woff ├── style.css ├── style2.css ├── style3.css ├── style4.css └── style5.css ├── images ├── ImageAttribution.txt ├── Thumbs.db ├── cartboard.jpg ├── cover.jpg ├── cover2.jpg ├── dark_leather.jpg ├── egg_shell.jpg └── fabric.png ├── index.html ├── index2.html ├── index3.html ├── index4.html ├── index5.html └── js ├── jquery.swatchbook.js └── modernizr.custom.79639.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | SwatchBook 3 | ========= 4 | 5 | A tutorial about how to create a swatch book like component that let's you open and rotate the single swatches revealing some details. We will be using CSS transforms and transitions and create a simple jQuery plugin. 6 | 7 | [article on Codrops](http://tympanus.net/codrops/?p=9719) 8 | 9 | [demo](http://tympanus.net/Tutorials/SwatchBook/) 10 | 11 | Licensed under the MIT License -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icons'; 3 | src: url("font/icons.eot"); 4 | 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'); 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | 9 | *, 10 | *:after, 11 | *:before { 12 | -webkit-box-sizing: border-box; 13 | -moz-box-sizing: border-box; 14 | box-sizing: border-box; 15 | padding: 0; 16 | margin: 0; 17 | } 18 | 19 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 20 | .clearfix:before, 21 | .clearfix:after { 22 | content: " "; /* 1 */ 23 | display: table; /* 2 */ 24 | } 25 | 26 | .clearfix:after { 27 | clear: both; 28 | } 29 | 30 | .clearfix { 31 | *zoom: 1; 32 | } 33 | 34 | body{ 35 | font-family: 'Open Sans Condensed','Arial Narrow', serif; 36 | background: #ddd url(../images/egg_shell.jpg) repeat top left; 37 | font-weight: 400; 38 | font-size: 15px; 39 | color: #333; 40 | overflow: scroll; 41 | overflow-x: hidden; 42 | } 43 | a{ 44 | color: #555; 45 | text-decoration: none; 46 | } 47 | .container{ 48 | width: 100%; 49 | position: relative; 50 | } 51 | .clr{ 52 | clear: both; 53 | padding: 0; 54 | height: 0; 55 | margin: 0; 56 | } 57 | .main{ 58 | width: 1000px; 59 | height: 700px; 60 | overflow: hidden; 61 | margin: 0 auto; 62 | position: relative; 63 | } 64 | .container > header{ 65 | margin: 10px; 66 | padding: 20px 10px 10px 10px; 67 | position: relative; 68 | display: block; 69 | text-shadow: 1px 1px 1px rgba(0,0,0,0.2); 70 | text-align: center; 71 | } 72 | .container > header h1{ 73 | font-size: 36px; 74 | line-height: 36px; 75 | margin: 0; 76 | position: relative; 77 | font-weight: 300; 78 | color: #524f4e; 79 | text-shadow: 1px 1px 1px rgba(255,255,255,0.7); 80 | } 81 | .container > header h1 span{ 82 | font-weight: 700; 83 | } 84 | .container > header h2{ 85 | font-size: 14px; 86 | font-weight: 300; 87 | margin: 0; 88 | padding: 15px 0 5px 0; 89 | color: #888; 90 | font-family: Cambria, Georgia, serif; 91 | font-style: italic; 92 | text-shadow: 1px 1px 1px rgba(255,255,255,0.9); 93 | } 94 | /* Header Style */ 95 | .codrops-top{ 96 | line-height: 24px; 97 | font-size: 11px; 98 | background: #fff; 99 | background: rgba(255, 255, 255, 0.6); 100 | text-transform: uppercase; 101 | z-index: 9999; 102 | position: relative; 103 | font-family: Cambria, Georgia, serif; 104 | box-shadow: 1px 0px 2px rgba(0,0,0,0.2); 105 | } 106 | .codrops-top a{ 107 | padding: 0px 10px; 108 | letter-spacing: 1px; 109 | color: #333; 110 | display: inline-block; 111 | } 112 | .codrops-top a:hover{ 113 | background: rgba(255,255,255,0.3); 114 | } 115 | .codrops-top span.right{ 116 | float: right; 117 | } 118 | .codrops-top span.right a{ 119 | float: left; 120 | display: block; 121 | } 122 | /* Demo Buttons Style */ 123 | .codrops-demos{ 124 | text-align:center; 125 | display: block; 126 | line-height: 30px; 127 | padding: 5px 0px; 128 | } 129 | .codrops-demos a{ 130 | display: inline-block; 131 | margin: 0px 4px; 132 | padding: 0px 6px; 133 | color: #aaa; 134 | line-height: 20px; 135 | font-size: 13px; 136 | text-shadow: 1px 1px 1px #fff; 137 | border: 1px solid #fff; 138 | background: #ffffff; /* Old browsers */ 139 | background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */ 140 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */ 141 | background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */ 142 | background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */ 143 | background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */ 144 | background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */ 145 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ 146 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 147 | } 148 | .codrops-demos a:hover{ 149 | color: #333; 150 | background: #fff; 151 | } 152 | .codrops-demos a:active{ 153 | background: #fff; 154 | } 155 | .codrops-demos a.current-demo, 156 | .codrops-demos a.current-demo:hover{ 157 | background: #f0f0f0; 158 | border-color: #d9d9d9; 159 | color: #aaa; 160 | box-shadow: 0 1px 1px rgba(255,255,255,0.7); 161 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */ 162 | } 163 | .support-note span{ 164 | color: #ac375d; 165 | font-size: 16px; 166 | display: none; 167 | font-weight: bold; 168 | text-align: center; 169 | padding: 5px 0; 170 | } 171 | .no-cssanimations .support-note span.no-cssanimations, 172 | .no-csstransforms .support-note span.no-csstransforms, 173 | .no-csstransforms3d .support-note span.no-csstransforms3d, 174 | .no-csstransitions .support-note span.no-csstransitions{ 175 | display: block; 176 | } -------------------------------------------------------------------------------- /css/font/icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SwatchBook/c174bbaa5309722757c5736169d2c82eb3b00202/css/font/icons.eot -------------------------------------------------------------------------------- /css/font/icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20100429 at Mon Jul 2 09:32:12 2012 6 | By root 7 | Copyright (C) 2012 by original authors @ fontello.com 8 | 9 | 10 | 11 | 25 | 27 | 29 | 31 | 33 | 36 | 39 | 43 | 46 | 49 | 52 | 54 | 60 | 63 | 66 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /css/font/icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SwatchBook/c174bbaa5309722757c5736169d2c82eb3b00202/css/font/icons.ttf -------------------------------------------------------------------------------- /css/font/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SwatchBook/c174bbaa5309722757c5736169d2c82eb3b00202/css/font/icons.woff -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | .sb-container { 2 | position: relative; 3 | width: 150px; 4 | height: 400px; 5 | margin: 30px auto 0 auto; 6 | } 7 | 8 | .sb-container div { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | width: 130px; 13 | background: #fff; 14 | height: 400px; 15 | border-radius: 5px; 16 | cursor: pointer; 17 | text-align: center; 18 | background-image: url(../images/fabric.png); 19 | 20 | -webkit-transform-origin: 25% 90%; 21 | -moz-transform-origin: 25% 90%; 22 | -o-transform-origin: 25% 90%; 23 | -ms-transform-origin: 25% 90%; 24 | transform-origin: 25% 90%; 25 | 26 | -webkit-backface-visibility: hidden; 27 | -moz-backface-visibility: hidden; 28 | -ms-backface-visibility: hidden; 29 | -o-backface-visibility: hidden; 30 | backface-visibility: hidden; 31 | 32 | -webkit-tap-highlight-color: rgba(0,0,0,0); 33 | } 34 | 35 | .sb-container div:nth-child(1){ 36 | background-color: #ea2a29; 37 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1); 38 | } 39 | 40 | .sb-container div:nth-child(2){ 41 | background-color: #f16729; 42 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 2px 2px 1px rgba(0,0,0,0.1); 43 | } 44 | 45 | .sb-container div:nth-child(3){ 46 | background-color: #f89322; 47 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 3px 3px 2px rgba(0,0,0,0.2); 48 | } 49 | 50 | .sb-container div:nth-child(4){ 51 | background-color: #ffcf14; 52 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 4px 4px 4px rgba(0,0,0,0.2); 53 | } 54 | 55 | .sb-container div:nth-child(5){ 56 | background-color: #ffea0d; 57 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 5px 5px 6px rgba(0,0,0,0.3); 58 | } 59 | 60 | .sb-container div:nth-child(6){ 61 | background-color: #87b11d; 62 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3); 63 | } 64 | 65 | .sb-container div:nth-child(7){ 66 | background-color: #008253; 67 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 7px 7px 10px rgba(0,0,0,0.4); 68 | } 69 | 70 | .sb-container div:nth-child(8){ 71 | background-color: #3277b5; 72 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 8px 8px 12px rgba(0,0,0,0.4); 73 | } 74 | 75 | .sb-container div:nth-child(9){ 76 | background-color: #4c549f; 77 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 9px 9px 14px rgba(0,0,0,0.4); 78 | } 79 | 80 | .sb-container div:nth-child(10){ 81 | background-color: #764394; 82 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 10px 10px 16px rgba(0,0,0,0.4); 83 | } 84 | 85 | .sb-container div:nth-child(11){ 86 | background-color: #ca0d86; 87 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 11px 11px 18px rgba(0,0,0,0.4); 88 | } 89 | 90 | .sb-container div:last-child{ 91 | background: #645b5c url(../images/cover.jpg) repeat center center; 92 | box-shadow: 93 | -1px -1px 3px rgba(0,0,0,0.2), 94 | 12px 12px 20px rgba(0,0,0,0.6), 95 | inset 2px 2px 0 rgba(255, 255, 255, 0.1); 96 | } 97 | 98 | .sb-container div:last-child:after{ 99 | content: ''; 100 | position: absolute; 101 | bottom: 15px; 102 | left: 15px; 103 | width: 20px; 104 | height: 20px; 105 | border-radius: 50%; 106 | background: #dddddd; 107 | background: -moz-linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%); 108 | background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#dddddd), color-stop(48%,#58535e), color-stop(100%,#889396)); 109 | background: -webkit-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); 110 | background: -o-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); 111 | background: -ms-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); 112 | background: linear-gradient(135deg, #dddddd 0%,#58535e 48%,#889396 100%); 113 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#889396',GradientType=1 ); 114 | box-shadow: -1px -1px 1px rgba(0,0,0,0.5), 1px 1px 1px rgba(255,255,255,0.1); 115 | } 116 | 117 | .sb-container div h4{ 118 | color: rgba(255,255,255,0.9); 119 | text-shadow: 1px 1px 1px rgba(0,0,0,0.2); 120 | font-weight: 700; 121 | font-size: 16px; 122 | text-transform: uppercase; 123 | border-top: 1px dashed rgba(0,0,0,0.1); 124 | border-bottom: 1px dashed rgba(0,0,0,0.1); 125 | margin: 5px; 126 | padding: 5px; 127 | -webkit-touch-callout: none; 128 | -webkit-user-select: none; 129 | -khtml-user-select: none; 130 | -moz-user-select: none; 131 | -ms-user-select: none; 132 | user-select: none; 133 | } 134 | 135 | .sb-container div:last-child h4{ 136 | background: rgba(0,0,0,0.2); 137 | box-shadow: 0 1px 1px rgba(255,255,255,0.1); 138 | } 139 | 140 | .sb-container div:last-child h5{ 141 | font-size: 50px; 142 | white-space: nowrap; 143 | text-align: left; 144 | margin: 0; 145 | padding: 0; 146 | position: absolute; 147 | line-height: 50px; 148 | top: 0px; 149 | left: 0px; 150 | color: #111; 151 | text-shadow: -1px -1px 1px rgba(255,255,255,0.1); 152 | text-transform: uppercase; 153 | 154 | -webkit-transform: rotate(-90deg) translateX(-157%) translateY(73px); 155 | -moz-transform: rotate(-90deg) translateX(-157%) translateY(73px); 156 | -o-transform: rotate(-90deg) translateX(-157%) translateY(73px); 157 | -ms-transform: rotate(-90deg) translateX(-157%) translateY(73px); 158 | transform: rotate(-90deg) translateX(-157%) translateY(73px); 159 | 160 | -webkit-transform-origin: 0 0; 161 | -moz-transform-origin: 0 0; 162 | -o-transform-origin: 0 0; 163 | -ms-transform-origin: 0 0; 164 | transform-origin: 0 0; 165 | 166 | -webkit-touch-callout: none; 167 | -webkit-user-select: none; 168 | -khtml-user-select: none; 169 | -moz-user-select: none; 170 | -ms-user-select: none; 171 | user-select: none; 172 | } 173 | 174 | span.sb-icon{ 175 | display: block; 176 | height: 70px; 177 | width: 70px; 178 | margin: 20px auto; 179 | -webkit-touch-callout: none; 180 | -webkit-user-select: none; 181 | -khtml-user-select: none; 182 | -moz-user-select: none; 183 | -ms-user-select: none; 184 | user-select: none; 185 | } 186 | 187 | span.sb-icon:before { 188 | font-family: 'icons'; 189 | font-style: normal; 190 | font-weight: normal; 191 | speak: none; 192 | display: block; 193 | text-decoration: inherit; 194 | text-align: center; 195 | text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); 196 | line-height: 64px; 197 | width: 100%; 198 | font-size: 60px; 199 | color: #000; 200 | text-shadow: 0 0 1px #000; 201 | } 202 | 203 | .icon-cog:before { content: '\35'; } /* '5' */ 204 | .icon-flight:before { content: '\37'; } /* '7' */ 205 | .icon-eye:before { content: '\34'; } /* '4' */ 206 | .icon-install:before { content: '\39'; } /* '9' */ 207 | .icon-bag:before { content: '\36'; } /* '6' */ 208 | .icon-globe:before { content: '\38'; } /* '8' */ 209 | .icon-picture:before { content: '\32'; } /* '2' */ 210 | .icon-video:before { content: '\30'; } /* '0' */ 211 | .icon-download:before { content: '\41'; } /* 'A' */ 212 | .icon-mobile:before { content: '\42'; } /* 'B' */ 213 | .icon-camera:before { content: '\33'; } /* '3' */ -------------------------------------------------------------------------------- /css/style2.css: -------------------------------------------------------------------------------- 1 | .sb-container { 2 | position: relative; 3 | width: 150px; 4 | height: 400px; 5 | margin: 30px auto 0 auto; 6 | } 7 | 8 | .sb-container div { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | width: 130px; 13 | background: #fff; 14 | height: 400px; 15 | border-radius: 5px; 16 | box-shadow: 1px 1px 3px rgba(0,0,0,0.1); 17 | cursor: pointer; 18 | text-align: center; 19 | background-image: url(../images/fabric.png); 20 | -webkit-transform-origin: 25% 90%; 21 | -moz-transform-origin: 25% 90%; 22 | -o-transform-origin: 25% 90%; 23 | -ms-transform-origin: 25% 90%; 24 | transform-origin: 25% 90%; 25 | 26 | -webkit-backface-visibility: hidden; 27 | -moz-backface-visibility: hidden; 28 | -ms-backface-visibility: hidden; 29 | -o-backface-visibility: hidden; 30 | backface-visibility: hidden; 31 | 32 | -webkit-tap-highlight-color: rgba(0,0,0,0); 33 | } 34 | 35 | .sb-container div:nth-child(1){ 36 | background-color: #ea2a29; 37 | box-shadow: 1px 1px 3px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1); 38 | } 39 | 40 | .sb-container div:nth-child(2){ 41 | background-color: #f16729; 42 | box-shadow: 1px 1px 3px rgba(0,0,0,0.1), -2px 2px 1px rgba(0,0,0,0.1); 43 | } 44 | 45 | .sb-container div:nth-child(3){ 46 | background-color: #f89322; 47 | box-shadow: 1px 1px 3px rgba(0,0,0,0.1), -3px 3px 2px rgba(0,0,0,0.2); 48 | } 49 | 50 | .sb-container div:nth-child(4){ 51 | background-color: #ffcf14; 52 | box-shadow: 1px 1px 3px rgba(0,0,0,0.1), -4px 4px 4px rgba(0,0,0,0.2); 53 | } 54 | 55 | .sb-container div:nth-child(5){ 56 | background-color: #ffea0d; 57 | box-shadow: 1px 1px 3px rgba(0,0,0,0.1), -5px 5px 6px rgba(0,0,0,0.3); 58 | } 59 | 60 | .sb-container div:nth-child(6){ 61 | background-color: #87b11d; 62 | box-shadow: 1px 1px 3px rgba(0,0,0,0.1), -6px 6px 8px rgba(0,0,0,0.3); 63 | } 64 | 65 | .sb-container div:nth-child(7){ 66 | background-color: #008253; 67 | box-shadow: 1px 1px 3px rgba(0,0,0,0.1), -7px 7px 10px rgba(0,0,0,0.4); 68 | } 69 | 70 | .sb-container div:nth-child(8){ 71 | background-color: #3277b5; 72 | box-shadow: 1px 1px 3px rgba(0,0,0,0.1), -8px 8px 12px rgba(0,0,0,0.4); 73 | } 74 | 75 | .sb-container div:nth-child(9){ 76 | background-color: #4c549f; 77 | box-shadow: 1px 1px 3px rgba(0,0,0,0.1), -9px 9px 14px rgba(0,0,0,0.4); 78 | } 79 | 80 | .sb-container div:nth-child(10){ 81 | background-color: #764394; 82 | box-shadow: 1px 1px 3px rgba(0,0,0,0.1), -10px 10px 16px rgba(0,0,0,0.4); 83 | } 84 | 85 | .sb-container div:nth-child(11){ 86 | background-color: #ca0d86; 87 | box-shadow: 1px 1px 3px rgba(0,0,0,0.1), -11px 11px 18px rgba(0,0,0,0.4); 88 | } 89 | 90 | .sb-container div:last-child{ 91 | background: #645b5c url(../images/cover.jpg) repeat center center; 92 | box-shadow: 93 | 1px 1px 3px rgba(0,0,0,0.2), 94 | -12px 12px 20px rgba(0,0,0,0.6), 95 | inset 2px 2px 0 rgba(255, 255, 255, 0.1); 96 | } 97 | 98 | .sb-container div:last-child:after{ 99 | content: ''; 100 | position: absolute; 101 | bottom: 15px; 102 | left: 15px; 103 | width: 20px; 104 | height: 20px; 105 | border-radius: 50%; 106 | background: #dddddd; 107 | background: -moz-linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%); 108 | background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#dddddd), color-stop(48%,#58535e), color-stop(100%,#889396)); 109 | background: -webkit-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); 110 | background: -o-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); 111 | background: -ms-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); 112 | background: linear-gradient(135deg, #dddddd 0%,#58535e 48%,#889396 100%); 113 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#889396',GradientType=1 ); 114 | box-shadow: -1px -1px 1px rgba(255,255,255,0.1), 1px 1px 1px rgba(0,0,0,0.5); 115 | } 116 | 117 | .sb-container div h4{ 118 | color: rgba(255,255,255,0.9); 119 | text-shadow: 1px 1px 1px rgba(0,0,0,0.2); 120 | font-weight: 700; 121 | font-size: 16px; 122 | text-transform: uppercase; 123 | border-top: 1px dashed rgba(0,0,0,0.1); 124 | border-bottom: 1px dashed rgba(0,0,0,0.1); 125 | margin: 5px; 126 | padding: 5px; 127 | -webkit-touch-callout: none; 128 | -webkit-user-select: none; 129 | -khtml-user-select: none; 130 | -moz-user-select: none; 131 | -ms-user-select: none; 132 | user-select: none; 133 | } 134 | 135 | .sb-container div:last-child h4{ 136 | background: rgba(0,0,0,0.2); 137 | box-shadow: 0 1px 1px rgba(255,255,255,0.1); 138 | } 139 | 140 | .sb-container div:last-child h5{ 141 | font-size: 50px; 142 | white-space: nowrap; 143 | text-align: left; 144 | margin: 0; 145 | padding: 0; 146 | position: absolute; 147 | line-height: 50px; 148 | top: 0px; 149 | left: 0px; 150 | color: #111; 151 | text-shadow: -1px -1px 1px rgba(255,255,255,0.1); 152 | text-transform: uppercase; 153 | 154 | -webkit-transform: rotate(90deg) translateX(40%) translateY(-60px); 155 | -moz-transform: rotate(90deg) translateX(40%) translateY(-60px); 156 | -o-transform: rotate(90deg) translateX(40%) translateY(-60px); 157 | -ms-transform: rotate(90deg) translateX(40%) translateY(-60px); 158 | transform: rotate(90deg) translateX(40%) translateY(-60px); 159 | 160 | -webkit-transform-origin: 0 0; 161 | -moz-transform-origin: 0 0; 162 | -o-transform-origin: 0 0; 163 | -ms-transform-origin: 0 0; 164 | transform-origin: 0 0; 165 | 166 | -webkit-touch-callout: none; 167 | -webkit-user-select: none; 168 | -khtml-user-select: none; 169 | -moz-user-select: none; 170 | -ms-user-select: none; 171 | user-select: none; 172 | } 173 | 174 | span.sb-toggle{ 175 | padding: 5px; 176 | margin: 10px; 177 | display: block; 178 | color: #292524; 179 | font-size: 14px; 180 | font-weight: 700; 181 | text-transform: uppercase; 182 | line-height: 14px; 183 | text-shadow: 1px 1px 1px rgba(255,255,255,0.1); 184 | text-align: center; 185 | } 186 | 187 | span.sb-icon{ 188 | display: block; 189 | height: 70px; 190 | width: 70px; 191 | margin: 20px auto; 192 | -webkit-touch-callout: none; 193 | -webkit-user-select: none; 194 | -khtml-user-select: none; 195 | -moz-user-select: none; 196 | -ms-user-select: none; 197 | user-select: none; 198 | } 199 | span.sb-icon:before { 200 | font-family: 'icons'; 201 | font-style: normal; 202 | font-weight: normal; 203 | speak: none; 204 | display: block; 205 | text-decoration: inherit; 206 | text-align: center; 207 | text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); 208 | line-height: 64px; 209 | width: 100%; 210 | font-size: 60px; 211 | color: #000; 212 | text-shadow: 0 0 1px #000; 213 | } 214 | 215 | .icon-cog:before { content: '\35'; } /* '5' */ 216 | .icon-flight:before { content: '\37'; } /* '7' */ 217 | .icon-eye:before { content: '\34'; } /* '4' */ 218 | .icon-install:before { content: '\39'; } /* '9' */ 219 | .icon-bag:before { content: '\36'; } /* '6' */ 220 | .icon-globe:before { content: '\38'; } /* '8' */ 221 | .icon-picture:before { content: '\32'; } /* '2' */ 222 | .icon-video:before { content: '\30'; } /* '0' */ 223 | .icon-download:before { content: '\41'; } /* 'A' */ 224 | .icon-mobile:before { content: '\42'; } /* 'B' */ 225 | .icon-camera:before { content: '\33'; } /* '3' */ -------------------------------------------------------------------------------- /css/style3.css: -------------------------------------------------------------------------------- 1 | .sb-container { 2 | position: relative; 3 | width: 150px; 4 | height: 400px; 5 | margin: 30px auto 0 auto; 6 | } 7 | 8 | .sb-container div { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | width: 130px; 13 | background: #fff; 14 | height: 400px; 15 | border-radius: 5px; 16 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1); 17 | cursor: pointer; 18 | text-align: center; 19 | 20 | -webkit-transform-origin: 25% 90%; 21 | -moz-transform-origin: 25% 90%; 22 | -o-transform-origin: 25% 90%; 23 | -ms-transform-origin: 25% 90%; 24 | transform-origin: 25% 90%; 25 | 26 | -webkit-backface-visibility: hidden; 27 | -moz-backface-visibility: hidden; 28 | -ms-backface-visibility: hidden; 29 | -o-backface-visibility: hidden; 30 | backface-visibility: hidden; 31 | 32 | -webkit-tap-highlight-color: rgba(0,0,0,0); 33 | } 34 | 35 | .sb-container div:nth-child(1){ 36 | background-color: #ea2a29; 37 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1), inset 0 3px 0 rgba(255, 255, 255, 0.2); 38 | } 39 | 40 | .sb-container div:nth-child(2){ 41 | background-color: #f16729; 42 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 2px 2px 1px rgba(0,0,0,0.1), inset 0 3px 0 rgba(255, 255, 255, 0.2); 43 | } 44 | 45 | .sb-container div:nth-child(3){ 46 | background-color: #f89322; 47 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 3px 3px 2px rgba(0,0,0,0.2), inset 0 3px 0 rgba(255, 255, 255, 0.2); 48 | } 49 | 50 | .sb-container div:nth-child(4){ 51 | background-color: #ffcf14; 52 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 4px 4px 4px rgba(0,0,0,0.2), inset 0 3px 0 rgba(255, 255, 255, 0.2); 53 | } 54 | 55 | .sb-container div:nth-child(5){ 56 | background-color: #ffea0d; 57 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 5px 5px 6px rgba(0,0,0,0.3), inset 0 3px 0 rgba(255, 255, 255, 0.2); 58 | } 59 | 60 | .sb-container div:nth-child(6){ 61 | background-color: #87b11d; 62 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3), inset 0 3px 0 rgba(255, 255, 255, 0.2); 63 | } 64 | 65 | .sb-container div:nth-child(7){ 66 | background-color: #008253; 67 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 7px 7px 10px rgba(0,0,0,0.4), inset 0 3px 0 rgba(255, 255, 255, 0.2); 68 | } 69 | 70 | .sb-container div:nth-child(8){ 71 | background-color: #3277b5; 72 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 8px 8px 12px rgba(0,0,0,0.4), inset 0 3px 0 rgba(255, 255, 255, 0.2); 73 | } 74 | 75 | .sb-container div:nth-child(9){ 76 | background-color: #4c549f; 77 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 9px 9px 14px rgba(0,0,0,0.4), inset 0 3px 0 rgba(255, 255, 255, 0.2); 78 | } 79 | 80 | .sb-container div:nth-child(10){ 81 | background-color: #764394; 82 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 10px 10px 16px rgba(0,0,0,0.4), inset 0 3px 0 rgba(255, 255, 255, 0.2); 83 | } 84 | 85 | .sb-container div:nth-child(11){ 86 | background-color: #ca0d86; 87 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 11px 11px 18px rgba(0,0,0,0.4), inset 0 3px 0 rgba(255, 255, 255, 0.2); 88 | } 89 | 90 | .sb-container div:last-child{ 91 | background: #111 url(../images/dark_leather.jpg) repeat center center; 92 | box-shadow: 93 | -1px -1px 3px rgba(0,0,0,0.2), 94 | 12px 12px 20px rgba(0,0,0,0.6), 95 | inset 2px 2px 0 rgba(255, 255, 255, 0.1); 96 | } 97 | 98 | .sb-container div:last-child:after{ 99 | content: ''; 100 | position: absolute; 101 | bottom: 15px; 102 | left: 15px; 103 | width: 20px; 104 | height: 20px; 105 | border-radius: 50%; 106 | background: #dddddd; 107 | background: -moz-linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%); 108 | background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#dddddd), color-stop(48%,#58535e), color-stop(100%,#889396)); 109 | background: -webkit-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); 110 | background: -o-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); 111 | background: -ms-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); 112 | background: linear-gradient(135deg, #dddddd 0%,#58535e 48%,#889396 100%); 113 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#889396',GradientType=1 ); 114 | box-shadow: -1px -1px 1px rgba(0,0,0,0.7), 1px 1px 1px rgba(255,255,255,0.1); 115 | } 116 | 117 | .sb-container div h4{ 118 | color: rgba(255,255,255,0.9); 119 | text-shadow: 1px 1px 1px rgba(0,0,0,0.2); 120 | font-weight: 700; 121 | font-size: 16px; 122 | text-transform: uppercase; 123 | border-top: 1px dashed rgba(0,0,0,0.1); 124 | border-bottom: 1px dashed rgba(0,0,0,0.1); 125 | margin: 5px; 126 | padding: 5px; 127 | -webkit-touch-callout: none; 128 | -webkit-user-select: none; 129 | -khtml-user-select: none; 130 | -moz-user-select: none; 131 | -ms-user-select: none; 132 | user-select: none; 133 | } 134 | 135 | .sb-container div:last-child h4{ 136 | background: rgba(0,0,0,0.2); 137 | box-shadow: 0 1px 1px rgba(255,255,255,0.1); 138 | } 139 | 140 | .sb-container div:last-child h5{ 141 | font-size: 50px; 142 | white-space: nowrap; 143 | text-align: left; 144 | margin: 0; 145 | padding: 0; 146 | position: absolute; 147 | line-height: 50px; 148 | top: 0px; 149 | left: 0px; 150 | color: #000; 151 | text-shadow: -1px -1px 1px rgba(255,255,255,0.1); 152 | text-transform: uppercase; 153 | 154 | -webkit-transform: rotate(-90deg) translateX(-157%) translateY(73px); 155 | -moz-transform: rotate(-90deg) translateX(-157%) translateY(73px); 156 | -o-transform: rotate(-90deg) translateX(-157%) translateY(73px); 157 | -ms-transform: rotate(-90deg) translateX(-157%) translateY(73px); 158 | transform: rotate(-90deg) translateX(-157%) translateY(73px); 159 | 160 | -webkit-transform-origin: 0 0; 161 | -moz-transform-origin: 0 0; 162 | -o-transform-origin: 0 0; 163 | -ms-transform-origin: 0 0; 164 | transform-origin: 0 0; 165 | 166 | -webkit-touch-callout: none; 167 | -webkit-user-select: none; 168 | -khtml-user-select: none; 169 | -moz-user-select: none; 170 | -ms-user-select: none; 171 | user-select: none; 172 | } 173 | 174 | span.sb-toggle{ 175 | padding: 5px; 176 | margin: 10px; 177 | display: block; 178 | color: #000; 179 | font-size: 14px; 180 | font-weight: 700; 181 | text-transform: uppercase; 182 | line-height: 14px; 183 | text-shadow: 1px 1px 1px rgba(255,255,255,0.1); 184 | text-align: center; 185 | } 186 | 187 | span.sb-icon{ 188 | display: block; 189 | height: 70px; 190 | width: 70px; 191 | margin: 20px auto; 192 | -webkit-touch-callout: none; 193 | -webkit-user-select: none; 194 | -khtml-user-select: none; 195 | -moz-user-select: none; 196 | -ms-user-select: none; 197 | user-select: none; 198 | } 199 | 200 | span.sb-icon:before { 201 | font-family: 'icons'; 202 | font-style: normal; 203 | font-weight: normal; 204 | speak: none; 205 | display: block; 206 | text-decoration: inherit; 207 | text-align: center; 208 | text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); 209 | line-height: 64px; 210 | width: 100%; 211 | font-size: 60px; 212 | color: #000; 213 | text-shadow: 0 0 1px #000; 214 | 215 | } 216 | 217 | .icon-cog:before { content: '\35'; } /* '5' */ 218 | .icon-flight:before { content: '\37'; } /* '7' */ 219 | .icon-eye:before { content: '\34'; } /* '4' */ 220 | .icon-install:before { content: '\39'; } /* '9' */ 221 | .icon-bag:before { content: '\36'; } /* '6' */ 222 | .icon-globe:before { content: '\38'; } /* '8' */ 223 | .icon-picture:before { content: '\32'; } /* '2' */ 224 | .icon-video:before { content: '\30'; } /* '0' */ 225 | .icon-download:before { content: '\41'; } /* 'A' */ 226 | .icon-mobile:before { content: '\42'; } /* 'B' */ 227 | .icon-camera:before { content: '\33'; } /* '3' */ -------------------------------------------------------------------------------- /css/style4.css: -------------------------------------------------------------------------------- 1 | .sb-container { 2 | position: relative; 3 | width: 150px; 4 | height: 400px; 5 | margin: 30px auto 0 auto; 6 | } 7 | 8 | .sb-container div { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | width: 130px; 13 | background: #fff; 14 | height: 400px; 15 | box-shadow: 16 | -1px -1px 3px rgba(0,0,0,0.2); 17 | cursor: pointer; 18 | text-align: center; 19 | background: #b98357 url(../images/cartboard.jpg) repeat center center; 20 | 21 | -webkit-transform-origin: 25% 90%; 22 | -moz-transform-origin: 25% 90%; 23 | -o-transform-origin: 25% 90%; 24 | -ms-transform-origin: 25% 90%; 25 | transform-origin: 25% 90%; 26 | 27 | -webkit-backface-visibility: hidden; 28 | -moz-backface-visibility: hidden; 29 | -ms-backface-visibility: hidden; 30 | -o-backface-visibility: hidden; 31 | backface-visibility: hidden; 32 | 33 | -webkit-tap-highlight-color: rgba(0,0,0,0); 34 | } 35 | .sb-container div:nth-child(even){ 36 | background-position: top left; 37 | } 38 | 39 | .sb-container div:nth-child(1){ 40 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 1px 1px 1px rgba(0,0,0,0.1); 41 | } 42 | 43 | .sb-container div:nth-child(2){ 44 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 2px 2px 1px rgba(0,0,0,0.1); 45 | } 46 | 47 | .sb-container div:nth-child(3){ 48 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 3px 3px 2px rgba(0,0,0,0.2); 49 | } 50 | 51 | .sb-container div:nth-child(4){ 52 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 4px 4px 4px rgba(0,0,0,0.2); 53 | } 54 | 55 | .sb-container div:nth-child(5){ 56 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 5px 5px 6px rgba(0,0,0,0.3); 57 | } 58 | 59 | .sb-container div:nth-child(6){ 60 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 6px 6px 8px rgba(0,0,0,0.3); 61 | } 62 | 63 | .sb-container div:nth-child(7){ 64 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 7px 7px 10px rgba(0,0,0,0.4); 65 | } 66 | 67 | .sb-container div:nth-child(8){ 68 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 8px 8px 12px rgba(0,0,0,0.4); 69 | } 70 | 71 | .sb-container div:nth-child(9){ 72 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 9px 9px 14px rgba(0,0,0,0.4); 73 | } 74 | 75 | .sb-container div:nth-child(10){ 76 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 10px 10px 16px rgba(0,0,0,0.4); 77 | } 78 | 79 | .sb-container div:nth-child(11){ 80 | box-shadow: -1px -1px 3px rgba(0,0,0,0.2), 11px 11px 18px rgba(0,0,0,0.4); 81 | } 82 | 83 | .sb-container div:last-child{ 84 | background: #645b5c url(../images/cover2.jpg) repeat center center; 85 | box-shadow: 86 | -1px -1px 3px rgba(0,0,0,0.2), 87 | 12px 12px 20px rgba(0,0,0,0.6), 88 | inset 2px 2px 0 rgba(255, 255, 255, 0.1); 89 | } 90 | 91 | .sb-container div:last-child:after{ 92 | content: ''; 93 | position: absolute; 94 | bottom: 15px; 95 | left: 15px; 96 | width: 20px; 97 | height: 20px; 98 | border-radius: 50%; 99 | background: #dddddd; 100 | background: -moz-linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%); 101 | background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#dddddd), color-stop(48%,#58535e), color-stop(100%,#889396)); 102 | background: -webkit-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); 103 | background: -o-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); 104 | background: -ms-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); 105 | background: linear-gradient(135deg, #dddddd 0%,#58535e 48%,#889396 100%); 106 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#889396',GradientType=1 ); 107 | box-shadow: -1px -1px 1px rgba(0,0,0,0.7), 1px 1px 1px rgba(255,255,255,0.1); 108 | } 109 | 110 | .sb-container div h4{ 111 | color: rgba(255,255,255,0.9); 112 | text-shadow: 1px 1px 1px rgba(0,0,0,0.2); 113 | font-weight: 700; 114 | font-size: 16px; 115 | text-transform: uppercase; 116 | border-top: 1px dashed rgba(0,0,0,0.1); 117 | border-bottom: 1px dashed rgba(0,0,0,0.1); 118 | margin: 5px; 119 | padding: 5px; 120 | 121 | -webkit-touch-callout: none; 122 | -webkit-user-select: none; 123 | -khtml-user-select: none; 124 | -moz-user-select: none; 125 | -ms-user-select: none; 126 | user-select: none; 127 | } 128 | 129 | .sb-container div:last-child h4{ 130 | background: rgba(0,0,0,0.2); 131 | box-shadow: 0 1px 1px rgba(255,255,255,0.1); 132 | } 133 | 134 | .sb-container div:last-child h5{ 135 | font-size: 50px; 136 | white-space: nowrap; 137 | text-align: left; 138 | margin: 0; 139 | padding: 0; 140 | position: absolute; 141 | line-height: 50px; 142 | top: 0px; 143 | left: 0px; 144 | color: #111; 145 | text-shadow: -1px -1px 1px rgba(255,255,255,0.1); 146 | text-transform: uppercase; 147 | 148 | -webkit-transform: rotate(-90deg) translateX(-157%) translateY(73px); 149 | -moz-transform: rotate(-90deg) translateX(-157%) translateY(73px); 150 | -o-transform: rotate(-90deg) translateX(-157%) translateY(73px); 151 | -ms-transform: rotate(-90deg) translateX(-157%) translateY(73px); 152 | transform: rotate(-90deg) translateX(-157%) translateY(73px); 153 | 154 | -webkit-transform-origin: 0 0; 155 | -moz-transform-origin: 0 0; 156 | -o-transform-origin: 0 0; 157 | -ms-transform-origin: 0 0; 158 | transform-origin: 0 0; 159 | 160 | -webkit-touch-callout: none; 161 | -webkit-user-select: none; 162 | -khtml-user-select: none; 163 | -moz-user-select: none; 164 | -ms-user-select: none; 165 | user-select: none; 166 | } 167 | 168 | span.sb-icon{ 169 | display: block; 170 | height: 70px; 171 | width: 70px; 172 | margin: 20px auto; 173 | -webkit-touch-callout: none; 174 | -webkit-user-select: none; 175 | -khtml-user-select: none; 176 | -moz-user-select: none; 177 | -ms-user-select: none; 178 | user-select: none; 179 | } 180 | 181 | span.sb-icon:before { 182 | font-family: 'icons'; 183 | font-style: normal; 184 | font-weight: normal; 185 | speak: none; 186 | display: block; 187 | text-decoration: inherit; 188 | text-align: center; 189 | text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); 190 | line-height: 64px; 191 | width: 100%; 192 | font-size: 60px; 193 | color: rgba(113,72,39,0.8); 194 | text-shadow: 1px 1px 1px rgba(255,255,255,0.3); 195 | } 196 | 197 | .icon-cog:before { content: '\35'; } /* '5' */ 198 | .icon-flight:before { content: '\37'; } /* '7' */ 199 | .icon-eye:before { content: '\34'; } /* '4' */ 200 | .icon-install:before { content: '\39'; } /* '9' */ 201 | .icon-bag:before { content: '\36'; } /* '6' */ 202 | .icon-globe:before { content: '\38'; } /* '8' */ 203 | .icon-picture:before { content: '\32'; } /* '2' */ 204 | .icon-video:before { content: '\30'; } /* '0' */ 205 | .icon-download:before { content: '\41'; } /* 'A' */ 206 | .icon-mobile:before { content: '\42'; } /* 'B' */ 207 | .icon-camera:before { content: '\33'; } /* '3' */ -------------------------------------------------------------------------------- /css/style5.css: -------------------------------------------------------------------------------- 1 | .sb-container { 2 | position: relative; 3 | width: 150px; 4 | height: 400px; 5 | margin: 30px auto 0 auto; 6 | } 7 | 8 | .sb-container div { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | width: 130px; 13 | background: #fff; 14 | height: 400px; 15 | border-radius: 5px; 16 | cursor: pointer; 17 | text-align: center; 18 | background-image: url(../images/fabric.png); 19 | 20 | -webkit-transform-origin: 25% 90%; 21 | -moz-transform-origin: 25% 90%; 22 | -o-transform-origin: 25% 90%; 23 | -ms-transform-origin: 25% 90%; 24 | transform-origin: 25% 90%; 25 | 26 | -webkit-backface-visibility: hidden; 27 | -moz-backface-visibility: hidden; 28 | -ms-backface-visibility: hidden; 29 | -o-backface-visibility: hidden; 30 | backface-visibility: hidden; 31 | 32 | -webkit-tap-highlight-color: rgba(0,0,0,0); 33 | } 34 | 35 | .sb-container div:nth-child(1){ 36 | background-color: #ea2a29; 37 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1); 38 | } 39 | 40 | .sb-container div:nth-child(2){ 41 | background-color: #f16729; 42 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 2px 2px 1px rgba(0,0,0,0.1); 43 | } 44 | 45 | .sb-container div:nth-child(3){ 46 | background-color: #f89322; 47 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 3px 3px 2px rgba(0,0,0,0.2); 48 | } 49 | 50 | .sb-container div:nth-child(4){ 51 | background-color: #ffcf14; 52 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 4px 4px 4px rgba(0,0,0,0.2); 53 | } 54 | 55 | .sb-container div:nth-child(5){ 56 | background-color: #ffea0d; 57 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 5px 5px 6px rgba(0,0,0,0.3); 58 | } 59 | 60 | .sb-container div:nth-child(6){ 61 | background-color: #87b11d; 62 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3); 63 | } 64 | 65 | .sb-container div:nth-child(7){ 66 | background-color: #008253; 67 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 7px 7px 10px rgba(0,0,0,0.4); 68 | } 69 | 70 | .sb-container div:nth-child(8){ 71 | background-color: #3277b5; 72 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 8px 8px 12px rgba(0,0,0,0.4); 73 | } 74 | 75 | .sb-container div:nth-child(9){ 76 | background-color: #4c549f; 77 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 9px 9px 14px rgba(0,0,0,0.4); 78 | } 79 | 80 | .sb-container div:nth-child(10){ 81 | background-color: #764394; 82 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 10px 10px 16px rgba(0,0,0,0.4); 83 | } 84 | 85 | .sb-container div:nth-child(11){ 86 | background-color: #ca0d86; 87 | box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 11px 11px 18px rgba(0,0,0,0.4); 88 | } 89 | 90 | .sb-container div:last-child{ 91 | background: #645b5c url(../images/cover.jpg) repeat center center; 92 | box-shadow: 93 | -1px -1px 3px rgba(0,0,0,0.2), 94 | 12px 12px 20px rgba(0,0,0,0.6), 95 | inset 2px 2px 0 rgba(255, 255, 255, 0.1); 96 | } 97 | 98 | .sb-container div:last-child:after{ 99 | content: ''; 100 | position: absolute; 101 | bottom: 15px; 102 | left: 15px; 103 | width: 20px; 104 | height: 20px; 105 | border-radius: 50%; 106 | background: #dddddd; 107 | background: -moz-linear-gradient(-45deg, #dddddd 0%, #58535e 48%, #889396 100%); 108 | background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#dddddd), color-stop(48%,#58535e), color-stop(100%,#889396)); 109 | background: -webkit-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); 110 | background: -o-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); 111 | background: -ms-linear-gradient(-45deg, #dddddd 0%,#58535e 48%,#889396 100%); 112 | background: linear-gradient(135deg, #dddddd 0%,#58535e 48%,#889396 100%); 113 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#889396',GradientType=1 ); 114 | box-shadow: -1px -1px 1px rgba(0,0,0,0.5), 1px 1px 1px rgba(255,255,255,0.1); 115 | } 116 | 117 | .sb-container div h4{ 118 | color: rgba(255,255,255,0.9); 119 | text-shadow: 1px 1px 1px rgba(0,0,0,0.2); 120 | font-weight: 700; 121 | font-size: 16px; 122 | text-transform: uppercase; 123 | border-top: 1px dashed rgba(0,0,0,0.1); 124 | border-bottom: 1px dashed rgba(0,0,0,0.1); 125 | margin: 5px; 126 | padding: 5px; 127 | -webkit-touch-callout: none; 128 | -webkit-user-select: none; 129 | -khtml-user-select: none; 130 | -moz-user-select: none; 131 | -ms-user-select: none; 132 | user-select: none; 133 | } 134 | 135 | .sb-container div:last-child h4{ 136 | background: rgba(0,0,0,0.2); 137 | box-shadow: 0 1px 1px rgba(255,255,255,0.1); 138 | } 139 | 140 | .sb-container div h4 a{ 141 | color: rgba(0,0,0,0.9); 142 | text-shadow: 0 1px 1px rgba(255,255,255,0.4); 143 | } 144 | 145 | .sb-container div h4 a:hover{ 146 | color: rgba(255,255,255,0.9); 147 | text-shadow: 1px 1px 1px rgba(0,0,0,0.2); 148 | } 149 | 150 | .sb-container div:last-child h5{ 151 | font-size: 50px; 152 | white-space: nowrap; 153 | text-align: left; 154 | margin: 0; 155 | padding: 0; 156 | position: absolute; 157 | line-height: 50px; 158 | top: 0px; 159 | left: 0px; 160 | color: #111; 161 | text-shadow: -1px -1px 1px rgba(255,255,255,0.1); 162 | text-transform: uppercase; 163 | 164 | -webkit-transform: rotate(-90deg) translateX(-157%) translateY(73px); 165 | -moz-transform: rotate(-90deg) translateX(-157%) translateY(73px); 166 | -o-transform: rotate(-90deg) translateX(-157%) translateY(73px); 167 | -ms-transform: rotate(-90deg) translateX(-157%) translateY(73px); 168 | transform: rotate(-90deg) translateX(-157%) translateY(73px); 169 | 170 | -webkit-transform-origin: 0 0; 171 | -moz-transform-origin: 0 0; 172 | -o-transform-origin: 0 0; 173 | -ms-transform-origin: 0 0; 174 | transform-origin: 0 0; 175 | 176 | -webkit-touch-callout: none; 177 | -webkit-user-select: none; 178 | -khtml-user-select: none; 179 | -moz-user-select: none; 180 | -ms-user-select: none; 181 | user-select: none; 182 | } 183 | 184 | span.sb-icon{ 185 | display: block; 186 | height: 70px; 187 | width: 70px; 188 | margin: 20px auto; 189 | -webkit-touch-callout: none; 190 | -webkit-user-select: none; 191 | -khtml-user-select: none; 192 | -moz-user-select: none; 193 | -ms-user-select: none; 194 | user-select: none; 195 | } 196 | 197 | span.sb-icon:before { 198 | font-family: 'icons'; 199 | font-style: normal; 200 | font-weight: normal; 201 | speak: none; 202 | display: block; 203 | text-decoration: inherit; 204 | text-align: center; 205 | text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); 206 | line-height: 64px; 207 | width: 100%; 208 | font-size: 60px; 209 | color: #000; 210 | text-shadow: 0 0 1px #000; 211 | } 212 | 213 | .icon-cog:before { content: '\35'; } /* '5' */ 214 | .icon-flight:before { content: '\37'; } /* '7' */ 215 | .icon-eye:before { content: '\34'; } /* '4' */ 216 | .icon-install:before { content: '\39'; } /* '9' */ 217 | .icon-bag:before { content: '\36'; } /* '6' */ 218 | .icon-globe:before { content: '\38'; } /* '8' */ 219 | .icon-picture:before { content: '\32'; } /* '2' */ 220 | .icon-video:before { content: '\30'; } /* '0' */ 221 | .icon-download:before { content: '\41'; } /* 'A' */ 222 | .icon-mobile:before { content: '\42'; } /* 'B' */ 223 | .icon-camera:before { content: '\33'; } /* '3' */ -------------------------------------------------------------------------------- /images/ImageAttribution.txt: -------------------------------------------------------------------------------- 1 | Background Pattern from http://subtlepatterns.com/ 2 | 3 | Icons generated with http://fontello.com/ (Iconset by http://www.entypo.com) 4 | 5 | Seamless cover textures by http://www.fuzzimo.com/ 6 | 7 | Cartboard from http://www.texturise.com/ -------------------------------------------------------------------------------- /images/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SwatchBook/c174bbaa5309722757c5736169d2c82eb3b00202/images/Thumbs.db -------------------------------------------------------------------------------- /images/cartboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SwatchBook/c174bbaa5309722757c5736169d2c82eb3b00202/images/cartboard.jpg -------------------------------------------------------------------------------- /images/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SwatchBook/c174bbaa5309722757c5736169d2c82eb3b00202/images/cover.jpg -------------------------------------------------------------------------------- /images/cover2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SwatchBook/c174bbaa5309722757c5736169d2c82eb3b00202/images/cover2.jpg -------------------------------------------------------------------------------- /images/dark_leather.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SwatchBook/c174bbaa5309722757c5736169d2c82eb3b00202/images/dark_leather.jpg -------------------------------------------------------------------------------- /images/egg_shell.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SwatchBook/c174bbaa5309722757c5736169d2c82eb3b00202/images/egg_shell.jpg -------------------------------------------------------------------------------- /images/fabric.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/SwatchBook/c174bbaa5309722757c5736169d2c82eb3b00202/images/fabric.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Swatch Book with CSS3 and jQuery 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 |
23 | 24 | « Previous Demo: 3D Panel Layout 25 | 26 | 27 | Icon Font made with Fontello 28 | 29 | Back to the Codrops Article 30 | 31 | 32 |
33 | 34 |
35 | 36 |

Swatch Book with CSS3 & jQuery

37 |

Fun with skeuomorphism & CSS3 rotations

38 | 39 | 46 | 47 |
48 | 49 | CSS transforms are not supported in your browser 50 | 51 | CSS transitions are not supported in your browser 52 | Sorry, only modern browsers. 53 |
54 | 55 |
56 | 57 |
58 | 59 |
60 | 61 |
62 | 63 |

All Settings

64 |
65 |
66 | 67 |

User Modes

68 |
69 |
70 | 71 |

Browse All

72 |
73 |
74 | 75 |

Install App

76 |
77 |
78 | 79 |

Productivity

80 |
81 |
82 | 83 |

All Options

84 |
85 |
86 | 87 |

User Images

88 |
89 |
90 | 91 |

User Videos

92 |
93 |
94 | 95 |

Download App

96 |
97 |
98 | 99 |

Mobile Theme

100 |
101 |
102 | 103 |

Digital App

104 |
105 |
106 |

Profile

107 |
We ♥ color
108 |
109 | 110 | 111 |
112 | 113 |
114 | 115 |
116 | 117 | 118 | 125 | 126 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Swatch Book with CSS3 and jQuery 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 |
23 | 24 | « Previous Demo: 3D Panel Layout 25 | 26 | 27 | Icon Font made with Fontello 28 | 29 | Back to the Codrops Article 30 | 31 | 32 |
33 | 34 |
35 | 36 |

Swatch Book with CSS3 & jQuery

37 |

Fun with skeuomorphism & CSS3 rotations

38 | 39 | 46 | 47 |
48 | 49 | CSS transforms are not supported in your browser 50 | 51 | CSS transitions are not supported in your browser 52 | Sorry, only modern browsers. 53 |
54 | 55 |
56 | 57 |
58 | 59 |
60 | 61 |
62 | 63 |

All Settings

64 |
65 |
66 | 67 |

User Modes

68 |
69 |
70 | 71 |

Browse All

72 |
73 |
74 | 75 |

Install App

76 |
77 |
78 | 79 |

Productivity

80 |
81 |
82 | 83 |

All Options

84 |
85 |
86 | 87 |

User Images

88 |
89 |
90 | 91 |

User Videos

92 |
93 |
94 | 95 |

Download App

96 |
97 |
98 | 99 |

Mobile Theme

100 |
101 |
102 | 103 |

Digital App

104 |
105 |
106 |

Profile

107 | Click to open/close 108 |
We ♥ color
109 |
110 | 111 | 112 |
113 | 114 |
115 | 116 |
117 | 118 | 119 | 135 | 136 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Swatch Book with CSS3 and jQuery 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 |
23 | 24 | « Previous Demo: 3D Panel Layout 25 | 26 | 27 | Icon Font made with Fontello 28 | 29 | Back to the Codrops Article 30 | 31 | 32 |
33 | 34 |
35 | 36 |

Swatch Book with CSS3 & jQuery

37 |

Fun with skeuomorphism & CSS3 rotations

38 | 39 | 46 | 47 |
48 | 49 | CSS transforms are not supported in your browser 50 | 51 | CSS transitions are not supported in your browser 52 | Sorry, only modern browsers. 53 |
54 | 55 |
56 | 57 |
58 | 59 |
60 | 61 |
62 | 63 |

All Settings

64 |
65 |
66 | 67 |

User Modes

68 |
69 |
70 | 71 |

Browse All

72 |
73 |
74 | 75 |

Install App

76 |
77 |
78 | 79 |

Productivity

80 |
81 |
82 | 83 |

All Options

84 |
85 |
86 | 87 |

User Images

88 |
89 |
90 | 91 |

User Videos

92 |
93 |
94 | 95 |

Download App

96 |
97 |
98 | 99 |

Mobile Theme

100 |
101 |
102 | 103 |

Digital App

104 |
105 |
106 |

Profile

107 | Click to open/close 108 |
We ♥ color
109 |
110 | 111 | 112 |
113 | 114 |
115 | 116 |
117 | 118 | 119 | 135 | 136 | -------------------------------------------------------------------------------- /index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Swatch Book with CSS3 and jQuery 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 |
23 | 24 | « Previous Demo: 3D Panel Layout 25 | 26 | 27 | Icon Font made with Fontello 28 | 29 | Back to the Codrops Article 30 | 31 | 32 |
33 | 34 |
35 | 36 |

Swatch Book with CSS3 & jQuery

37 |

Fun with skeuomorphism & CSS3 rotations

38 | 39 | 46 | 47 |
48 | 49 | CSS transforms are not supported in your browser 50 | 51 | CSS transitions are not supported in your browser 52 | Sorry, only modern browsers. 53 |
54 | 55 |
56 | 57 |
58 | 59 |
60 | 61 |
62 | 63 |

All Settings

64 |
65 |
66 | 67 |

User Modes

68 |
69 |
70 | 71 |

Browse All

72 |
73 |
74 | 75 |

Install App

76 |
77 |
78 | 79 |

Productivity

80 |
81 |
82 | 83 |

All Options

84 |
85 |
86 | 87 |

User Images

88 |
89 |
90 | 91 |

User Videos

92 |
93 |
94 | 95 |

Download App

96 |
97 |
98 | 99 |

Mobile Theme

100 |
101 |
102 | 103 |

Digital App

104 |
105 |
106 |

Profile

107 |
We ♥ color
108 |
109 | 110 | 111 |
112 | 113 |
114 | 115 |
116 | 117 | 118 | 136 | 137 | -------------------------------------------------------------------------------- /index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Swatch Book with CSS3 and jQuery 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 |
23 | 24 | « Previous Demo: 3D Panel Layout 25 | 26 | 27 | Icon Font made with Fontello 28 | 29 | Back to the Codrops Article 30 | 31 | 32 |
33 | 34 |
35 | 36 |

Swatch Book with CSS3 & jQuery

37 |

Fun with skeuomorphism & CSS3 rotations

38 | 39 | 46 | 47 |
48 | 49 | CSS transforms are not supported in your browser 50 | 51 | CSS transitions are not supported in your browser 52 | Sorry, only modern browsers. 53 |
54 | 55 |
56 | 57 |
58 | 59 |
60 | 61 |
62 | 63 |

All Settings

64 |
65 |
66 | 67 |

User Modes

68 |
69 |
70 | 71 |

Browse All

72 |
73 |
74 | 75 |

Install App

76 |
77 |
78 | 79 |

Productivity

80 |
81 |
82 | 83 |

All Options

84 |
85 |
86 | 87 |

User Images

88 |
89 |
90 | 91 |

User Videos

92 |
93 |
94 | 95 |

Download App

96 |
97 |
98 | 99 |

Mobile Theme

100 |
101 |
102 | 103 |

Digital App

104 |
105 |
106 |

Profile

107 |
We ♥ color
108 |
109 | 110 | 111 |
112 | 113 |
114 | 115 |
116 | 117 | 118 | 127 | 128 | -------------------------------------------------------------------------------- /js/jquery.swatchbook.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jquery.swatchbook.js v1.1.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2012, Codrops 9 | * http://www.codrops.com 10 | */ 11 | 12 | ;( function( $, window, undefined ) { 13 | 14 | 'use strict'; 15 | 16 | // global 17 | var Modernizr = window.Modernizr; 18 | 19 | jQuery.fn.reverse = [].reverse; 20 | 21 | $.SwatchBook = function( options, element ) { 22 | 23 | this.$el = $( element ); 24 | this._init( options ); 25 | 26 | }; 27 | 28 | $.SwatchBook.defaults = { 29 | // index of initial centered item 30 | center : 6, 31 | // number of degrees that is between each item 32 | angleInc : 8, 33 | speed : 700, 34 | easing : 'ease', 35 | // amount in degrees for the opened item's next sibling 36 | proximity : 45, 37 | // amount in degrees between the opened item's next siblings 38 | neighbor : 4, 39 | // animate on load 40 | onLoadAnim : true, 41 | // if it should be closed by default 42 | initclosed : false, 43 | // index of the element that when clicked, triggers the open/close function 44 | // by default there is no such element 45 | closeIdx : -1, 46 | // open one specific item initially (overrides initclosed) 47 | openAt : -1 48 | }; 49 | 50 | $.SwatchBook.prototype = { 51 | 52 | _init : function( options ) { 53 | 54 | this.options = $.extend( true, {}, $.SwatchBook.defaults, options ); 55 | 56 | this.$items = this.$el.children( 'div' ); 57 | this.itemsCount = this.$items.length; 58 | this.current = -1; 59 | this.support = Modernizr.csstransitions; 60 | this.cache = []; 61 | 62 | if( this.options.onLoadAnim ) { 63 | this._setTransition(); 64 | } 65 | 66 | if( !this.options.initclosed ) { 67 | this._center( this.options.center, this.options.onLoadAnim ); 68 | } 69 | else { 70 | 71 | this.isClosed = true; 72 | if( !this.options.onLoadAnim ) { 73 | this._setTransition(); 74 | } 75 | 76 | } 77 | 78 | if( this.options.openAt >= 0 && this.options.openAt < this.itemsCount ) { 79 | this._openItem( this.$items.eq( this.options.openAt ) ); 80 | } 81 | 82 | this._initEvents(); 83 | 84 | }, 85 | _setTransition : function() { 86 | 87 | if( this.support ) { 88 | this.$items.css( { 'transition': 'all ' + this.options.speed + 'ms ' + this.options.easing } ); 89 | } 90 | 91 | }, 92 | _openclose : function() { 93 | 94 | this.isClosed ? this._center( this.options.center, true ) : this.$items.css( { 'transform' : 'rotate(0deg)' } ); 95 | this.isClosed = !this.isClosed; 96 | 97 | }, 98 | _center : function( idx, anim ) { 99 | 100 | var self = this; 101 | 102 | this.$items.each( function( i ) { 103 | 104 | var transformStr = 'rotate(' + ( self.options.angleInc * ( i - idx ) ) + 'deg)'; 105 | $( this ).css( { 'transform' : transformStr } ); 106 | 107 | } ); 108 | 109 | }, 110 | _openItem : function( $item ) { 111 | 112 | var itmIdx = $item.index(); 113 | 114 | if( itmIdx !== this.current ) { 115 | 116 | if( this.options.closeIdx !== -1 && itmIdx === this.options.closeIdx ) { 117 | 118 | this._openclose(); 119 | this._setCurrent(); 120 | 121 | } 122 | else { 123 | 124 | this._setCurrent( $item ); 125 | $item.css( { 'transform' : 'rotate(0deg)' } ); 126 | this._rotateSiblings( $item ); 127 | 128 | } 129 | 130 | } 131 | 132 | }, 133 | _initEvents : function() { 134 | 135 | var self = this; 136 | 137 | this.$items.on( 'click.swatchbook', function( event ) { 138 | self._openItem( $( this ) ); 139 | } ); 140 | 141 | }, 142 | _rotateSiblings : function( $item ) { 143 | 144 | var self = this, 145 | idx = $item.index(), 146 | $cached = this.cache[ idx ], 147 | $siblings; 148 | 149 | if( $cached ) { 150 | $siblings = $cached; 151 | } 152 | else { 153 | 154 | $siblings = $item.siblings(); 155 | this.cache[ idx ] = $siblings; 156 | 157 | } 158 | 159 | $siblings.each( function( i ) { 160 | 161 | var rotateVal = i < idx ? 162 | self.options.angleInc * ( i - idx ) : 163 | i - idx === 1 ? 164 | self.options.proximity : 165 | self.options.proximity + ( i - idx - 1 ) * self.options.neighbor; 166 | 167 | var transformStr = 'rotate(' + rotateVal + 'deg)'; 168 | 169 | $( this ).css( { 'transform' : transformStr } ); 170 | 171 | } ); 172 | 173 | }, 174 | _setCurrent : function( $el ) { 175 | 176 | this.current = $el ? $el.index() : -1; 177 | this.$items.removeClass( 'ff-active' ); 178 | if( $el ) { 179 | $el.addClass( 'ff-active' ); 180 | } 181 | 182 | } 183 | 184 | }; 185 | 186 | var logError = function( message ) { 187 | 188 | if ( window.console ) { 189 | 190 | window.console.error( message ); 191 | 192 | } 193 | 194 | }; 195 | 196 | $.fn.swatchbook = function( options ) { 197 | 198 | var instance = $.data( this, 'swatchbook' ); 199 | 200 | if ( typeof options === 'string' ) { 201 | 202 | var args = Array.prototype.slice.call( arguments, 1 ); 203 | 204 | this.each(function() { 205 | 206 | if ( !instance ) { 207 | 208 | logError( "cannot call methods on swatchbook prior to initialization; " + 209 | "attempted to call method '" + options + "'" ); 210 | return; 211 | 212 | } 213 | 214 | if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { 215 | 216 | logError( "no such method '" + options + "' for swatchbook instance" ); 217 | return; 218 | 219 | } 220 | 221 | instance[ options ].apply( instance, args ); 222 | 223 | }); 224 | 225 | } 226 | else { 227 | 228 | this.each(function() { 229 | 230 | if ( instance ) { 231 | 232 | instance._init(); 233 | 234 | } 235 | else { 236 | 237 | instance = $.data( this, 'swatchbook', new $.SwatchBook( options, this ) ); 238 | 239 | } 240 | 241 | }); 242 | 243 | } 244 | 245 | return instance; 246 | 247 | }; 248 | 249 | } )( jQuery, window ); -------------------------------------------------------------------------------- /js/modernizr.custom.79639.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.5.3 (Custom Build) | MIT & BSD 2 | * Build: http://www.modernizr.com/download/#-cssanimations-csstransforms-csstransforms3d-csstransitions-shiv-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes 3 | */ 4 | ;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=["­",""].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",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="",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); --------------------------------------------------------------------------------