DavidJian JamesDun
JamesDun
/ dabblet.css
Last active
October 9, 2019 17:09
— 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; |
JamesDun
/ dabblet.css
Created
October 9, 2019 17:23
— 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; |
JamesDun
/ dabblet.css
Created
October 9, 2019 17:42
— 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 { |
JamesDun
/ dabblet.css
Created
October 9, 2019 17:55
— 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; |
JamesDun
/ dabblet.css
Last active
October 17, 2019 08:10
— forked from csssecrets/dabblet.css
Taming table column widths
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
| /** | |
| * Taming table column widths | |
| */ | |
| body { background: #ddd } | |
| section { | |
| width: 500px; | |
| margin: 2em; | |
| background: white; |
JamesDun
/ dabblet.css
Created
October 17, 2019 09:02
— forked from csssecrets/dabblet.css
Vertical centering - Viewport unit method
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
| /** | |
| * Vertical centering - Viewport unit method | |
| */ | |
| main { | |
| width: 18em; | |
| padding: 1em 1.5em; | |
| margin: 50vh auto 0; | |
| transform: translateY(-50%); | |
| box-sizing: border-box; |
JamesDun
/ dabblet.css
Last active
October 17, 2019 09:15
— forked from csssecrets/dabblet.css
Bouncing animation
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
| /** | |
| * Bouncing animation | |
| */ | |
| @keyframes bounce { | |
| 60%, 80%, to { | |
| transform: translateY(400px); | |
| animation-timing-function: ease; | |
| } | |
| 70% { transform: translateY(300px); } |