Created
December 19, 2012 06:01
-
-
Save skopp/4334729 to your computer and use it in GitHub Desktop.
badges*
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /**badges**/ | |
| @import url('http://fonts.googleapis.com/css?family=Lobster'); @font-face { font-family: 'ModernPictogramsNormal'; src: url("http://www.bradysammons.com/codepen/fonts/modernpics-webfont.eot"); src: url("http://www.bradysammons.com/codepen/fonts/modernpics-webfont.eot?#iefix") format("embedded-opentype"), url("http://www.bradysammons.com/codepen/fonts/modernpics-webfont.woff") format("woff"), url("http://www.bradysammons.com/codepen/fonts/modernpics-webfont.ttf") format("truetype"), url("http://www.bradysammons.com/codepen/fonts/modernpics-webfont.svg#ModernPictogramsNormal") format("svg"); font-weight: normal; font-style: normal; } | |
| /* line 13, ../sass/screen.scss */ body { background: url("http://www.vancouverad.com/bgimg/img/noise_pattern_with_crosslines.png") repeat; font-family: helvetica, arial, sans-serif; } | |
| /* line 17, ../sass/screen.scss */ | |
| wrapper { width: 900px; margin: 10px auto 0 auto; } | |
| /* line 22, ../sass/screen.scss */ .cool_btn1 { width: 190px; height: 190px; margin: 15px 15px 15px 15px; position: relative; -webkit-border-radius: 200px; -moz-border-radius: 200px; -ms-border-radius: 200px; -o-border-radius: 200px; border-radius: 200px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(50%, #e3e3e3), color-stop(50%, #888888), color-stop(100%, #666666)); background-image: -webkit-linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666); background-image: -moz-linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666); background-image: -o-linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666); background-image: linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3); display: inline-block; } /* line 31, ../sass/screen.scss */ .cool_btn1 h1 { text-align: center; font-size: 50px; margin: 20px 0 0 0; color: #333; text-shadow: 0 1px 0 white, 0 -1px 0 rgba(0, 0, 0, 0.5); font-family: 'Lobster', cursive; font-weight: normal; line-height: 1; } /* line 40, ../sass/screen.scss */ .cool_btn1 h1 i { display: block; font-style: normal; font-size: 14px; font-weight: bold; font-family: helvetica, arial, sans-serif; text-shadow: none; } /* line 49, ../sass/screen.scss */ .cool_btn1 h2 { font-family: 'ModernPictogramsNormal', Arial, sans-serif; font-weight: normal; text-align: center; font-size: 90px; line-height: 1; margin: 15px 0 0 0; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 -1px 0px rgba(0, 0, 0, 0.8); color: #fafafa; } | |
| /* line 60, ../sass/screen.scss */ .cool_btn1:after { content: ""; width: 200px; height: 200px; display: block; position: absolute; left: -5px; top: -5px; z-index: -1; -webkit-border-radius: 200px; -moz-border-radius: 200px; -ms-border-radius: 200px; -o-border-radius: 200px; border-radius: 200px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cecece), color-stop(100%, #e7e7e7)); background-image: -webkit-linear-gradient(#cecece, #e7e7e7); background-image: -moz-linear-gradient(#cecece, #e7e7e7); background-image: -o-linear-gradient(#cecece, #e7e7e7); background-image: linear-gradient(#cecece, #e7e7e7); -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.9); -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.9); box-shadow: 0 1px 0px rgba(255, 255, 255, 0.9); } | |
| /* ------------------- Transitions -------------------- */ /* line 76, ../sass/screen.scss */ .cool_btn1.blue, .cool_btn1.teal, .cool_btn1.orange, .cool_btn1.green { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer; } | |
| /* ------------------- Colors -------------------- */ /* line 84, ../sass/screen.scss */ .cool_btn1.blue { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #577fbd), color-stop(100%, #274281)); background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281); background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281); background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281); background-image: linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281); } /* line 86, ../sass/screen.scss */ .cool_btn1.blue h1 { color: #4265A3; } /* line 89, ../sass/screen.scss */ .cool_btn1.blue h2 { color: #1E3261; } | |
| /* line 93, ../sass/screen.scss */ .cool_btn1.teal { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #11b8fe), color-stop(100%, #0187b8)); background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8); background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8); background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8); background-image: linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8); } /* line 95, ../sass/screen.scss */ .cool_btn1.teal h1 { color: #149EDB; } /* line 98, ../sass/screen.scss */ .cool_btn1.teal h2 { color: #0C6186; } | |
| /* line 102, ../sass/screen.scss */ .cool_btn1.orange { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #f49e23), color-stop(100%, #e27619)); background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619); background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619); background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619); background-image: linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619); } /* line 104, ../sass/screen.scss */ .cool_btn1.orange h1 { color: #e27619; } /* line 107, ../sass/screen.scss */ .cool_btn1.orange h2 { color: #AC5509; } | |
| /* line 111, ../sass/screen.scss */ .cool_btn1.green { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #2fd51d), color-stop(100%, #00a01e)); background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e); background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e); background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e); background-image: linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e); } /* line 113, ../sass/screen.scss */ .cool_btn1.green h1 { color: #00a01e; } /* line 116, ../sass/screen.scss */ .cool_btn1.green h2 { color: #006312; } | |
| /* ------------------- Hover States -------------------- */ /* line 123, ../sass/screen.scss */ .cool_btn1.orange:hover { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(255, 174, 0, 0.8); -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(255, 174, 0, 0.8); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(255, 174, 0, 0.8); } | |
| /* line 128, ../sass/screen.scss */ .cool_btn1.teal:hover { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(16, 216, 252, 0.8); -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(16, 216, 252, 0.8); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(16, 216, 252, 0.8); } | |
| /* line 133, ../sass/screen.scss */ .cool_btn1.blue:hover { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(43, 95, 187, 0.8); -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(43, 95, 187, 0.8); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(43, 95, 187, 0.8); } | |
| /* line 138, ../sass/screen.scss */ .cool_btn1.green:hover { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(47, 217, 29, 0.8); -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(47, 217, 29, 0.8); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(47, 217, 29, 0.8); } | |
| /* ------------------- Media Queries -------------------- */ @media screen and (max-width: 860px) { /* line 147, ../sass/screen.scss */ | |
| wrapper { width: 700px; } } @media screen and (max-width: 740px) { /* line 152, ../sass/screen.scss */ | |
| wrapper { width: 480px; } } @media screen and (max-width: 440px) { /* line 157, ../sass/screen.scss */ | |
| wrapper { width: 370px; text-align: center; } } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html><head><meta charset="UTF-8"> | |
| <title>Mozilla</title> | |
| <meta name="author" content="Rafał Krupiński"> | |
| <style> | |
| * { | |
| padding: 0; | |
| margin: 0; | |
| border: 0; | |
| font: inherit; | |
| vertical-align: baseline; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| height: 100%; | |
| } | |
| body { | |
| height: 100%; | |
| overflow: hidden; | |
| font: 100%/1.25 Helvetica, Arial, sans-serif; | |
| color: #fff; | |
| -webkit-perspective: 1000px; | |
| -moz-perspective: 1000px; | |
| -ms-perspective: 1000px; | |
| -o-perspective: 1000px; | |
| perspective: 1000px; | |
| background-color: #444444; | |
| background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); | |
| background-image: -webkit-linear-gradient(top, #444444, #999999); | |
| background-image: -moz-linear-gradient(top, #444444, #999999); | |
| background-image: -ms-linear-gradient(top, #444444, #999999); | |
| background-image: -o-linear-gradient(top, #444444, #999999); | |
| background-image: linear-gradient(to bottom, #444444, #999999); | |
| } | |
| h1 { | |
| font-size: 2em; | |
| } | |
| .book { | |
| width: 300px; | |
| height: 300px; | |
| margin-top: -150px; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| -webkit-transform: rotateX(60deg); | |
| -moz-transform: rotateX(60deg); | |
| -ms-transform: rotateX(60deg); | |
| -o-transform: rotateX(60deg); | |
| transform: rotateX(60deg); | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| -o-user-select: none; | |
| user-select: none; | |
| } | |
| .page { | |
| width: 300px; | |
| height: 300px; | |
| padding: 1em; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| text-indent: 2em; | |
| } | |
| .front { | |
| background-color: #d93e2b; | |
| } | |
| .back { | |
| background-color: #fff; | |
| } | |
| .front-cover { | |
| cursor: move; | |
| -webkit-transform-origin: 0 50%; | |
| -moz-transform-origin: 0 50%; | |
| -ms-transform-origin: 0 50%; | |
| -o-transform-origin: 0 50%; | |
| transform-origin: 0 50%; | |
| -webkit-transform: rotateY(0deg); | |
| -moz-transform: rotateY(0deg); | |
| -ms-transform: rotateY(0deg); | |
| -o-transform: rotateY(0deg); | |
| transform: rotateY(0deg); | |
| } | |
| .front-cover .back { | |
| background-image: url(mdn.png); | |
| background-repeat: no-repeat; | |
| background-position: 50% 50%; | |
| -webkit-transform: translateZ(3px); | |
| -moz-transform: translateZ(3px); | |
| -ms-transform: translateZ(3px); | |
| -o-transform: translateZ(3px); | |
| transform: translateZ(3px); | |
| } | |
| .back-cover .back { | |
| -webkit-transform: translateZ(-3px); | |
| -moz-transform: translateZ(-3px); | |
| -ms-transform: translateZ(-3px); | |
| -o-transform: translateZ(-3px); | |
| transform: translateZ(-3px); | |
| } | |
| .p3d { | |
| -webkit-transform-style: preserve-3d; | |
| -moz-transform-style: preserve-3d; | |
| -ms-transform-style: preserve-3d; | |
| -o-transform-style: preserve-3d; | |
| transform-style: preserve-3d; | |
| } | |
| .flip { | |
| -webkit-transform: rotateY(180deg); | |
| -moz-transform: rotateY(180deg); | |
| -ms-transform: rotateY(180deg); | |
| -o-transform: rotateY(180deg); | |
| transform: rotateY(180deg); | |
| } | |
| .dino, | |
| .shadow { | |
| width: 196px; | |
| height: 132px; | |
| position: absolute; | |
| left: 60px; | |
| top: 60px; | |
| -webkit-transform-origin: 0 100%; | |
| -moz-transform-origin: 0 100%; | |
| -ms-transform-origin: 0 100%; | |
| -o-transform-origin: 0 100%; | |
| transform-origin: 0 100%; | |
| } | |
| .dino { | |
| background: url(dino.png) no-repeat; | |
| } | |
| .shadow { | |
| background: url(shadow.png) no-repeat; | |
| } | |
| </style> | |
| </head><body dcjnfaoifoefmnbhhlbppaebgnccfddf="1.1.4"><h1>Open me!</h1> | |
| <div class="book p3d" style="-webkit-transform: rotateX(52.7625deg);"> | |
| <div class="back-cover p3d"> | |
| <div class="page back flip"></div> | |
| <div class="page front p3d"> | |
| <div class="shadow" style="-webkit-transform: translateZ(1px) skewX(-7.2375deg);"></div> | |
| <div class="dino" style="-webkit-transform: rotateX(-28.95deg);"></div> | |
| </div> | |
| </div> | |
| <div class="front-cover p3d" style="-webkit-transform: rotateY(-57.9deg);"> | |
| <div class="page front flip p3d"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum nisl quis nulla eleifend dignissim. Curabitur varius lobortis tincidunt. Maecenas gravida, nulla quis luctus imperdiet, ipsum nibh consectetur ante, in sodales massa tortor eget neque. Donec porta ligula massa, id sagittis est. Ut nisl tellus, faucibus nec feugiat ut, laoreet iaculis felis. Suspendisse ultrices mauris vel tellus suscipit commodo. Integer vitae tortor erat. Pellentesque non tempor nisi.</p> | |
| </div> | |
| <div class="page back"></div> | |
| </div> | |
| </div> | |
| <script> | |
| (function (window, document) { | |
| var prefixes = ['Webkit', 'Moz', 'ms', 'O', ''], | |
| book = document.querySelectorAll('.book')[0], | |
| page = document.querySelectorAll('.front-cover')[0], | |
| dino = document.querySelectorAll('.dino')[0], | |
| shadow = document.querySelectorAll('.shadow')[0], | |
| hold = false, | |
| centerPoint = window.innerWidth / 2, | |
| pageSize = 300, | |
| clamp = function (val, min, max) { | |
| return Math.max(min, Math.min(val, max)); | |
| }; | |
| page.onmousedown = function () { | |
| hold = true; | |
| }; | |
| window.onmouseup = function () { | |
| if (hold) { | |
| hold = false; | |
| } | |
| }; | |
| window.onresize = function () { | |
| centerPoint = window.innerWidth / 2; | |
| }; | |
| window.onmousemove = function (evt) { | |
| if (!hold) { | |
| return; | |
| } | |
| var angle = clamp((centerPoint - evt.pageX + pageSize) / pageSize * -90, -180, 0), | |
| i, j; | |
| for (i = 0, j = prefixes.length; i < j; i++) { | |
| book.style[prefixes[i] + 'Transform'] = 'rotateX(' + (60 + angle / 8) + 'deg)'; | |
| page.style[prefixes[i] + 'Transform'] = 'rotateY(' + angle + 'deg)'; | |
| dino.style[prefixes[i] + 'Transform'] = 'rotateX(' + (angle / 2) + 'deg)'; | |
| shadow.style[prefixes[i] + 'Transform'] = 'translateZ(1px) skewX(' + (angle / 8) + 'deg)'; | |
| } | |
| }; | |
| })(window, document); | |
| </script></body></html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // alert('Hello world!'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split","fontsize":"70","seethrough":"1","prefixfree":"1","page":"result"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment