Ruslan2230
/ dabblet.css
Last active
June 3, 2018 18:30
— forked from csssecrets/dabblet.css
Custom 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
| /** | |
| * Custom underlines | |
| */ | |
| body { | |
| font: 250%/1.6 Baskerville, Palatino, serif; | |
| } | |
| a { | |
| background: linear-gradient(gray, gray) no-repeat; |
Ruslan2230
/ dabblet.css
Last active
June 3, 2018 18:33
— 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, |
Ruslan2230
/ dabblet.css
Last active
June 3, 2018 19:09
— 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; } |
Ruslan2230
/ dabblet.css
Last active
June 3, 2018 17:43
— forked from csssecrets/dabblet.css
Folded corner effect — at an angle
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
| /** | |
| * Folded corner effect — at an angle | |
| */ | |
| div { | |
| position: relative; | |
| width: 12em; | |
| background: #58a; /* Fallback */ | |
| background: linear-gradient(-150deg, transparent 1.5em, #58a 0); | |
| padding: 2em; |
Ruslan2230
/ dabblet.css
Last active
June 3, 2018 15:32
— forked from csssecrets/dabblet.css
Frosted glass effect
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
| /** | |
| * Frosted glass effect | |
| */ | |
| body { | |
| min-height: 100vh; | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding-top: calc(50vh - 6em); | |
| font: 150%/1.6 Baskerville, Palatino, serif; |
Ruslan2230
/ dabblet.css
Last active
June 3, 2018 19:05
— 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; |
Ruslan2230
/ dabblet.css
Created
June 3, 2018 09:52
— forked from csssecrets/dabblet.css
Native modal dialog (limited support)
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
| /** | |
| * Native modal dialog (limited support) | |
| */ | |
| dialog::backdrop { | |
| background: rgba(0,0,0,.8) | |
| } |
Ruslan2230
/ dabblet.css
Created
June 3, 2018 09:50
— forked from csssecrets/dabblet.css
Elastic color
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
| /** | |
| * Elastic color | |
| */ | |
| html { | |
| background: rgb(100%, 0%, 40%); | |
| transition: 1s cubic-bezier(.25,.1,.2,3); | |
| } |
Ruslan2230
/ dabblet.css
Created
June 3, 2018 09:50
— forked from csssecrets/dabblet.css
De-emphasizing by blurring (AND dimming)
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
| /** | |
| * De-emphasizing by blurring (AND dimming) | |
| */ | |
| main { | |
| transition: .6s; | |
| background: white; | |
| } | |
| main.de-emphasized { |
Ruslan2230
/ dabblet.css
Created
June 3, 2018 09:49
— forked from csssecrets/dabblet.css
box-shadow removes slider track in Chrome
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
| /** | |
| * box-shadow removes slider track in Chrome | |
| */ | |
| input { | |
| box-shadow: 0 0 5px red; | |
| } |