Created
April 16, 2013 18:50
-
-
Save hucklesby/5398505 to your computer and use it in GitHub Desktop.
A serrated circle
This file contains hidden or 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
| /** | |
| * A serrated circle | |
| */ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 100%; | |
| overflow-y: scroll; | |
| } | |
| body { | |
| width: 80%; | |
| margin: 0 auto; | |
| font: normal 1em/1.4 sans-serif; | |
| color: black; | |
| background-color: #ccc; | |
| } | |
| .circle { | |
| position: relative; | |
| width: 9em; | |
| height: 9em; | |
| margin: 3em; | |
| text-align: center; | |
| -webkit-filter: drop-shadow(0 0 6px gray); | |
| transform: rotate(45deg); | |
| transition: transform 1s; | |
| } | |
| .circle > p { | |
| margin: 0; | |
| line-height: 9; | |
| transform: rotate(-45deg); | |
| } | |
| .circle, | |
| .circle:before, | |
| .circle:after, | |
| .circle > p, | |
| .circle > p:before, | |
| .circle > p:after { | |
| background-color: gold; | |
| } | |
| .circle:before, | |
| .circle:after, | |
| .circle > p:before, | |
| .circle > p:after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| z-index: -1; | |
| } | |
| .circle:before, | |
| .circle > p:before { | |
| transform: rotate(15deg); | |
| } | |
| .circle:after, | |
| .circle > p:after { | |
| transform: rotate(30deg); | |
| } | |
| /* Rotate the circle another 360˚ on :hover */ | |
| .circle:hover { | |
| transform: rotate(405deg); | |
| } |
This file contains hidden or 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
| <!-- content to be placed inside <body>…</body> --> | |
| <h1>A serrated circle</h1> | |
| <div class="circle circle--1"> | |
| <p>Hover me!</p> | |
| </div> |
This file contains hidden or 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
| // alert('Hello world!'); |
This file contains hidden or 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
| {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment