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
/** | |
* Fancy Ampersands | |
*/ | |
@font-face { | |
font-family: Ampersand; | |
src: local('Baskerville-Italic'), local('GoudyOldStyleT-Italic'), local('Garamond-Italic'), local('Palatino-Italic'); | |
unicode-range: U+26; | |
} |
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
/** | |
* Ligatures | |
*/ | |
body { | |
font: 200%/1.6 "Adobe Caslon Pro", Baskerville, serif; | |
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures; | |
} |
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
/** | |
* Adjusting tabs | |
*/ | |
pre { | |
padding: .5em; | |
line-height: 1.5; | |
background: hsl(20, 50%, 95%); | |
font-family: Consolas, Monaco, monospace; | |
} |
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
/** | |
* 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); |
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
/** | |
* Inserting line breaks | |
*/ | |
dt, dd { | |
display: inline; | |
margin: 0; | |
} | |
dd { |
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
/** | |
* 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; |
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
/** | |
* 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 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; |
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
/** | |
* 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; |
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
/** | |
* 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); | |
} |