This file contains 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
/** | |
* Flexbox Buttons | |
*/ | |
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700");@import url("https://fonts.googleapis.com/css?family=Roboto+Mono");@import url("https://fonts.googleapis.com/css?family=Material+Icons");* { box-sizing: border-box;}html, body { background: #F5F5F5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100vw; height: 100vh; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; font-family: "Roboto Mono", sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga" on; overflow: auto;}h1, h2, h3, h4, h5, h6 { color: blue-grey; font-weight: 400;}.centered-container { b |
This file contains 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
/** | |
* Button effects | |
*/ | |
@import url("https://fonts.googleapis.com/css?family=Raleway");* { box-sizing: border-box;}body { margin: 0; padding: 0; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: Raleway; background-color: #ecf0f1;}.copyright { position: absolute; bottom: 0;}.copyright a { text-decoration: none; color: #16a085;}.copyright a:hover { text-decoration: underline;}.button { position: relative; padding: 1em 1.5em; border: none; background-color: transparent; cursor: pointer; outline: none; font-size: 18px; margin: 1em 0.8em;}.button.type1 { color: #566473;}.button.type1.type1::after, .button.type1.type1::before { content: ""; display: block; position: absolute; width: 20%; height: 20%; border: 2px solid; transition: all 0.6s ease; border-radius: 2px;}.button.type1.type1::after { bottom: 0; right: 0; border-top-color: transparent; border-left-color: transparent; border-bottom-color: #5 |
This file contains 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
/** | |
* Looking through Dirty Glass | |
*/ | |
body { margin:0;}.wasteland { animation:zoomIn 10s linear infinite alternate; background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/wasteland.jpg); background-size:cover; height:100vh; position:fixed; width:100vw;}.glass { animation:zoomIn 10s linear infinite alternate-reverse; background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/5791996587_7b192ffbf7_o.jpg); background-size:cover; height:100vh; opacity:.3; position:fixed; width:100vw;}@keyframes zoomIn { 0% { transform:scale(1); } 100% { transform:scale(1.5); }} |
This file contains 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
/** | |
* Fidget Loader | |
*/ | |
body { width: 100%; height: 100vh; filter: url("#goo"); -webkit-filter: url("#goo"); background: #222;}body svg { position: absolute;}body .wrap { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); margin-top: -30px; height: 100px; animation: colorshift 3s linear infinite;}@keyframes colorshift { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); }}body .wrap .circle { width: 30px; height: 30px; border-radius: 100%; background: #fff968; position: absolute; transform-origin: 50% 170%;}body .wrap .circle:nth-of-type(1) { transform: rotate(10deg); animation: bump1 4s ease-in-out infinite; animation-delay: -1s;}@keyframes bump1 { 0% { transform: rotate(0deg); } 25% { transform: rotate(20deg); } 75% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }}body .wrap .circle:nth-of-type(2) { transform: rotate(20deg); animation: bump2 4s ease-in-out infinite; animation-delay |
This file contains 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
/** | |
* water wave | |
*/ | |
html,body { padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden;} |
This file contains 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
/** | |
* Stairs 3D | |
*/ | |
*,:before,:after { box-sizing: border-box;}* { -webkit-transition: 200ms cubic-bezier(0, 0, 0.33, 1.5); transition: 200ms cubic-bezier(0, 0, 0.33, 1.5);}html { font-size: 16px;}body { font-family: 'Open Sans', sans-serif; min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; overflow: hidden; position: relative; background: #EDF1F2;}.main-header { position: absolute; top: 0; left: 0; font-weight: 700; font-size: 1.5rem; width: 100%; padding: .25rem; height: 3rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}.buttons { z-index: 1; position: absolute; padding: 0 1rem .5 |
This file contains 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
/** | |
* Bees & Bombs Hypnotic Cube | |
*/ | |
body { width: 100%; height: 100vh; background: #222;}body .wrap { perspective: 1000px; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}body .wrap .cube { transform-style: preserve-3d; position: absolute; width: 100%; height: 100%; animation: rotating 2.25s linear infinite;}@keyframes rotating { 0% { transform: rotateX(-30deg) rotateY(90deg) translateY(0); } 100% { transform: rotateX(-30deg) rotateY(270deg) translateY(-200px); }}body .wrap .cube .cube__face { position: absolute; width: 100%; height: 100%; background: #222; box-shadow: inset 0 0 0 5px #fff;}body .wrap .cube .cube__face:nth-of-type(1) { transform: rotateY(0deg) rotateX(0deg) translateZ(100px); background: transparent; box-shadow: none; transform-style: preserve-3d;}body .wrap .cube .cube__face:nth-of-type(1):before { content: ''; position: absolute; width: 100%; height: 100%; background: #222; transfo |
This file contains 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
/** | |
* CSS Bike | |
*/ | |
body { background: peachpuff;}.bike { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}.line:nth-child(1) { transform: rotate(6deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(2) { transform: rotate(12deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(3) { transform: rotate(18deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(4) { transform: rotate(24deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(5) { transform: rotate(30deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth-child(6) { transform: rotate(36deg); height: 75px; width: 2px; background: gray; transform-origin: 0px 100px; position: absolute;}.line:nth- |
This file contains 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
/** | |
* CSS3 Checkbox Styles | |
*/ | |
/* $activeColor: #c0392b; //red *//* $background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/13460/dark_wall.png'); *//* .slideOne */.slideOne { width: 50px; height: 10px; background: #333; margin: 20px auto; position: relative; border-radius: 50px; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);}.slideOne label { display: block; width: 16px; height: 16px; position: absolute; top: -3px; left: -3px; cursor: pointer; background: #fcfff4; background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 50px; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3); -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}.slideOne input[type=checkbox] { visibility: hidden;}.slideOne input[type=checkbox]:checked + label { left: 37px;}/* end .slideOne *//* .slideTwo */.slideTwo { width: 80px; height: 30px; |
This file contains 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
/** | |
* Front End Day 93 - MacOS Dock with CSS! | |
*/ | |
html, body { padding: 0px; margin: 0px; background: #222; font-family: 'Ubuntu', sans-serif; color: #FFF; height: 100%;}body { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/bg_mountainroad.jpg"); background-size: cover; background-position: center;}.dockposition { position: absolute; height: 100px; width: 100%; bottom: 0px;}.dockposition .content { width: 680px; margin: auto; height: 100%; background: rgba(255, 255, 255, 0.5); border-radius: 4px 4px 0px 0px; position: relative;}.dockposition .content .back { position: absolute; height: 100%; width: 100%; left: 0px; overflow: hidden;}.dockposition .content .back:after { content: ''; background: rgba(255, 255, 255, 0.25); width: 100%; height: 100%; top: 0px; left: 0px; position: absolute; -webkit-filter: blur(10px); filter: blur(10px);}.dockposition .icons { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex;}.dockposition |
OlderNewer