"title"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/shentao/pen/WvdaPG?depth=everything&limit=all&order=popularity&page=49&q=avatar&show_forks=false" /> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Roboto:100,300,700); .avatar { border-radius: 100%; width: 300px; -webkit-shape-outside: circle(150px at 55% 50%) border-box; shape-outside: circle(150px at 55% 50%) border-box; } html, body { font-family: "Roboto", sans-serif; overflow-x: hidden; height: 100%; width: 100%; color: #435757; overflow: hidden; background: -webkit-linear-gradient(110deg, #82C1D0 20%, #D3C27B 80%); background: linear-gradient(-20deg, #82C1D0 20%, #D3C27B 80%); } h1 { font-size: 48px; font-weight: 700; margin-top: 0; } h2 { font-size: 24px; font-weight: 300; } h3 { font-size: 18px; font-weight: 300; line-height: 1.3; } a { font-weight: 700; color: #2162AF; text-decoration: none; } a:hover, a:focus { color: #3C95FF; } p { line-height: 1.4; } kbd { background: rgba(33, 98, 175, 0.6); color: white; border-radius: 5px; padding: 2px 6px; font-size: 90%; margin-right: 7px; margin-left: 7px; } kbd:first-child { margin-left: 0; } .description__input { visibility: hidden; position: absolute; left: 0; margin: -9999px; } .description__trigger { display: inline-block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; padding: 8px 15px; height: 17px; text-align: center; color: #A98D4E; font-weight: 700; background: rgba(255, 255, 255, 0.6); border-top-left-radius: 10px; border-top-right-radius: 10px; width: 150px; cursor: pointer; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.3s 1s ease-in-out; transition: -webkit-transform 0.3s 1s ease-in-out; transition: transform 0.3s 1s ease-in-out; transition: transform 0.3s 1s ease-in-out, -webkit-transform 0.3s 1s ease-in-out; } .description__trigger:before { content: "How it's done"; display: block; opacity: 1; } .description__body { display: block; text-align: left; max-height: 80%; z-index: 100; position: absolute; bottom: 0; left: 0; right: 0; width: 80%; height: 85%; margin: 0 auto; background: #fff; color: #435757; -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out; -webkit-transform: translateY(100%); transform: translateY(100%); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .description__outside { max-height: 100%; overflow: auto; } .description__inside { padding: 40px; } .description__close { display: block; cursor: pointer; position: absolute; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; padding: 0; background: none; border: none; z-index: 2; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); top: 20px; right: 25px; } .description__close:before { content: "×"; font-weight: 700; font-size: 16px; color: #435757; display: block; z-index: 2; -webkit-transform: scale(1.6); transform: scale(1.6); -webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.3s cubic-bezier(0.51, -0.15, 0.48, 1.24); transition: color 0.2s ease-in-out, -webkit-transform 0.3s cubic-bezier(0.51, -0.15, 0.48, 1.24); transition: transform 0.3s cubic-bezier(0.51, -0.15, 0.48, 1.24), color 0.2s ease-in-out; transition: transform 0.3s cubic-bezier(0.51, -0.15, 0.48, 1.24), color 0.2s ease-in-out, -webkit-transform 0.3s cubic-bezier(0.51, -0.15, 0.48, 1.24); } .description__close:after { content: ""; z-index: -1; position: absolute; border-radius: 100%; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: scale(0); transform: scale(0); display: block; background: #435757; -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.54, -0.46, 0.36, 1.79); transition: -webkit-transform 0.2s cubic-bezier(0.54, -0.46, 0.36, 1.79); transition: transform 0.2s cubic-bezier(0.54, -0.46, 0.36, 1.79); transition: transform 0.2s cubic-bezier(0.54, -0.46, 0.36, 1.79), -webkit-transform 0.2s cubic-bezier(0.54, -0.46, 0.36, 1.79); top: -4px; left: -9px; height: 26px; width: 26px; } .description__close:hover, .description__close:focus { outline: none; } .description__close:hover:before, .description__close:focus:before { color: #fff; -webkit-transform: scale(1); transform: scale(1); } .description__close:hover:after, .description__close:focus:after { -webkit-transform: scale(1); transform: scale(1); } input[type="checkbox"]:checked + .description__body { -webkit-transform: translateY(0); transform: translateY(0); } .bold { font-weight: 700; } .light { font-weight: 100; } .big-list { font-size: 36px; font-weight: 700; list-style: square; } .big-list li { line-height: 1.4; } .small-list { font-size: 24px; list-style: circle; font-weight: 300; } .small-list li { line-height: 1.4; margin-bottom: 15px; } .button { display: inline-block; padding: 10px 20px; font-size: 20px; background: rgba(255, 255, 255, 0.5); color: #9B9B76; cursor: pointer; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; } .button:hover, .button:focus { background: rgba(255, 255, 255, 0.8); } .paragraph { font-size: 24px; font-weight: 300; margin-top: 10px; } .slide { width: 100%; min-height: 100%; padding: 20px 100px; box-sizing: border-box; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; z-index: 10; } .slide__arrow { position: absolute; top: 0; bottom: 0; height: 100%; width: 100px; display: block; } .slide__arrow:hover { background: rgba(255, 255, 255, 0.2); } .slide__arrow.slide__arrow--left { left: 0; } .slide__arrow.slide__arrow--right { right: 0; } .slide__ctrl { visibility: hidden; } #slide_ctrl_button { padding: 20px 40px; margin-top: 100px; font-size: 40px; } #slide_ctrl_button:after { content: "Last one!"; } .slide__ctrl-toggle[type="checkbox"]:checked + div > .slide__ctrl { visibility: visible; z-index: 1000; position: relative; margin-left: 2px; } .slide__ctrl-toggle[type="checkbox"]:checked + div #slide_ctrl_button { background: rgba(255, 255, 255, 0); color: #435757; } .slide__ctrl-toggle[type="checkbox"]:checked + div #slide_ctrl_button:after { content: "That's all. \aThanks for listening! :)"; white-space: pre; } input.slide__ctrl[type="radio"]:checked + .slide { -webkit-transform: translateX(0); transform: translateX(0); z-index: 12; } input.slide__ctrl[type="radio"]:checked + .slide .element--slide { -webkit-transform: translateX(0); transform: translateX(0); } input.slide__ctrl[type="radio"]:checked + .slide .description__trigger { -webkit-transform: translateY(0); transform: translateY(0); } .element--slide { -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .element--staggered:nth-child(1) { -webkit-transition-delay: 0.06s; transition-delay: 0.06s; } .element--staggered:nth-child(2) { -webkit-transition-delay: 0.12s; transition-delay: 0.12s; } .element--staggered:nth-child(3) { -webkit-transition-delay: 0.18s; transition-delay: 0.18s; } .element--staggered:nth-child(4) { -webkit-transition-delay: 0.24s; transition-delay: 0.24s; } .element--staggered:nth-child(5) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .element--staggered:nth-child(6) { -webkit-transition-delay: 0.36s; transition-delay: 0.36s; } .element--staggered:nth-child(7) { -webkit-transition-delay: 0.42s; transition-delay: 0.42s; } .element--staggered:nth-child(8) { -webkit-transition-delay: 0.48s; transition-delay: 0.48s; } .element--staggered:nth-child(9) { -webkit-transition-delay: 0.54s; transition-delay: 0.54s; } .element--staggered:nth-child(10) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .element--staggered:nth-child(11) { -webkit-transition-delay: 0.66s; transition-delay: 0.66s; } .element--staggered:nth-child(12) { -webkit-transition-delay: 0.72s; transition-delay: 0.72s; } .element--staggered:nth-child(13) { -webkit-transition-delay: 0.78s; transition-delay: 0.78s; } .element--staggered:nth-child(14) { -webkit-transition-delay: 0.84s; transition-delay: 0.84s; } .element--staggered:nth-child(15) { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } .element--staggered:nth-child(16) { -webkit-transition-delay: 0.96s; transition-delay: 0.96s; } .element--staggered:nth-child(17) { -webkit-transition-delay: 1.02s; transition-delay: 1.02s; } .element--staggered:nth-child(18) { -webkit-transition-delay: 1.08s; transition-delay: 1.08s; } .element--staggered:nth-child(19) { -webkit-transition-delay: 1.14s; transition-delay: 1.14s; } .element--staggered:nth-child(20) { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } .slide__header { font-size: 64px; margin: 20px auto; font-weight: 100; } .slide__subheader { font-size: 50px; font-weight: 100; } .util--center { text-align: center; } .slide__half { width: 50%; display: inline-block; } .element--centered { display: block; position: absolute; left: 0; right: 0; text-align: center; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .css3-container { height: 700px; width: 600px; margin: 0 auto; } .css3-container .slide__header { position: relative; margin: 0 auto; } .css3-container .slide__header span { -webkit-transform: translateY(-200px); transform: translateY(-200px); color: transparent; -webkit-transition-property: color, -webkit-transform; transition-property: color, -webkit-transform; transition-property: transform, color; transition-property: transform, color, -webkit-transform; -webkit-transition-duration: 0.3s, 0.2s; transition-duration: 0.3s, 0.2s; -webkit-transition-timing-function: cubic-bezier(0.7, 0.1, 0, 1.5), ease-in-out; transition-timing-function: cubic-bezier(0.7, 0.1, 0, 1.5), ease-in-out; } .css3-container .css3-element { height: 700px; width: 600px; position: absolute; } .css3-container .css3-element:nth-child(1) { -webkit-transition: background-color 0.5s 0.18s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.5s 0.3s cubic-bezier(0.7, 0.1, 0, 1.5); transition: background-color 0.5s 0.18s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.5s 0.3s cubic-bezier(0.7, 0.1, 0, 1.5); transition: clip-path 0.5s 0.3s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.5s 0.18s, top 0.2s ease-in-out, bottom 0.2s ease-in-out; transition: clip-path 0.5s 0.3s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.5s 0.18s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.5s 0.3s cubic-bezier(0.7, 0.1, 0, 1.5); -webkit-transition: -webkit-clip-path 0.5s 0.3s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.5s 0.18s, top 0.2s ease-in-out, bottom 0.2s ease-in-out; } .css3-container .css3-element:nth-child(2) { -webkit-transition: background-color 0.6s 0.26s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.6s 0.4s cubic-bezier(0.7, 0.1, 0, 1.5); transition: background-color 0.6s 0.26s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.6s 0.4s cubic-bezier(0.7, 0.1, 0, 1.5); transition: clip-path 0.6s 0.4s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.6s 0.26s, top 0.2s ease-in-out, bottom 0.2s ease-in-out; transition: clip-path 0.6s 0.4s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.6s 0.26s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.6s 0.4s cubic-bezier(0.7, 0.1, 0, 1.5); -webkit-transition: -webkit-clip-path 0.6s 0.4s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.6s 0.26s, top 0.2s ease-in-out, bottom 0.2s ease-in-out; } .css3-container .css3-element:nth-child(3) { -webkit-transition: background-color 0.7s 0.34s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.7s 0.5s cubic-bezier(0.7, 0.1, 0, 1.5); transition: background-color 0.7s 0.34s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.7s 0.5s cubic-bezier(0.7, 0.1, 0, 1.5); transition: clip-path 0.7s 0.5s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.7s 0.34s, top 0.2s ease-in-out, bottom 0.2s ease-in-out; transition: clip-path 0.7s 0.5s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.7s 0.34s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.7s 0.5s cubic-bezier(0.7, 0.1, 0, 1.5); -webkit-transition: -webkit-clip-path 0.7s 0.5s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.7s 0.34s, top 0.2s ease-in-out, bottom 0.2s ease-in-out; } .css3-container .css3-element:nth-child(4) { -webkit-transition: background-color 0.8s 0.42s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.8s 0.6s cubic-bezier(0.7, 0.1, 0, 1.5); transition: background-color 0.8s 0.42s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.8s 0.6s cubic-bezier(0.7, 0.1, 0, 1.5); transition: clip-path 0.8s 0.6s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.8s 0.42s, top 0.2s ease-in-out, bottom 0.2s ease-in-out; transition: clip-path 0.8s 0.6s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.8s 0.42s, top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-clip-path 0.8s 0.6s cubic-bezier(0.7, 0.1, 0, 1.5); -webkit-transition: -webkit-clip-path 0.8s 0.6s cubic-bezier(0.7, 0.1, 0, 1.5), background-color 0.8s 0.42s, top 0.2s ease-in-out, bottom 0.2s ease-in-out; } .css3-container .css3-element:nth-child(1) { background-color: rgba(67, 87, 87, 0.6); height: 100%; width: 100%; left: 0; top: 0; -webkit-clip-path: polygon(30% 40%, 80% 30%, 30% 86%, 40% 50%); clip-path: polygon(30% 40%, 80% 30%, 30% 86%, 40% 50%); } .css3-container .css3-element:nth-child(2) { z-index: 1; background-color: rgba(67, 87, 87, 0.6); -webkit-clip-path: polygon(72% 16%, 89% 86%, 54% 42%, 39% 67%, 32% 37%); clip-path: polygon(72% 16%, 89% 86%, 54% 42%, 39% 67%, 32% 37%); } .css3-container .css3-element:nth-child(3) { z-index: 2; background-color: rgba(67, 87, 87, 0.6); -webkit-clip-path: polygon(26% 31%, 19% 38%, 26% 46%, 41% 49%, 53% 40%, 64% 23%, 55% 16%, 46% 10%, 32% 6%, 26% 14%, 41% 18%, 43% 27%, 20% 20%, 14% 15%, 3% 20%, 6% 29%, 15% 31%, 20% 26%); clip-path: polygon(26% 31%, 19% 38%, 26% 46%, 41% 49%, 53% 40%, 64% 23%, 55% 16%, 46% 10%, 32% 6%, 26% 14%, 41% 18%, 43% 27%, 20% 20%, 14% 15%, 3% 20%, 6% 29%, 15% 31%, 20% 26%); } .css3-container .css3-element:nth-child(4) { z-index: 3; background-color: rgba(67, 87, 87, 0.6); -webkit-clip-path: polygon(74% 50%, 19% 12%, 81% 82%, 49% 72%); clip-path: polygon(74% 50%, 19% 12%, 81% 82%, 49% 72%); } .css3-container:hover .slide__header { z-index: 10; } .css3-container:hover .slide__header span { -webkit-transform: translateY(0); transform: translateY(0); color: rgba(0, 0, 0, 0.7); } .css3-container:hover .slide__header span:nth-child(1) { -webkit-transition-delay: 1.05s; transition-delay: 1.05s; } .css3-container:hover .slide__header span:nth-child(2) { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; } .css3-container:hover .slide__header span:nth-child(3) { -webkit-transition-delay: 1.15s; transition-delay: 1.15s; } .css3-container:hover .slide__header span:nth-child(4) { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } .css3-container:hover .slide__header span:nth-child(5) { -webkit-transition-delay: 1.25s; transition-delay: 1.25s; } .css3-container:hover .slide__header span:nth-child(6) { -webkit-transition-delay: 1.3s; transition-delay: 1.3s; } .css3-container:hover .slide__header span:nth-child(7) { -webkit-transition-delay: 1.35s; transition-delay: 1.35s; } .css3-container:hover .slide__header span:nth-child(8) { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; } .css3-container:hover .slide__header span:nth-child(9) { -webkit-transition-delay: 1.45s; transition-delay: 1.45s; } .css3-container:hover .css3-element:nth-child(1) { background: transparent; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } .css3-container:hover .css3-element:nth-child(2) { z-index: 1; background: #2162AF; -webkit-clip-path: polygon(52% 93%, 80% 86%, 87% 25%, 16% 25%, 23% 86%); clip-path: polygon(52% 93%, 80% 86%, 87% 25%, 16% 25%, 23% 86%); } .css3-container:hover .css3-element:nth-child(3) { z-index: 2; background: #E6E6E5; -webkit-clip-path: polygon(29% 37%, 30% 45%, 53% 45%, 31% 53%, 32% 60%, 63% 60%, 62% 70%, 52% 72%, 42% 70%, 41% 64%, 33% 64%, 35% 75%, 52% 80%, 69% 75%, 72% 53%, 51% 53%, 73% 45%, 74% 37%); clip-path: polygon(29% 37%, 30% 45%, 53% 45%, 31% 53%, 32% 60%, 63% 60%, 62% 70%, 52% 72%, 42% 70%, 41% 64%, 33% 64%, 35% 75%, 52% 80%, 69% 75%, 72% 53%, 51% 53%, 73% 45%, 74% 37%); } .css3-container:hover .css3-element:nth-child(4) { z-index: 3; background: rgba(255, 255, 255, 0.2); -webkit-clip-path: polygon(52% 30%, 80% 30%, 75% 82%, 52% 87%); clip-path: polygon(52% 30%, 80% 30%, 75% 82%, 52% 87%); } input[type="radio"].stopwatch__radio { display: none; } .stopwatch { text-align: center; } .stopwatch .cell { width: 50px; height: 48px; text-align: center; overflow: hidden; display: inline-block; border-radius: 8px; background: rgba(255, 255, 255, 0.3); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); margin-left: 4px; } .stopwatch .cell.empty { background: none; border: none; box-shadow: none; width: 10px; } .stopwatch .cell .num { font-size: 40px; line-height: 50px; font-weight: 700; color: rgba(67, 87, 87, 0.8); display: block; -webkit-animation-play-state: paused; animation-play-state: paused; } .control { text-align: center; margin-top: 30px; } .control label { font-size: 24px; font-weight: 300; padding: 10px; margin: 0 10px; display: inline-block; cursor: pointer; width: 83px; letter-spacing: 1px; color: white; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); border-radius: 8px; } .control label[for="start"] { background: rgba(61, 162, 58, 0.6); } .control label[for="stop"] { background: rgba(204, 24, 30, 0.6); } .control label[for="reset"] { background: rgba(67, 87, 87, 0.6); } /************CSS Calss Animation************* */ .ten { -webkit-animation-name: ten; animation-name: ten; -webkit-animation-timing-function: steps(10); animation-timing-function: steps(10); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes ten { 0% { margin-top: 0; } 100% { margin-top: -500px; } } @keyframes ten { 0% { margin-top: 0; } 100% { margin-top: -500px; } } .sixs { -webkit-animation-name: sixs; animation-name: sixs; -webkit-animation-timing-function: steps(6); animation-timing-function: steps(6); -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes sixs { 0% { margin-top: 0; } 100% { margin-top: -300px; } } @keyframes sixs { 0% { margin-top: 0; } 100% { margin-top: -300px; } } .mill { -webkit-animation-duration: 0.01s; animation-duration: 0.01s; } .ten_mill { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; } .hund_mill { -webkit-animation-duration: 1s; animation-duration: 1s; } .sec { -webkit-animation-duration: 10s; animation-duration: 10s; } .ten_sec { -webkit-animation-duration: 60s; animation-duration: 60s; } .minu { -webkit-animation-duration: 600s; animation-duration: 600s; } .ten_minu { -webkit-animation-duration: 3600s; animation-duration: 3600s; } .hour { -webkit-animation-duration: 36000s; animation-duration: 36000s; } .ten_hour { -webkit-animation-duration: 360000s; animation-duration: 360000s; } /************CSS Calss Play************* */ #start:checked ~ .stopwatch .num { -webkit-animation-play-state: running; animation-play-state: running; } #stop:checked ~ .stopwatch .num { -webkit-animation-play-state: paused; animation-play-state: paused; } #reset:checked ~ .stopwatch .num { -webkit-animation: none; animation: none; } body { color: #435757; background: -webkit-linear-gradient(110deg, #d0b782 20%, #a0cecf 80%); background: linear-gradient(-20deg, #d0b782 20%, #a0cecf 80%); } .todolist { max-width: 450px; margin: 0 auto; border-top: 5px solid #435757; background-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: left; /* hide inputs offscreen, but at the same vertical positions as the correpsonding labels, so that tabbing scrolls the viewport as expected */ } .todolist h1 { margin: 0; padding: 20px; background-color: rgba(255, 255, 255, 0.4); font-size: 1.8em; text-align: center; } .todolist .items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 20px; counter-reset: done-items undone-items; } .todolist h2 { position: relative; margin: 0; padding: 10px 0; font-size: 1.2em; } .todolist h2::before { content: ""; display: block; position: absolute; top: 10px; bottom: 10px; left: -20px; width: 5px; background-color: #435757; } .todolist h2::after { display: block; float: right; font-weight: normal; } .todolist .done { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .todolist .done::after { content: " (" counter(done-items) ")"; } .todolist .undone { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .todolist .undone::after { content: " (" counter(undone-items) ")"; } .todolist input.checkbox { display: block; height: 53px; margin: 0 0 -53px -9999px; -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; outline: none; counter-increment: undone-items; } .todolist input.checkbox:checked { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; counter-increment: done-items; } .todolist label { display: block; position: relative; padding: 15px 0 15px 45px; border-top: 1px dashed #fff; -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; cursor: pointer; -webkit-animation: undone 0.5s; animation: undone 0.5s; } .todolist label::before { content: ""; /* circle outline */ display: block; position: absolute; top: 11px; left: 10px; font: 1.5em "FontAwesome"; } .todolist label:hover, .todolist input:focus + label { background-color: rgba(255, 255, 255, 0.2); } .todolist input:checked + label { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -webkit-animation: done 0.5s; animation: done 0.5s; } .todolist input:checked + label::before { content: ""; /* circle checkmark */ } @-webkit-keyframes done { 0% { opacity: 0; background-color: rgba(255, 255, 255, 0.4); -webkit-transform: translateY(20px); transform: translateY(20px); } 50% { opacity: 1; background-color: rgba(255, 255, 255, 0.4); } } @keyframes done { 0% { opacity: 0; background-color: rgba(255, 255, 255, 0.4); -webkit-transform: translateY(20px); transform: translateY(20px); } 50% { opacity: 1; background-color: rgba(255, 255, 255, 0.4); } } @-webkit-keyframes undone { 0% { opacity: 0; background-color: rgba(255, 255, 255, 0.4); -webkit-transform: translateY(-20px); transform: translateY(-20px); } 50% { opacity: 1; background-color: rgba(255, 255, 255, 0.4); } } @keyframes undone { 0% { opacity: 0; background-color: rgba(255, 255, 255, 0.4); -webkit-transform: translateY(-20px); transform: translateY(-20px); } 50% { opacity: 1; background-color: rgba(255, 255, 255, 0.4); } } .fractal-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 160px; height: 160px; box-sizing: border-box; padding: 58px 0; background: #fff; color: #BAC1A5; border-radius: 100%; margin: 100px auto; -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; -webkit-transform-origin: bottom right; transform-origin: bottom right; font-size: 40px; z-index: 10; text-align: center; } .fractal-container:before { content: "Play"; display: block; -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease; transition: opacity 0.2s ease, -webkit-transform 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease; } .fractal-container:after { content: "Stop"; display: block; -webkit-transform: translateY(0); transform: translateY(0); opacity: 0; -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease; transition: opacity 0.2s ease, -webkit-transform 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease; } .fractal-element { -webkit-transform-origin: center left; transform-origin: center left; position: absolute; top: 0; left: 0; width: 80px; height: 160px; display: block; border-top-left-radius: 200px; border-bottom-left-radius: 200px; background: rgba(255, 255, 255, 0); z-index: -1; -webkit-transition: background 0.1s ease, -webkit-transform 0.3s cubic-bezier(0.7, 0.1, 0, 1.5); transition: background 0.1s ease, -webkit-transform 0.3s cubic-bezier(0.7, 0.1, 0, 1.5); transition: transform 0.3s cubic-bezier(0.7, 0.1, 0, 1.5), background 0.1s ease; transition: transform 0.3s cubic-bezier(0.7, 0.1, 0, 1.5), background 0.1s ease, -webkit-transform 0.3s cubic-bezier(0.7, 0.1, 0, 1.5); -webkit-animation-name: none; animation-name: none; -webkit-box-reflect: right; } .fractal-element > .fractal-element { width: 70%; height: 70%; } #fractal-checkbox:checked + .fractal-container:before { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } #fractal-checkbox:checked + .fractal-container:after { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 1; } #fractal-checkbox:checked + .fractal-container .fractal-element > .fractal-element { background: rgba(255, 255, 255, 0.3); -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-name: fractaldance; animation-name: fractaldance; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes fractaldance { 0% { -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg); transform: translate3d(0%, 0%, 0) rotate(0deg); } 20% { -webkit-transform: translate3d(-70%, -85%, 0) rotate(-45deg); transform: translate3d(-70%, -85%, 0) rotate(-45deg); } 50% { -webkit-transform: translate3d(-70%, -85%, 0) rotate(-45deg); transform: translate3d(-70%, -85%, 0) rotate(-45deg); } 75% { -webkit-transform: translate3d(-120%, -120%, 0) rotate(-20deg); transform: translate3d(-120%, -120%, 0) rotate(-20deg); } 100% { -webkit-transform: translate3d(-100%, -100%, 0) rotate(-45deg); transform: translate3d(-100%, -100%, 0) rotate(-45deg); } } @keyframes fractaldance { 0% { -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg); transform: translate3d(0%, 0%, 0) rotate(0deg); } 20% { -webkit-transform: translate3d(-70%, -85%, 0) rotate(-45deg); transform: translate3d(-70%, -85%, 0) rotate(-45deg); } 50% { -webkit-transform: translate3d(-70%, -85%, 0) rotate(-45deg); transform: translate3d(-70%, -85%, 0) rotate(-45deg); } 75% { -webkit-transform: translate3d(-120%, -120%, 0) rotate(-20deg); transform: translate3d(-120%, -120%, 0) rotate(-20deg); } 100% { -webkit-transform: translate3d(-100%, -100%, 0) rotate(-45deg); transform: translate3d(-100%, -100%, 0) rotate(-45deg); } } </style></head><body> <input class="slide__ctrl slide__ctrl-toggle" id="ctrl_toggle" type="checkbox"/> <div style="text-align: center"> <input class="slide__ctrl" type="radio" name="slidesCtrls" id="1" checked="true"/> <section class="slide slide__" id="slide__1"> <div class="element--centered"> <h1 class="slide__header element--slide">Cascading Style <span class="bold">Scripts<span></h1> <h2 class="element--slide"> (or Cascading Scripts Sheets)</h2><img src="http://dulisz.com/pwr/css3-logo.png" alt=""/> </div> <label class="slide__arrow slide__arrow--left" for="0" tabindex="1"></label> <label class="slide__arrow slide__arrow--right" for="2" tabindex="1"></label> </section> <input class="slide__ctrl" type="radio" name="slidesCtrls" id="2"/> <section class="slide slide__" id="slide__2"> <div class="element--centered"> <h1 class="slide__header element--slide" style="margin-bottom: 20px">About me</h1><img class="avatar element--staggered element--slide" src="http://userserve-ak.last.fm/serve/_/101350955.jpg"/> <h1 class="element--staggered element--slide" style="padding-top: 25px; text-transform: uppercase"><span class="light">Damian</span>Dulisz</h1> <h3 class="element--staggered element--slide">Front-end Developer at<br/><a href="http://monterail.com" target="_blank">Monterail.com</a></h3> <h3 class="element--staggered element--slide">Amateur photographer:<br/><a href="https://tookapic.com/damiandulisz" target="_blank">tookapic.com/damiandulisz</a><br/><a href="https://instagram.com/damiandulisz" target="_blank">instagram.com/damiandulisz</a></h3> <h3 class="element--staggered element--slide">Eclectic music listener:<br/><a href="https://last.fm/user/shentao" target="_blank">last.fm/user/shentao</a><br/><a href="https://open.spotify.com/user/1163725670" target="_blank">open.spotify.com/user/1163725670</a></h3> </div> <label class="slide__arrow slide__arrow--left" for="1" tabindex="1"></label> <label class="slide__arrow slide__arrow--right" for="3" tabindex="1"></label> </section> <input class="slide__ctrl" type="radio" name="slidesCtrls" id="3"/> <section class="slide slide__" id="slide__3"> <div class="element--centered"> <h1>JavaScript? Meh...</h1> </div> <label class="slide__arrow slide__arrow--left" for="2" tabindex="1"></label> <label class="slide__arrow slide__arrow--right" for="4" tabindex="1"></label> </section> <input class="slide__ctrl" type="radio" name="slidesCtrls" id="4"/> <section class="slide slide__" id="slide__4"> <div class="element--centered"> <div class="css3-container"> <div class="css3-element"></div> <div class="css3-element"></div> <div class="css3-element"></div> <div class="css3-element"></div> </div> </div> <label class="description__trigger" for="desc_4" tabindex="1"></label> <input class="description__input" type="checkbox" name="description" id="desc_4"/> <div class="description__body"> <label class="description__close" for="desc_4" tabindex="1"></label> <div class="description__outside"> <div class="description__inside"> <h1>Clip Path & CSS transition!</h1> <h2>How does it work?</h2> <ul class="small-list"> <li><kbd>clip-path: polygon(Xposition Yposition, ... , Xposition Yposition)</kbd></li> <li><kbd>clip-path: url(path_to_svg)</kbd></li> <li><kbd>transition: property time delay timing function</kbd></li> <li><kbd>clip-path: polygon(30% 40%, 80% 30%, 30% 86%, 40% 50%)</kbd></li> <li><kbd>transition: clip-path .3s .2s cubic-bezier(.7, .1, 0, 1.5)</kbd></li> </ul> <h2>Good to know:</h2> <ul class="small-list"> <li>Gets buggy with CSS Transforms in webkit!</li> <li>Polygons need to have the same amount of vertices to change their position</li> <li>Can be used with SVG elements</li> </ul> <h2>Useful links / source:</h2> <ul class="small-list"> <li><a href="https://bennettfeely.com/clippy/">https://bennettfeely.com/clippy/</a></li> <li><a href="http://cssplant.com/clip-path-generator">http://cssplant.com/clip-path-generator</a></li> </ul> </div> </div> </div> <label class="slide__arrow slide__arrow--left" for="3" tabindex="1"></label> <label class="slide__arrow slide__arrow--right" for="5" tabindex="1"></label> </section> <input class="slide__ctrl" type="radio" name="slidesCtrls" id="5"/> <section class="slide slide__" id="slide__5"> <div class="element--centered"> <input class="stopwatch__radio" id="start" type="radio" name="controls"/> <input class="stopwatch__radio" id="stop" type="radio" name="controls"/> <input class="stopwatch__radio" id="reset" type="radio" name="controls"/> <div class="stopwatch"> <div class="cell"><span class="num ten ten_hour">0 1 2 3 4 5 6 7 8 9</span></div> <div class="cell"><span class="num ten hour">0 1 2 3 4 5 6 7 8 9</span></div> <div class="cell empty"><span class="num">:</span></div> <div class="cell"><span class="num sixs ten_minu">0 1 2 3 4 5</span></div> <div class="cell"><span class="num ten minu">0 1 2 3 4 5 6 7 8 9</span></div> <div class="cell empty"><span class="num">:</span></div> <div class="cell"><span class="num sixs ten_sec">0 1 2 3 4 5</span></div> <div class="cell"><span class="num ten sec">0 1 2 3 4 5 6 7 8 9</span></div> <div class="cell empty"><span class="num">:</span></div> <div class="cell"><span class="num ten hund_mill">0 1 2 3 4 5 6 7 8 9</span></div> <div class="cell"><span class="num ten ten_mill">0 1 2 3 4 5 6 7 8 9</span></div> <div class="cell"><span class="num ten mill">0 1 2 3 4 5 6 7 8 9</span></div> </div> <div class="control"> <label for="start">Start</label> <label for="stop">Stop</label> <label for="reset">Reset</label> </div> </div> <label class="description__trigger" for="desc_5" tabindex="1"></label> <input class="description__input" type="checkbox" name="description" id="desc_5"/> <div class="description__body"> <label class="description__close" for="desc_5" tabindex="1"></label> <div class="description__outside"> <div class="description__inside"> <h1>CSS Animations!</h1> <h2>How does it work?</h2> <ul class="small-list"> <li><kbd>animation-name: name_of_animation</kbd></li> <li><kbd>animation-iteration-count: number_of_iterations || infinite</kbd></li> <li><kbd>animation-timing-function: like_easing_or_linear_etc || steps(number_of_steps, optional_direction)</kbd></li> <li><kbd>animation-duration: duration</kbd></li> </ul> <h2>How it's done</h2> <ul class="small-list"> <li><kbd>span.num.ten.sec 0 1 2 3 4 5 6 7 8 9</kbd>is a column because of its limited width. The animation changes its margin.</li> <li><kbd>.ten</kbd>have steps(10),<kbd>.sixs</kbd> have steps(6). The value of the margin transformation is equal to the multiplication of cell viewport and number of steps. This way the number changes each step infinitely. </li> <li>Each number shares one of the 2 functions "tens" or "sixs" with different duration. For example: 0.1s for miliseconds, 60s for 1 minute.</li> </ul> <h2>Good to know:</h2> <ul class="small-list"> <li>If you change steps() to linear timing function the numbers will rotate!</li> </ul> <h2>Useful links / source:</h2> <ul class="small-list"> <li><a href="https://www.cssscript.com/create-a-stopwatch-using-radios-and-pure-css-css3/">https://www.cssscript.com/create-a-stopwatch-using-radios-and-pure-css-css3/</a></li> </ul> </div> </div> </div> <label class="slide__arrow slide__arrow--left" for="4" tabindex="1"></label> <label class="slide__arrow slide__arrow--right" for="6" tabindex="1"></label> </section> <input class="slide__ctrl" type="radio" name="slidesCtrls" id="6"/> <section class="slide slide__" id="slide__6"> <div class="element--centered"> <div class="todolist"> <h1>To-Do List</h1> <div class="items"> <input class="checkbox" id="item1" type="checkbox" checked=""/> <label for="item1">Learn CSS</label> <input class="checkbox" id="item2" type="checkbox"/> <label for="item2">Use it like JS</label> <input class="checkbox" id="item3" type="checkbox"/> <label for="item3">Create a To-Do list</label> <input class="checkbox" id="item4" type="checkbox"/> <label for="item4">Go to meet.js</label> <input class="checkbox" id="item5" type="checkbox"/> <label for="item5">Improvize</label> <input class="checkbox" id="item6" type="checkbox"/> <label for="item6">Impress</label> <h2 class="done" aria-hidden="true">Done</h2> <h2 class="undone" aria-hidden="true">Not Done</h2> </div> </div> </div> <label class="description__trigger" for="desc_6" tabindex="1"></label> <input class="description__input" type="checkbox" name="description" id="desc_6"/> <div class="description__body"> <label class="description__close" for="desc_6" tabindex="1"></label> <div class="description__outside"> <div class="description__inside"> <h1>Flex box & CSS counters</h1> <h2>How does it work?</h2> <ul class="small-list"> <li>ToDo task-items are displayed as Flex with <kbd>flex-direction: column</kbd></li> <li>Each item has a given <kbd>order:</kbd> value that defines its position.</li> <li>In this example the done header has <kbd>order: 1</kbd>, the done tasks (labels) <kbd>order: 2</kbd> and so on...</li> <li>Headers:after elements have: <kbd>content: counter(done-items)</kbd> and <kbd>content: counter(undone-items)</kbd></li> <li> Task names are labels for hidden checkboxes. A checkbox has <kbd>counter-increment: undone-items</kbd> unless it's <kbd>:checked</kbd>. Then it's changed to <kbd>counter-increment: done-items</kbd> </li> <li>When a checkbox is checked the <kbd>checkbox:checked + label</kbd> selector kicks in (with animation) and changes the <kbd>order:</kbd> to either 2 or 4.</li> </ul> <h2>Good to know:</h2> <ul class="small-list"> <li>CSS counters work on IE8!</li> <li>Flex box works in IE10 (needing some small adjustments)</li> <li>+ and ~ selectors work in IE8</li> </ul> <h2>Useful links / source:</h2> <ul class="small-list"> <li><a href="http://codersblock.com/blog/checkbox-trickery-with-css/">http://codersblock.com/blog/checkbox-trickery-with-css/</a></li> <li><a href="https://codepen.io/lonekorean/pen/xGLLwX">https://codepen.io/lonekorean/pen/xGLLwX</a></li> </ul> </div> </div> </div> <label class="slide__arrow slide__arrow--left" for="5" tabindex="1"></label> <label class="slide__arrow slide__arrow--right" for="7" tabindex="1"></label> </section> <input class="slide__ctrl" type="radio" name="slidesCtrls" id="7"/> <section class="slide slide__" id="slide__7"> <div class="element--centered"> <input type="checkbox" id="fractal-checkbox" style="visibility:hidden"/> <label class="fractal-container" id="fractalbutton" for="fractal-checkbox"> <div class="fractal-element"> <div class="fractal-element"> <div class="fractal-element"> <div class="fractal-element"> <div class="fractal-element"> <div class="fractal-element"> <div class="fractal-element"> <div class="fractal-element"> <div class="fractal-element"> <div class="fractal-element"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </label> </div> <label class="description__trigger" for="desc_7" tabindex="1"></label> <input class="description__input" type="checkbox" name="description" id="desc_7"/> <div class="description__body"> <label class="description__close" for="desc_7" tabindex="1"></label> <div class="description__outside"> <div class="description__inside"> <h1>-webkit-box-reflect</h1> <h2>How does it work?</h2> <ul class="small-list"> <li>Create an element which has a fixed width and height.</li> <li>Use <kbd>element > element</kbd> child selector to target each nested element.</li> <li>Set every child element's size to a % of it's parent and transform it outside of the parent. Rotate it.</li> <li>Add <kbd>-webkit-box-reflect</kbd></li> <li>Watch the magic happen</li> </ul> <h2>Good to know:</h2> <ul class="small-list"> <li>Chrome only (for now)</li> <li>Using transform instead of top/left improves performance. Sadly it makes the shapes a bit blurry.</li> </ul> <h2>Useful links:</h2> <ul class="small-list"> <li><a href="https://codepen.io/pixelass">https://codepen.io/pixelass</a></li> </ul> </div> </div> </div> <label class="slide__arrow slide__arrow--left" for="6" tabindex="1"></label> <label class="slide__arrow slide__arrow--right" for="8" tabindex="1"></label> </section> <input class="slide__ctrl" type="radio" name="slidesCtrls" id="8"/> <section class="slide slide__" id="slide__8"> <div class="element--centered"> <label class="button" id="slide_ctrl_button" for="ctrl_toggle"></label> </div> <label class="slide__arrow slide__arrow--left" for="7" tabindex="1"></label> <label class="slide__arrow slide__arrow--right" for="9" tabindex="1"></label> </section> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >(function() { }).call(this); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: