mykelsoft
/ dabblet.css
Created
October 23, 2018 02:54
— forked from csssecrets/dabblet.css
Custom checkboxes
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
| /** | |
| * Custom checkboxes | |
| */ | |
| input[type="checkbox"] { | |
| position: absolute; | |
| clip: rect(0,0,0,0); | |
| } | |
| input[type="checkbox"] + label::before { |
mykelsoft
/ dabblet.css
Created
October 23, 2018 02:43
— forked from csssecrets/dabblet.css
Indicating disabled state
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
| /** | |
| * Indicating disabled state | |
| */ | |
| :disabled, [disabled], [aria-disabled="true"] { | |
| cursor: not-allowed; | |
| } |
mykelsoft
/ dabblet.css
Created
October 23, 2018 02:43
— forked from csssecrets/dabblet.css
Extending the hit area — with borders
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
| /** | |
| * Extending the hit area — with borders | |
| */ | |
| button { | |
| padding: .3em .5em; | |
| border: 10px solid transparent; | |
| border-radius: 50%; | |
| background: #58a; | |
| background-clip: padding-box; |
mykelsoft
/ dabblet.css
Created
October 23, 2018 02:42
— forked from csssecrets/dabblet.css
Extending the hit area — with generated content
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
| /** | |
| * Extending the hit area — with generated content | |
| */ | |
| button { | |
| position: relative; | |
| padding: .3em .5em; | |
| background: #58a; | |
| border-radius: 50%; | |
| border: 1px solid rgba(0,0,0,.3); |
mykelsoft
/ dabblet.css
Created
October 23, 2018 02:19
— forked from csssecrets/dabblet.css
Text on a 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
| /** | |
| * Text on a circle | |
| */ | |
| body { | |
| font: bold 120% Helvetica, sans-serif; | |
| } | |
| .circular { | |
| width: 30em; |
mykelsoft
/ dabblet.css
Created
October 23, 2018 02:02
— forked from csssecrets/dabblet.css
Extruded text
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
| /** | |
| * Extruded text | |
| */ | |
| body { | |
| background: #58a; | |
| color: white; | |
| text-shadow: 0 1px hsl(0,0%,85%), | |
| 0 2px hsl(0,0%,80%), | |
| 0 3px hsl(0,0%,75%), |
mykelsoft
/ dabblet.css
Created
October 23, 2018 01:58
— forked from csssecrets/dabblet.css
Glowing text
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
| /** | |
| * Glowing text | |
| */ | |
| body { | |
| background: #203; | |
| font: bold 500%/1 Rockwell, serif; | |
| } | |
| a { |
mykelsoft
/ dabblet.css
Created
October 23, 2018 01:56
— forked from csssecrets/dabblet.css
Stroked text
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
| /** | |
| * Stroked text | |
| */ | |
| h1 { | |
| margin: 0; | |
| color: white; | |
| } | |
| h1:first-child { text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black; } |
mykelsoft
/ dabblet.css
Created
October 23, 2018 01:50
— forked from csssecrets/dabblet.css
Letterpress
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
| /** | |
| * Letterpress | |
| */ | |
| body { | |
| font: 250%/1.6 Baskerville, Palatino, serif; | |
| } | |
| p { | |
| padding: .8em 1em; |
mykelsoft
/ dabblet.css
Created
October 21, 2018 10:50
— forked from csssecrets/dabblet.css
Wavy underlines
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
| /** | |
| * Wavy underlines | |
| */ | |
| body { | |
| font: 250%/1.6 Baskerville, Palatino, serif; | |
| } | |
| a { | |
| background: linear-gradient(-45deg, transparent 40%, red 0, red 60%, transparent 0) 0 1em, |