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
| /** | |
| * Ligatures | |
| */ | |
| body { | |
| font: 200%/1.6 "Adobe Caslon Pro", Baskerville, serif; | |
| font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures; | |
| } |
Ruslan2230
/ dabblet.css
Created
June 3, 2018 18:16
— forked from csssecrets/dabblet.css
Adjusting tabs
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
| /** | |
| * Adjusting tabs | |
| */ | |
| pre { | |
| padding: .5em; | |
| line-height: 1.5; | |
| background: hsl(20, 50%, 95%); | |
| font-family: Consolas, Monaco, monospace; | |
| } |
Ruslan2230
/ dabblet.css
Created
June 3, 2018 18:13
— forked from csssecrets/dabblet.css
Zebra striped text lines
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
| /** | |
| * Zebra striped text lines | |
| */ | |
| pre { | |
| padding: .5em; | |
| line-height: 1.5; | |
| background: hsl(20, 50%, 95%); | |
| background-image: linear-gradient( | |
| rgba(120,0,0,.1) 50%, transparent 0); |
Ruslan2230
/ dabblet.css
Created
June 3, 2018 18:09
— forked from csssecrets/dabblet.css
Inserting line breaks
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
| /** | |
| * Inserting line breaks | |
| */ | |
| dt, dd { | |
| display: inline; | |
| margin: 0; | |
| } | |
| dd { |
Ruslan2230
/ dabblet.css
Created
June 3, 2018 18:04
— forked from csssecrets/dabblet.css
Hyphenation
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
| /** | |
| * Hyphenation | |
| */ | |
| width: 8.7em; | |
| font: 180%/1.4 Baskerville, serif; | |
| text-align: justify; | |
| hyphens: auto; |
Ruslan2230
/ dabblet.css
Created
June 3, 2018 17:34
— forked from csssecrets/dabblet.css
Folded corner 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
| /** | |
| * Folded corner effect | |
| */ | |
| div { | |
| width: 12em; | |
| background: #58a; /* Fallback */ | |
| background: | |
| linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) 100% 0 no-repeat, | |
| linear-gradient(-135deg, transparent 1.5em, #58a 0); |
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
Created
June 3, 2018 14:54
— forked from csssecrets/dabblet.css
Color tinting — with blending modes
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
| /** | |
| * Color tinting — with blending modes | |
| */ | |
| .tinted-image { | |
| width: 640px; height: 440px; | |
| background-size: cover; | |
| background-color: hsl(335, 100%, 50%); | |
| background-blend-mode: luminosity; | |
| transition: .5s background-color; |
Ruslan2230
/ dabblet.css
Created
June 3, 2018 14:53
— forked from csssecrets/dabblet.css
Color tinting — with filters
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
| /** | |
| * Color tinting — with filters | |
| */ | |
| img { | |
| max-width: 640px; | |
| transition: 1s filter, 1s -webkit-filter; | |
| -webkit-filter: sepia() saturate(4) hue-rotate(295deg); | |
| filter: sepia() saturate(4) hue-rotate(295deg); | |
| } |
Ruslan2230
/ dabblet.css
Created
June 3, 2018 14:48
— forked from csssecrets/dabblet.css
Irregular drop-shadows
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
| /** | |
| * Irregular drop-shadows | |
| */ | |
| div { | |
| position: relative; | |
| display: inline-flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| vertical-align: bottom; |