From 2014.igem.org

@import url(http://fonts.googleapis.com/css?family=Raleway:200,400,700,800); @font-face { font-weight: normal; font-style: normal; font-family: 'codropsicons'; src:url('../fonts/codropsicons/codropsicons.eot'); src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); } *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } .clearfix:before, .clearfix:after { content: ''; display: table; } .clearfix:after { clear: both; } body { background: #b4bad2; color: #fffce1; font-weight: 400; font-size: 1em; font-family: 'Raleway', Arial, sans-serif; } a { color: #4e4a46; text-decoration: none; outline: none; } a:hover, a:focus { color: #c94e50; outline: none; } button:focus { outline: none; } section { padding: 1em; text-align: center; } /* Header */ .codrops-header { margin: 0 auto; padding: 3em 2em; text-align: center; } .codrops-header h1 { margin: 0 auto; font-weight: 800; font-size: 3.75em; line-height: 1; } .codrops-header h1 span { display: block; font-size: 50%; font-weight: 400; padding-top: 0.325em; } /* Demo Buttons Style */ .codrops-demos { font-size: 1em; max-width: 1200px; margin: 3em auto 5em; padding: 2em 10em 0; } .codrops-demos > a { display: inline-block; margin: 0.75em; padding: 1.35em 1.1em; width: 15em; background: #fffce1; outline: none; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; border-radius: 20px/50px; } .codrops-demos > a.current-demo { background: #c94e50; color: #fffce1; } @media screen and (max-width: 40em) { body { font-size: 80%; } .codrops-header h1 { font-size: 2.5em; } .codrops-demos { max-width: 900px; padding: 2em 2em 0; } .related > a { margin: 20px 0; } } @media screen and (max-width: 25em) { .codrops-icon { font-size: 250%; } .codrops-icon span { display: none; } } html, body, .container, .content-wrap { overflow: hidden; width: 100%; height: 100%; } .container { background: #373a47; } .menu-wrap a { color: #b8b7ad; } .menu-wrap a:hover, .menu-wrap a:focus { color: #c94e50; } .content-wrap { overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .content { position: relative; background: #b4bad2; } /* Overlay */ .content::before { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: rgba(0,0,0,0.3); content: ''; opacity: 0; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); -webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s; transition: opacity 0.3s, transform 0s 0.3s; } /* Menu Button */ .menu-button { position: fixed; z-index: 1000; margin: 1em; padding: 0; width: 2.5em; height: 2.25em; border: none; text-indent: 2.5em; font-size: 1.5em; color: transparent; background: transparent; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .menu-button::before { position: absolute; top: 0.5em; right: 0.5em; bottom: 0.5em; left: 0.5em; content: ''; } .menu-button:hover { opacity: 0.6; } /* Menu */ .menu-wrap { position: absolute; font-weight: 700; opacity: 0; -webkit-transition: opacity 1s; transition: opacity 1s; } .menu-top { line-height: 58px; } .menu-top .profile { display: inline-block; padding: 8px 10px; line-height: 42px; } .menu-top .profile, .menu-side { width: 300px; } .menu-top .profile img { float: left; margin-right: 1em; } .icon-list { display: inline-block; font-size: 1.25em; } .icon-list a { margin: 0 1em 0 0; padding: 0; } @media screen and (max-width: 32em) { .icon-list { padding-left: 1em; } } .menu-side a { display: block; padding: 1.2em; border-bottom: 1px solid rgba(0,0,0,0.1); } .menu-side a:first-child { border-top: 1px solid rgba(0,0,0,0.1); } /* Shown menu */ .show-menu .menu-wrap { opacity: 1; } .show-menu .content-wrap, .show-menu .menu-button { -webkit-transform: translate3d(300px,60px,0); transform: translate3d(300px,60px,0); } .show-menu .content::before { opacity: 1; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } /* -------------------------------- -------------------------------- */ img { max-width: 100%; } .cd-image-container { position: relative; width: 90%; max-width: 768px; margin: 0em auto; } .cd-image-container img { display: block; } .cd-image-label { position: absolute; bottom: 0; right: 0; color: #ffffff; padding: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s; transition: transform 0.3s 0.7s, opacity 0.3s 0.7s; } .cd-image-label.is-hidden { visibility: hidden; } .is-visible .cd-image-label { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .cd-resize-img { position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-resize-img img { position: absolute; left: 0; top: 0; display: block; height: 100%; width: auto; max-width: none; } .cd-resize-img .cd-image-label { right: auto; left: 0; } .is-visible .cd-resize-img { width: 50%; /* bounce in animation of the modified image */ -webkit-animation: cd-bounce-in 0.7s; -moz-animation: cd-bounce-in 0.7s; animation: cd-bounce-in 0.7s; } @-webkit-keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } @-moz-keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } @keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } .cd-handle { position: absolute; height: 44px; width: 44px; /* center the element */ left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; border-radius: 50%; background: #dc717d url("../img/cd-arrows.svg") no-repeat center center; cursor: move; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0); -moz-transform: translate3d(0, 0, 0) scale(0); -ms-transform: translate3d(0, 0, 0) scale(0); -o-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0); } .cd-handle.draggable { /* change background color when element is active */ background-color: #445b7c; } .is-visible .cd-handle { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); -o-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s; transition: transform 0.3s 0.7s, opacity 0s 0.7s; }

Off-Canvas Menu Effects Showing (off-canvas) menus stylishly

Original

Modified