jordangray
/ dabblet.css
Created
March 20, 2014 14:56
SO #22531861: simple progress spinner (pure CSS version)
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
| /** | |
| * SO #22531861: simple progress spinner (pure CSS version) | |
| * http://stackoverflow.com/questions/22531861/create-circular-round-process-bar-with-gradient | |
| */ | |
| @keyframes rotate { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } |
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
| /* Tiling colours */ | |
| background: | |
| /* Pointing upwards */ | |
| linear-gradient( 60deg, hsla( 10, 90%, 75%,.6) 12.5%, transparent 0) 0px 0px, | |
| linear-gradient(-60deg, hsla( 10, 90%, 75%,.6) 12.5%, transparent 0) 0px 0px, | |
| linear-gradient( 60deg, hsla( 35, 90%, 75%,.6) 12.5%, transparent 0) 150px -86px, | |
| linear-gradient(-60deg, hsla( 35, 90%, 75%,.6) 12.5%, transparent 0) 150px -86px, | |
| linear-gradient( 60deg, hsla( 60, 90%, 75%,.6) 12.5%, transparent 0) 100px 0px, | |
| linear-gradient(-60deg, hsla( 60, 90%, 75%,.6) 12.5%, transparent 0) 100px 0px, |
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
| background: #36c; | |
| background: | |
| linear-gradient(120deg, transparent 80%, rgba(255,255,0,.8) 80%) 0 0, | |
| linear-gradient(240deg, transparent 85%, rgba(255,255,0,.8) 85%) 0 0, | |
| linear-gradient(60deg, transparent 85%, rgba(0,255,255,.8) 85%) 0 0, | |
| linear-gradient(300deg, transparent 85%, rgba(0,255,255,.8) 85%) 0 0, | |
| linear-gradient(60deg, transparent 85%, rgba(0,0,255,.8) 85%) 108px 0, | |
| linear-gradient(300deg, transparent 85%, rgba(0,0,255,.8) 85%) 108px 0, | |
| linear-gradient(60deg, transparent 85%, rgba(0,255,0,.8) 85%) 54px -94px, | |
| linear-gradient(300deg, transparent 85%, rgba(0,255,0,.8) 75%) 54px -94px, |
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
| .swd-button { | |
| background: #11c3ff linear-gradient(to bottom, transparent, #009bcf); | |
| border: 1px solid white; | |
| border-radius: 5px; | |
| color: white; | |
| display: inline-block; | |
| font: bold 12px Arial, Helvetica, sans-serif; | |
| padding: 10px 15px; | |
| text-decoration: none; | |
| text-transform: uppercase; |
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
| /* Mock up using custom elements */ | |
| body { | |
| margin: 0; | |
| } | |
| cat-timeline, | |
| cat-grid, | |
| cat-gridline, | |
| cat-animations, |
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
| /* Testing out a theory */ | |
| /* Grabbed from http://css-tricks.com/myth-busting-css-animations-vs-javascript/?ref=heydesigner */ | |
| @keyframes spin { | |
| 0% { | |
| color: red; | |
| transform-origin:50% 50% 0; | |
| transform: rotate(0deg) rotateX(0deg) rotateY(0deg); | |
| } | |
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
| /* UK Transport mockup */ | |
| /* Basic typography and spacing */ | |
| h1 { | |
| font-weight: normal; | |
| font-size: 34px; | |
| } |
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
| /* Twitter hackweek */ | |
| body { | |
| background-color: lightblue; | |
| background-position: | |
| 50px 50px, | |
| 0 0; | |
| font: 17px/1.4 "Helvetica Neue", Arial, sans-serif; | |
| } |
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
| /* Thither mockup */ | |
| /* Basic typography and spacing */ | |
| h1 { | |
| font-weight: normal; | |
| font-size: 34px; | |
| } |
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
| /** | |
| * Messing about with keyframe animation | |
| */ | |
| @keyframes logo { | |
| from { | |
| height: auto; | |
| width: auto; | |
| position: fixed; | |
| top: 0; |