Ruslan2230
/ dabblet.css
Created
June 3, 2018 10:09
— forked from csssecrets/dabblet.css
Marching ants border
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
| /** | |
| * Marching ants border | |
| */ | |
| @keyframes ants { to { background-position: 100% 100% } } | |
| div { | |
| padding: 1em; | |
| border: 1px solid transparent; | |
| background: linear-gradient(white, white) padding-box, |
Ruslan2230
/ dabblet.css
Created
June 3, 2018 10:06
— forked from csssecrets/dabblet.css
Vintage envelope themed border
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
| /** | |
| * Vintage envelope themed border | |
| */ | |
| div { | |
| padding: 1em; | |
| border: 1em solid transparent; | |
| background: linear-gradient(white, white) padding-box, | |
| repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, | |
| #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em; |
Ruslan2230
/ dabblet.css
Created
June 3, 2018 10:05
— forked from csssecrets/dabblet.css
Vintage envelope themed border via border-image
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
| /** | |
| * Vintage envelope themed border via border-image | |
| */ | |
| div { | |
| padding: 1em; | |
| border: 16px solid transparent; | |
| border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, | |
| #58a 0, #58a 3em, transparent 0, transparent 4em); | |
Ruslan2230
/ dabblet.css
Created
June 3, 2018 10:04
— forked from csssecrets/dabblet.css
Continuous image 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
| /** | |
| * Continuous image borders | |
| */ | |
| div { | |
| border: 1em solid transparent; | |
| background: linear-gradient(white, white) padding-box, | |
| url(http://csssecrets.io/images/stone-art.jpg) border-box 0 / cover; | |
| /* Styling & enable resize */ |
Ruslan2230
/ dabblet.css
Last active
June 3, 2018 19:11
— 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; |
Ruslan2230
/ dabblet.css
Last active
June 3, 2018 18:39
— 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 { |
Ruslan2230
/ dabblet.css
Last active
June 3, 2018 18:59
— 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%), |
Ruslan2230
/ dabblet.css
Last active
June 3, 2018 19:39
— 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 { |
Ruslan2230
/ dabblet.css
Last active
June 3, 2018 20:15
— 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; |
Ruslan2230
/ dabblet.css
Created
June 3, 2018 09:58
— forked from csssecrets/dabblet.css
Toggle buttons
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
| /** | |
| * Toggle buttons | |
| */ | |
| input[type="checkbox"] { | |
| position: absolute; | |
| clip: rect(0,0,0,0); | |
| } | |
| input[type="checkbox"] + label { |