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
/** | |
* Welcome to codespector! | |
*/ | |
body{ | |
background: #31b0d5; | |
background: linear-gradient(90deg, #555, #333); min-height: 100%; | |
} | |
.codespector{ | |
color: #ffffff; |
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
/** | |
* Triangle Machinery | |
*/ | |
ShowIfPicked,ShowIfFeatured,ShowIfThumbnail,.show-if-picked,.show-if-featured,.show-if-thumbnail { display: none;}body.pen-is-picked ShowIfPicked,body.pen-is-picked .show-if-picked { display: block;}body.pen-is-featured ShowIfFeatured,body.pen-is-featured .show-if-featured { display: block;}body.pen-is-thumbnail ShowIfThumbnail,body.pen-is-thumbnail .show-if-thumbnail { display: block;}:root { --left: 0; --top: 0;}* { box-sizing: border-box;}html, body { height: 100%;}.message { position: absolute; bottom: 20px; left: 20px; color: #ddd; font-size: 28px; font-family: georgia;}Scene { height: 100%; 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; background: #111; -webkit-perspective: 500px; perspective: 500px;}Shape { width: 45vmin; height: 45vmin; position: relativ |
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- |
OlderNewer