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
| /** | |
| * Glowing rod (structural element) | |
| **/ | |
| body { | |
| background: #047; | |
| } | |
| #origin { | |
| transform-style: preserve-3d; |
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
| div { | |
| background: red; | |
| height: 100px; | |
| width: 100px; | |
| transform: translateX(30px) translateY(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
| /* | |
| * Message box with glassy border | |
| * http://stackoverflow.com/questions/10576099/glass-opaque-transparent-border-around-boxes/1057632 | |
| */ | |
| .box { | |
| background: #f0edcc; | |
| background-clip: padding-box; | |
| border: 4px solid rgba(255,255,255,.2); | |
| border-radius: 3px; |
jordangray
/ dabblet.css
Created
May 31, 2012 22:50
Figure out relationship here! parent lh vs span lh
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
| body { | |
| line-height: 1.5em; | |
| } | |
| /* Figure out relationship here! parent lh vs span lh */ | |
| span.justify { | |
| text-align: justify; | |
| display: inline-block; | |
| text-align-last: justify; |
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
| input { | |
| border: none; | |
| @include border-radius(3px); | |
| box-shadow: inset 0 0 6px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.4); | |
| display: inline-block; | |
| height: 2em; | |
| position: relative; | |
| text-align: left; | |
| top: 0; |
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 { | |
| background: rgba(0,0,0,.4) linear-gradient(top, rgba(255,255,255,.6) 0%, rgba(255,255,255,.2) 50%, rgba(0,0,0,.5) 50%); | |
| border: 1px solid rgba(0,0,0,.7); | |
| border-radius: 5px; | |
| box-shadow: 0 0 5px rgba(255,255,255,.6); | |
| color: #fff; | |
| font: 15px/1.7em Segoe UI, Arial, Helvetica, sans-serif; | |
| padding: 5px 10px; | |
| margin-top: 100px; | |
| } |
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
| /* | |
| * Animation timeline mockup | |
| */ | |
| #timeline { | |
| background: #f9f9f9; | |
| font: normal 14px/18px Consolas, Courier New, Courier, monospace; | |
| height: 200px; |
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
| /* Legacy prefix handling */ | |
| @-webkit-keyframes colors { | |
| 0% {background-color: #f00;} | |
| 33% {background-color: #0f0;} | |
| 66% {background-color: #00f;} | |
| 100% {background-color: #f00;} | |
| } | |
| #test { |
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
| /* Flickery light */ | |
| @keyframes light { | |
| 0% { | |
| background: hsla(57, 60%, 80%, 1); | |
| box-shadow: 0 0 4px hsla(57, 60%, 99%, 1); | |
| } | |
| 50% { | |
| background: hsla(57, 60%, 99%, 1); |
jordangray
/ dabblet.css
Created
September 28, 2012 08:25
Rendering text at less than minimum browser font size
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
| /* Rendering text at less than minimum browser font size */ | |
| body { | |
| background: #ccc; | |
| } | |
| .preview { | |
| background: #fff; | |
| border: 1px solid #ccc; | |
| box-shadow: 5px 5px 5px rgba(0,0,0,.5); |