Bowen Yin yinbowen
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; |
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
| /** | |
| * Translucent borders | |
| */ | |
| body { | |
| background: hsl(210, 5%, 59%); | |
| } | |
| div { | |
| margin: auto; | |
| line-height: 170px; | |
| text-align: center; |
yinbowen
/ dabblet.css
Last active
November 28, 2017 11:11
— forked from csssecrets/dabblet.css
Translucent 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
| /** | |
| * Translucent borders | |
| */ | |
| body { | |
| background: #d2c6a8; | |
| } | |
| div { | |
| margin: auto; | |
| line-height: 240px; | |
| text-align: center; |
yinbowen
/ dabblet.css
Created
November 28, 2017 01:24
— forked from csssecrets/dabblet.css
Control scroll with overscroll-behavior
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
| /** | |
| * Control scroll with overscroll-behavior | |
| */ | |
| main { | |
| transition: .6s; | |
| background: white; | |
| } | |
| main.de-emphasized { |
yinbowen
/ dabblet.css
Last active
November 30, 2017 01:22
— forked from csssecrets/dabblet.css
Sticky footer with flexible height
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
| /** | |
| * Sticky footer with flexible height | |
| */ | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } |
yinbowen
/ dabblet.css
Last active
October 22, 2018 12:28
— forked from csssecrets/dabblet.css
Vertical centering
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 | |
| */ | |
| .wrap { | |
| height: 200px; | |
| background: #f1a02f; | |
| margin: 20px auto; | |
| } | |
| .wrap div { |
yinbowen
/ dabblet.css
Last active
November 27, 2017 02:39
— 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; |
yinbowen
/ dabblet.css
Last active
November 26, 2017 16:00
— 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; |
yinbowen
/ dabblet.css
Last active
November 28, 2017 09:47
— forked from csssecrets/dabblet.css
background-size and background-attachment
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
| /** | |
| * background-size and background-attachment | |
| */ | |
| body: { | |
| position: relative; | |
| } | |
| main { | |
| background: url("http://csssecrets.io/images/tiger.jpg") 0; | |
| background-size: cover; /* 原图大小 1219*845 */ | |
| background-attachment:fixed; /*该属性会对background-size属性造成影响*/ |
yinbowen
/ dabblet.css
Last active
November 26, 2017 14:19
— 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; |
NewerOlder