├── .nojekyll ├── _navbar.md ├── .gitignore ├── static ├── Evan.jpeg ├── YNTKC.png ├── defcc.png ├── logo.png ├── Drasner.jpeg ├── Dulisz.jpeg ├── Yerburgh.png ├── citybg.png ├── colors.jpeg ├── coupon.jpeg ├── dog2018.jpg ├── favicon.ico ├── football.jpg ├── loader.png ├── progress.jpg ├── vue-logo.png ├── YNTKC-logo.png ├── city-night.jpg ├── starry-sky.jpg ├── colors_guide.jpeg ├── coupon_cash.jpeg ├── cubic-bezier.jpeg ├── mini-code-jsk.png ├── mini-code-sgz.png ├── orderoptions.jpeg ├── reward-code.png ├── full-fire-cloud.jpg ├── player_logo@2x.png ├── sticky-footer.jpeg ├── animation-direction.jpeg ├── south-china-sea2006.jpg ├── south-china-sea2015.jpg ├── interesting-layout-1.jpeg ├── 5a124b29f265da431d3c472e.png ├── 5afc2e5f6fb9a07a9b362527.png ├── 5ba42844f265da0a8a6aa5e9.png ├── 5bc844166fb9a05cd676ebca.png └── 5bdc715fe51d454e755f75ef.png ├── .github ├── CONTRIBUTING.md └── FUNDING.yml ├── zh-cn ├── input-align.md ├── smooth.md ├── text-truncate.md ├── translucent-borders.md ├── typing.md ├── circular-text.md ├── inner-rounding.md ├── hotspot-like.md ├── zebra-stripes.md ├── line-breaks.md ├── fluid-fixed.md ├── ellipse.md ├── holy-grail-layout.md ├── multiple-borders.md ├── extended-bg-position.md ├── _sidebar.md ├── frosted-glass.md ├── introduce.md ├── blink.md ├── scrollbar.md ├── single-projection.md ├── custom-switch.md ├── bounce.md ├── double-wing-layout.md ├── interesting-usage.md ├── irregular-projection.md ├── parallelogram.md ├── custom-variables.md ├── extend-hit-area.md ├── blurry-weaken-background.md ├── stripes-background.md ├── custom-checkbox.md ├── custom-radio.md ├── bevel-corners.md ├── image-slider.md ├── circular-smooth.md └── polygon.md ├── input-align.md ├── libs ├── ga.js ├── prism-scss.min.js ├── prism-markdown.min.js └── index.js ├── smooth.md ├── typing.md ├── circular-text.md ├── translucent-borders.md ├── hotspot-like.md ├── zebra-stripes.md ├── inner-rounding.md ├── holy-grail-layout.md ├── fluid-fixed.md ├── extended-bg-position.md ├── line-breaks.md ├── ellipse.md ├── frosted-glass.md ├── _sidebar.md ├── scrollbar.md ├── multiple-borders.md ├── blink.md ├── single-projection.md ├── LICENSE ├── custom-switch.md ├── bounce.md ├── irregular-projection.md ├── interesting-usage.md ├── sw.js ├── introduce.md ├── index.html ├── parallelogram.md ├── extend-hit-area.md ├── blurry-weaken-background.md ├── custom-checkbox.md ├── custom-variables.md ├── custom-radio.md ├── double-wing-layout.md ├── image-slider.md ├── circular-smooth.md ├── bevel-corners.md ├── stripes-background.md └── polygon.md /.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_navbar.md: -------------------------------------------------------------------------------- 1 | - Translations 2 | - [:uk: English](/) 3 | - [:cn: 中文](/zh-cn/) 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | 7 | -------------------------------------------------------------------------------- /static/Evan.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/Evan.jpeg -------------------------------------------------------------------------------- /static/YNTKC.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/YNTKC.png -------------------------------------------------------------------------------- /static/defcc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/defcc.png -------------------------------------------------------------------------------- /static/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/logo.png -------------------------------------------------------------------------------- /static/Drasner.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/Drasner.jpeg -------------------------------------------------------------------------------- /static/Dulisz.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/Dulisz.jpeg -------------------------------------------------------------------------------- /static/Yerburgh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/Yerburgh.png -------------------------------------------------------------------------------- /static/citybg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/citybg.png -------------------------------------------------------------------------------- /static/colors.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/colors.jpeg -------------------------------------------------------------------------------- /static/coupon.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/coupon.jpeg -------------------------------------------------------------------------------- /static/dog2018.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/dog2018.jpg -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/favicon.ico -------------------------------------------------------------------------------- /static/football.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/football.jpg -------------------------------------------------------------------------------- /static/loader.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/loader.png -------------------------------------------------------------------------------- /static/progress.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/progress.jpg -------------------------------------------------------------------------------- /static/vue-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/vue-logo.png -------------------------------------------------------------------------------- /static/YNTKC-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/YNTKC-logo.png -------------------------------------------------------------------------------- /static/city-night.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/city-night.jpg -------------------------------------------------------------------------------- /static/starry-sky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/starry-sky.jpg -------------------------------------------------------------------------------- /static/colors_guide.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/colors_guide.jpeg -------------------------------------------------------------------------------- /static/coupon_cash.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/coupon_cash.jpeg -------------------------------------------------------------------------------- /static/cubic-bezier.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/cubic-bezier.jpeg -------------------------------------------------------------------------------- /static/mini-code-jsk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/mini-code-jsk.png -------------------------------------------------------------------------------- /static/mini-code-sgz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/mini-code-sgz.png -------------------------------------------------------------------------------- /static/orderoptions.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/orderoptions.jpeg -------------------------------------------------------------------------------- /static/reward-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/reward-code.png -------------------------------------------------------------------------------- /static/full-fire-cloud.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/full-fire-cloud.jpg -------------------------------------------------------------------------------- /static/player_logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/player_logo@2x.png -------------------------------------------------------------------------------- /static/sticky-footer.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/sticky-footer.jpeg -------------------------------------------------------------------------------- /static/animation-direction.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/animation-direction.jpeg -------------------------------------------------------------------------------- /static/south-china-sea2006.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/south-china-sea2006.jpg -------------------------------------------------------------------------------- /static/south-china-sea2015.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/south-china-sea2015.jpg -------------------------------------------------------------------------------- /static/interesting-layout-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/interesting-layout-1.jpeg -------------------------------------------------------------------------------- /static/5a124b29f265da431d3c472e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/5a124b29f265da431d3c472e.png -------------------------------------------------------------------------------- /static/5afc2e5f6fb9a07a9b362527.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/5afc2e5f6fb9a07a9b362527.png -------------------------------------------------------------------------------- /static/5ba42844f265da0a8a6aa5e9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/5ba42844f265da0a8a6aa5e9.png -------------------------------------------------------------------------------- /static/5bc844166fb9a05cd676ebca.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/5bc844166fb9a05cd676ebca.png -------------------------------------------------------------------------------- /static/5bdc715fe51d454e755f75ef.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/HEAD/static/5bdc715fe51d454e755f75ef.png -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | ### CSS Trick name 3 | 4 | ?> 背景知识: [XXX](https://developer.mozilla.org/zh-CN/docs/Web/CSS/XXX), [XXX](https://developer.mozilla.org/zh-CN/docs/Web/CSS/XXX) 5 | 6 | 简单描述…… 7 | 8 | ```html 9 | 10 | 11 | 21 | 22 | ``` 23 | 24 | ### 浏览器支持 25 | 26 | ```html 27 | 28 | ``` 29 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: https://raw.githubusercontent.com/l-hammer/You-need-to-know-css/master/static/reward-code.png 13 | -------------------------------------------------------------------------------- /zh-cn/input-align.md: -------------------------------------------------------------------------------- 1 | 2 | # 输入框完美居中 3 | 4 | 5 | 6 | 41 | 42 | -------------------------------------------------------------------------------- /input-align.md: -------------------------------------------------------------------------------- 1 | 2 | # Input align 3 | 4 | 5 | 6 | 41 | 42 | -------------------------------------------------------------------------------- /libs/ga.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | // From https://github.com/egoist/vue-ga/blob/master/src/index.js 3 | function appendScript() { 4 | var script = document.createElement('script'); 5 | script.async = true; 6 | script.src = 'https://www.google-analytics.com/analytics.js'; 7 | document.body.appendChild(script); 8 | } 9 | 10 | function init(id) { 11 | appendScript(); 12 | window.ga = 13 | window.ga || 14 | function () { 15 | (window.ga.q = window.ga.q || []).push(arguments); 16 | }; 17 | window.ga.l = Number(new Date()); 18 | window.ga('create', id, 'auto'); 19 | } 20 | 21 | function collect() { 22 | if (!window.ga) { 23 | init($docsify.ga); 24 | } 25 | 26 | window.ga('set', 'page', location.hash); 27 | window.ga('send', 'pageview'); 28 | } 29 | 30 | var install = function (hook) { 31 | if (!$docsify.ga) { 32 | console.error('[Docsify] ga is required.'); 33 | return 34 | } 35 | 36 | hook.beforeEach(collect); 37 | }; 38 | 39 | $docsify.plugins = [].concat(install, $docsify.plugins); 40 | 41 | }()); -------------------------------------------------------------------------------- /zh-cn/smooth.md: -------------------------------------------------------------------------------- 1 | 2 | # 无缝平滑效果 3 | 4 | ?> 背景知识：:point_right: [animation](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation) 5 | 6 | 7 | 8 | 31 | 32 | 33 | !> 上图为两张左右对称的图片拼接而成，效果不是很完美，在开发中，只需使用一张左右可以无缝对接（类似360°全景图）的图片即可更完美。 34 | 35 | ### 浏览器支持 36 | 37 | 43 | -------------------------------------------------------------------------------- /zh-cn/text-truncate.md: -------------------------------------------------------------------------------- 1 | 2 | # 文本截断 3 | 4 | 5 | 6 | 40 | -------------------------------------------------------------------------------- /libs/prism-scss.min.js: -------------------------------------------------------------------------------- 1 | Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-]+(?:\([^()]+\)|[^(])*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)*url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()]|&|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}]+[:{][^}]+))/m,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:if|else(?: if)?|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)/i,{pattern:/( +)(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.scss.property={pattern:/(?:[\w-]|\$[-\w]+|#\{\$[-\w]+\})+(?=\s*:)/i,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}},Prism.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),Prism.languages.insertBefore("scss","function",{placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},"boolean":/\b(?:true|false)\b/,"null":/\bnull\b/,operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|or|not)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.languages.scss; -------------------------------------------------------------------------------- /smooth.md: -------------------------------------------------------------------------------- 1 | 2 | # Smooth 3 | 4 | ?> Background：:point_right: [animation](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation) 5 | 6 | 7 | 8 | 31 | 32 | 33 | !> The picture above is a combination of two symmetrical images. it is not so perfect. In development, it is more perfect to use only one picture that can be seamlessly docked (similar to 360° panorama). 34 | 35 | ### Browser Support 36 | 37 | 43 | -------------------------------------------------------------------------------- /zh-cn/translucent-borders.md: -------------------------------------------------------------------------------- 1 | # 半透明边框 2 | 3 | ?> 背景知识：:point_right: [background-clip](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip) 4 | 5 | 默认情况下，背景的颜色会延伸至边框下层，这意味着我们设置的透明边框效果会被覆盖掉，在css3中，我们可以通过设置`background-clip:padding-box`来改变背景的默认行为，达到我们想要的效果。 6 | 7 | 8 | 9 | 38 | 39 | 40 | ### 浏览器支持 41 | 42 | 48 | -------------------------------------------------------------------------------- /zh-cn/typing.md: -------------------------------------------------------------------------------- 1 | 2 | # 打字效果 3 | 4 | ?> 背景知识：:point_right: [animation](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation), [animation-timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-timing-function) 5 | 6 | 7 | 8 | 42 | 43 | 44 | !> 此方法仅限**单行等宽**字体~ 45 | 46 | ### 浏览器支持 47 | 48 | 54 | -------------------------------------------------------------------------------- /zh-cn/circular-text.md: -------------------------------------------------------------------------------- 1 | 2 | # 环形文字 3 | 4 | ?> 背景知识：:point_right: [SVG](https://developer.mozilla.org/zh-CN/docs/Web/SVG), [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition) 5 | 6 | 7 | 8 | 48 | 49 | 50 | ### 浏览器支持 51 | 52 | 58 | -------------------------------------------------------------------------------- /typing.md: -------------------------------------------------------------------------------- 1 | 2 | # Typing 3 | 4 | ?> Background：:point_right: [animation](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation), [animation-timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-timing-function) 5 | 6 | 7 | 8 | 42 | 43 | 44 | !> This method is only for **single line & equal width** 45 | 46 | ### Browser Support 47 | 48 | 54 | -------------------------------------------------------------------------------- /circular-text.md: -------------------------------------------------------------------------------- 1 | 2 | # Circular text 3 | 4 | ?> Background：:point_right: [SVG](https://developer.mozilla.org/zh-CN/docs/Web/SVG), [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition) 5 | 6 | 7 | 8 | 48 | 49 | 50 | ### Browser Support 51 | 52 | 58 | -------------------------------------------------------------------------------- /zh-cn/inner-rounding.md: -------------------------------------------------------------------------------- 1 | 2 | # 边框内圆角 3 | 4 | ?> 背景知识：:point_right: [box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow), [outline](https://developer.mozilla.org/zh-CN/docs/Web/CSS/outline) 5 | 6 | 我们知道`box-shadow`是会紧贴`border-radius`圆角边的，但是，描边`outline`并不会与圆角边`border-radius`贴合，我们可以将两者组合，通过`box-shadow`去填补描边`outline`所产生的间隙来达到我们想要的效果。 7 | 8 | !>关于扩张半径的取值？假设圆角`border-radius`的半径为`r`,根据勾股定理，扩张半径的最小值应等于`(√2−1)r ~= 3.314`，最大值不能超过描边宽度，即`6px`。 9 | 10 | 11 | 12 | 42 | 43 | 44 | ### 浏览器支持 45 | 46 | 52 | -------------------------------------------------------------------------------- /translucent-borders.md: -------------------------------------------------------------------------------- 1 | # Translucent borders 2 | 3 | ?> Background：:point_right: [background-clip](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip) 4 | 5 | By default, the color of the background will reach the lower layer of the border, which indicates the translucent border effect set previously will be covered. CSS3 allows us to change the default behavior of the background by setting the `background-clip:padding-box` to accomplish what we require. 6 | 7 | 8 | 9 | 38 | 39 | 40 | ### Browser Support 41 | 42 | 48 | -------------------------------------------------------------------------------- /zh-cn/hotspot-like.md: -------------------------------------------------------------------------------- 1 | 2 | # 其他多边形 3 | 4 | ?> 背景知识：:point_right: [box-sizing](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform) 5 | 6 | > *{ box-sizing: border-box; } 7 | 8 | 9 | 10 | 40 | 41 | 42 | ### 浏览器支持 43 | 44 | 50 | 51 | 57 | -------------------------------------------------------------------------------- /hotspot-like.md: -------------------------------------------------------------------------------- 1 | 2 | # Other polygons 3 | 4 | ?> Background：:point_right: [box-sizing](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform) 5 | 6 | > *{ box-sizing: border-box; } 7 | 8 | 9 | 10 | 40 | 41 | 42 | ### Browser Support 43 | 44 | 50 | 51 | 57 | -------------------------------------------------------------------------------- /libs/prism-markdown.min.js: -------------------------------------------------------------------------------- 1 | Prism.languages.markdown=Prism.languages.extend("markup",{}),Prism.languages.insertBefore("markdown","prolog",{blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},code:[{pattern:/^(?: {4}|\t).+/m,alias:"keyword"},{pattern:/``.+?``|`[^`\n]+`/,alias:"keyword"}],title:[{pattern:/\w+.*(?:\r?\n|\r)(?:==+|--+)/,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#+.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:/(^|[^\\])(\*\*|__)(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^\*\*|^__|\*\*$|__$/}},italic:{pattern:/(^|[^\\])([*_])(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^[*_]|[*_]$/}},url:{pattern:/!?\[[^\]]+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)| ?\[[^\]\n]*\])/,inside:{variable:{pattern:/(!?\[)[^\]]+(?=\]$)/,lookbehind:!0},string:{pattern:/"(?:\\.|[^"\\])*"(?=\)$)/}}}}),Prism.languages.markdown.bold.inside.url=Prism.languages.markdown.url,Prism.languages.markdown.italic.inside.url=Prism.languages.markdown.url,Prism.languages.markdown.bold.inside.italic=Prism.languages.markdown.italic,Prism.languages.markdown.italic.inside.bold=Prism.languages.markdown.bold; -------------------------------------------------------------------------------- /zh-cn/zebra-stripes.md: -------------------------------------------------------------------------------- 1 | 2 | # 文本行斑马条纹 3 | 4 | ?> 背景知识：:point_right: [linear-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient) 5 | 6 | 7 | 8 | 49 | 50 | 51 | ### 浏览器支持 52 | 53 | 59 | -------------------------------------------------------------------------------- /zebra-stripes.md: -------------------------------------------------------------------------------- 1 | 2 | # Zebra-striped effect 3 | 4 | ?> Background：:point_right: [linear-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient) 5 | 6 | 7 | 8 | 49 | 50 | 51 | ### Browser Support 52 | 53 | 59 | -------------------------------------------------------------------------------- /zh-cn/line-breaks.md: -------------------------------------------------------------------------------- 1 | 2 | # 插入换行 3 | 4 | ?> 背景知识：:point_right: [Unicode](https://en.wikipedia.org/wiki/Unicode), [white-space](https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space) 5 | 6 | 在[Unicode](http://www.ssec.wisc.edu/~tomw/java/unicode.html)中，`0x000A`字符是专门控制换行的。在`CSS`中，我们可以写为`\000A`或`\A`,我们可以用它来作为`::after`伪元素的内容，并将其添加到指定元素的尾部，实现换行效果。 7 | 8 | 9 | 10 | 47 | 48 | 49 | !> 上述代码中，通过伪元素在多个`span.bold`元素间添加的逗号前面会有一个空格，负外边距`margin-left: -.25em;`的作用是抵消所出现的空隙。 50 | 51 | ### 浏览器支持 52 | 53 | 59 | -------------------------------------------------------------------------------- /zh-cn/fluid-fixed.md: -------------------------------------------------------------------------------- 1 | 2 | # 全背景下等宽内容居中 3 | 4 | ?> 背景知识：:point_right: [calc()](https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc) 5 | 6 | > 将元素左右padding设置为父元素宽度的50%减去等宽内容的一半即可，无需设置width～ 7 | 8 | 9 | 10 | 51 | 52 | 53 | ### 浏览器支持 54 | 55 | 61 | -------------------------------------------------------------------------------- /zh-cn/ellipse.md: -------------------------------------------------------------------------------- 1 | 2 | # 圆与椭圆 3 | 4 | ?> 背景知识：:point_right: [border-radius](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius) 5 | 6 | 通常我们一般使用`border-radius`来时实现圆角效果，其实`border-radius`是可以单独指定它的半长轴和半短轴，只需要用“/”分割即可。我们可以通过这个属性轻松实现半圆、半椭圆、四分之一圆及四分之一圆等常见的图形。 7 | 8 | 9 | 10 | 60 | 61 | 62 | ### 浏览器支持 63 | 64 | 70 | -------------------------------------------------------------------------------- /zh-cn/holy-grail-layout.md: -------------------------------------------------------------------------------- 1 | 2 | # 圣杯布局 3 | 4 | 此布局一般的需求为两边等宽，中间自适应的三栏布局。 5 | 6 | 7 | 8 | 80 | 81 | -------------------------------------------------------------------------------- /inner-rounding.md: -------------------------------------------------------------------------------- 1 | 2 | # Inner rounding 3 | 4 | ?> Background：:point_right: [box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow), [outline](https://developer.mozilla.org/zh-CN/docs/Web/CSS/outline) 5 | 6 | We know that `box-shadow` will stick to the `border-radius` rounded edges, but the stroke `outline` will not fit the rounded edge `border-radius`, we can combine them. Using `box-shadow` to fill the gap created by the stroke `outline` to perform the effect we want. 7 | 8 | !>About setting the value of expansion radius? Assuming that the radius of the rounded `border-radius` is `r`, according to the Pythagorean theorem, the minimum value of the expansion radius should be equal to `(√2−1)r ~= 3.314`, and the maximum value cannot exceed the stroke width, which is `6px`. 9 | 10 | 11 | 12 | 42 | 43 | 44 | ### Browser Support 45 | 46 | 52 | -------------------------------------------------------------------------------- /zh-cn/multiple-borders.md: -------------------------------------------------------------------------------- 1 | # 多重边框 2 | 3 | ?> 背景知识：:point_right: [box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow), [outline](https://developer.mozilla.org/zh-CN/docs/Web/CSS/outline),[outline-offset](https://developer.mozilla.org/zh-CN/docs/Web/CSS/outline-offset) 4 | 5 | `box-shadow`相信很多人都已经用透了，可用来给元素添加各种阴影效果，反过来，也只有我们需要实现阴影时才会想起它，其实，`box-shadow`还接受第四个参数作为阴影扩张半径，当我们只设置扩张半径时，零偏移，零模糊，产生的效果其实相当于一条实线“**边框**”。 6 | 7 | `box-shadow`只能模拟实线边框效果，某些情况下，我们可能需要生成虚线的边框效果，我们可以通过类似于`border`的描边`outline`和对应的描边偏移`outline-offset`来实现。 8 | 9 | 10 | 47 | 48 | 49 | ### 浏览器支持 50 | 51 | 57 | -------------------------------------------------------------------------------- /holy-grail-layout.md: -------------------------------------------------------------------------------- 1 | 2 | # Holy grail layout 3 | 4 | General requirments fot this layout is that three-column with two sides are equally wide and the adaptive middle part. 5 | 6 | 7 | 8 | 80 | 81 | -------------------------------------------------------------------------------- /zh-cn/extended-bg-position.md: -------------------------------------------------------------------------------- 1 | # 背景定位 2 | 3 | ?> 背景知识：:point_right: [background-position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position), [background-origin](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-origin), [calc](https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc) 4 | 5 | 6 | 7 | 8 | 9 | 45 | 46 | 47 | ### 浏览器支持 48 | 49 | 55 | 56 | 62 | -------------------------------------------------------------------------------- /fluid-fixed.md: -------------------------------------------------------------------------------- 1 | 2 | # Full background fixed content 3 | 4 | ?> Background：:point_right: [calc()](https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc) 5 | 6 | > Set the left and right padding of the element to 50% of the width of the parent element minus half of the content of the equal width. No need to set the width ~ 7 | 8 | 9 | 10 | 51 | 52 | 53 | ### Browser Support 54 | 55 | 61 | -------------------------------------------------------------------------------- /extended-bg-position.md: -------------------------------------------------------------------------------- 1 | 2 | # Background position 3 | 4 | ?> Background：:point_right: [background-position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position), [background-origin](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-origin), [calc](https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc) 5 | 6 | 7 | 8 | 9 | 10 | 46 | 47 | 48 | ### Browser Support 49 | 50 | 56 | 57 | 63 | -------------------------------------------------------------------------------- /line-breaks.md: -------------------------------------------------------------------------------- 1 | 2 | # Line breaks 3 | 4 | ?> Background：:point_right: [Unicode](https://en.wikipedia.org/wiki/Unicode), [white-space](https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space) 5 | 6 | In [Unicode](http://www.ssec.wisc.edu/~tomw/java/unicode.html), the character `0x000A` is specially designed to control line breaks. In CSS, we can write it as `000A` or `\A`. We can use it as the content of the pseudo-element `::after`, and append it to the specified element, to achieve line-breaking. 7 | 8 | 9 | 10 | 47 | 48 | 49 | !> In the above code, there is a space in front of the comma added between the multiple `span.bold` elements through the pseudo-element. The negative margin `margin-left: -.25em;` is used to offset the gaps that appear. 50 | 51 | ### Browser Support 52 | 53 | 59 | -------------------------------------------------------------------------------- /ellipse.md: -------------------------------------------------------------------------------- 1 | 2 | # Ellipse 3 | 4 | ?> Background：:point_right: [border-radius](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius) 5 | 6 | Generally speaking, we use the `border-radius` to achieve the rounding effect more often, In fact, `border-radius` is able to specify its semi-major and semi-short axes separately, only need to use "/" to split. We can easily implement common graphics such as semicircles, semi-ellipses, quarter circles, and quarter circles through this property. 7 | 8 | 9 | 10 | 60 | 61 | 62 | ### Browser Support 63 | 64 | 70 | -------------------------------------------------------------------------------- /zh-cn/_sidebar.md: -------------------------------------------------------------------------------- 1 | - **介绍** 2 | - [关于CSS Tricks](zh-cn/introduce.md?v=1) 3 | - **边框与背景** 4 | - [半透明边框](zh-cn/translucent-borders.md) 5 | - [多重边框](zh-cn/multiple-borders.md) 6 | - [边框内圆角](zh-cn/inner-rounding.md) 7 | - [背景定位](zh-cn/extended-bg-position.md) 8 | - [条纹背景](zh-cn/stripes-background.md) 9 | - [1px 线/边](zh-cn/one-pixel-line.md) 10 | - **常见形状** 11 | - [圆与椭圆](zh-cn/ellipse.md) 12 | - [parallel四边形](zh-cn/parallelogram.md) 13 | - [切角效果](zh-cn/bevel-corners.md) 14 | - [简易饼图](zh-cn/pie-chart.md) 15 | - [提示气泡](zh-cn/poptip.md) 16 | - [其他多边形](zh-cn/polygon.md) 17 | - **视觉效果** 18 | - [常见投影](zh-cn/single-projection.md) 19 | - [不规则投影](zh-cn/irregular-projection.md) 20 | - [毛玻璃效果](zh-cn/frosted-glass.md) 21 | - [斑马条纹](zh-cn/zebra-stripes.md) 22 | - [文字特效](zh-cn/text-effects.md) 23 | - [文本截断](zh-cn/text-truncate.md) 24 | - [环形文字](zh-cn/circular-text.md) 25 | - [插入换行](zh-cn/line-breaks.md) 26 | - [图片对比控件](zh-cn/image-slider.md) 27 | - **用户体验** 28 | - [选择合适的鼠标光标](zh-cn/mouse-cursor.md) 29 | - [扩大可点击区域](zh-cn/extend-hit-area.md) 30 | - [自定义复选框](zh-cn/custom-checkbox.md) 31 | - [自定义单选框](zh-cn/custom-radio.md) 32 | - [自定义开关选择器](zh-cn/custom-switch.md) 33 | - [输入框完美居中](zh-cn/input-align.md) 34 | - [通过阴影弱化背景](zh-cn/shadow-weaken-background.md) 35 | - [通过模糊弱化背景](zh-cn/blurry-weaken-background.md) 36 | - [自定义文字下划线](zh-cn/text-underline.md) 37 | - [自定义scroll滚动条](zh-cn/scrollbar.md) 38 | - **结构布局** 39 | - [全背景等宽内容居中](zh-cn/fluid-fixed.md) 40 | - [绝对底部](zh-cn/sticky-footer.md) 41 | - [水平垂直居中](zh-cn/centering-known.md) 42 | - [圣杯布局](zh-cn/holy-grail-layout.md?v=1) 43 | - [双飞翼布局](zh-cn/double-wing-layout.md?v=1) 44 | - [类订单布局](zh-cn/class-order-layout.md) 45 | - [Flex布局](zh-cn/flexbox-layout.md) 46 | - **动画过渡** 47 | - [弹跳效果](zh-cn/bounce.md) 48 | - [弹性过度](zh-cn/elastic.md) 49 | - [闪烁效果](zh-cn/blink.md) 50 | - [打字效果](zh-cn/typing.md) 51 | - [抖动效果](zh-cn/shake.md) 52 | - [无缝平滑效果](zh-cn/smooth.md) 53 | - [延轨迹平滑效果](zh-cn/circular-smooth.md) 54 | 55 | - **其他** 56 | - [常用片段](zh-cn/common-snippets.md) 57 | - [自定义变量](zh-cn/custom-variables.md) 58 | - [有趣的项目](zh-cn/interesting-usage.md) 59 | -------------------------------------------------------------------------------- /frosted-glass.md: -------------------------------------------------------------------------------- 1 | 2 | # Frosted glass effect 3 | 4 | ?> Background：:point_right: [hsla/rgba](https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value) 5 | 6 | 7 | 8 | 58 | 59 | 60 | ### Browser Support 61 | 62 | 68 | 69 | 75 | -------------------------------------------------------------------------------- /zh-cn/frosted-glass.md: -------------------------------------------------------------------------------- 1 | 2 | # 毛玻璃效果 3 | 4 | ?> 背景知识：:point_right: [hsla/rgba](https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value) 5 | 6 | 7 | 8 | 59 | 60 | 61 | ### 浏览器支持 62 | 63 | 69 | 70 | 76 | -------------------------------------------------------------------------------- /zh-cn/introduce.md: -------------------------------------------------------------------------------- 1 | 2 | # 关于 You-need-to-know-css 3 | 4 | 作为一名Web开发者，CSS是必备技能之一，我一直以为自己对CSS的掌握已经够用了，直到读[Lea Verou](http://lea.verou.me/about/)的[《CSS揭秘》](https://item.jd.com/11911279.html)，我发现自己充其量就算个会打CS的选手，书中针对我们常见的网页设计难题从不同的角度提出了多种实用又优雅的解决方案，在这里强烈的推荐给每一位从事前端相关工作和对前端有兴趣的同学，相信你一定会有所收获。 5 | 6 | 为了以后可以更爽的复制粘贴，笔者把自己的收获和工作中常用的一些CSS小样式总结成这份文档，为了有点逼格，且取名为`You-need-to-know-css`，还请大家勿喷🙏，目前文档一共包含43个CSS的小样式（持续更新…）。文档还有很多不足的地方，还请各位多多指教，如果觉得对你有一点帮助，欢迎大家一起来完善:memo:~ 7 | 8 | 在 MDN 中 [CSS](https://developer.mozilla.org/zh-CN/docs/Web/CSS) 的定义： 9 | 10 | ?> 层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。 11 | 12 | 15 | 16 | ## 原则 17 | 18 | 减少代码重复，保持代码的DRY 19 | 20 | ```css 21 | /* bad~bad~bad~ */ 22 | 23 | tips { 24 | color: #f4f0ea; 25 | border: 1px solid #f4f0ea; 26 | } 27 | tips:before { 28 | border-left-color: #f4f0ea; 29 | } 30 | 31 | /* good~good~good~ */ 32 | 33 | tips { 34 | color: #f4f0ea; 35 | border: 1px solid currentColor; 36 | } 37 | tips:before { 38 | border-left-color: inherit; 39 | } 40 | ``` 41 | 42 | 合理使用简写 43 | 44 | ```css 45 | /* bad~bad~bad~ */ 46 | 47 | div { 48 | border-width: 2px 2px 2px 0; 49 | } 50 | 51 | /* good~good~good~ */ 52 | 53 | div { 54 | border-width: 2px; 55 | border-left-width: 0; 56 | } 57 | ``` 58 | 59 | 适当的过渡效果 60 | 61 | ```css 62 | /* bad~bad~bad~ */ 63 | 64 | input:not(:focus) + .popTips{ 65 | display: none; 66 | } 67 | 68 | input:focus + .popTips{ 69 | display: block; 70 | } 71 | 72 | /* good~good~good~ */ 73 | 74 | input:not(:focus) + .popTips{ 75 | transform: scale(0); 76 | transition: transform .25s cubic-bezier(.25, .1, .25, .1); 77 | } 78 | 79 | input:focus + .popTips{ 80 | transform: scale(1); 81 | transition: transform .4s cubic-bezier(.29, .15, .5, 1.46); 82 | } 83 | ``` 84 | 85 | ## 色彩 86 | 87 | 为了保持文档中示例的一致性，文档中所有示例配色均参考使用网易严选设计规范。 88 | 89 | ![color](https://lhammer.cn/You-need-to-know-css/static/colors_guide.jpeg) 90 | 91 | !> 文档中的示例样式兼没有添加浏览器前缀做兼容，建议使用Chrome，Firefox等主流浏览器访问，在生产环境中请使用[Autoprefixer](https://www.npmjs.com/package/autoprefixer)做兼容处理。 92 | -------------------------------------------------------------------------------- /zh-cn/blink.md: -------------------------------------------------------------------------------- 1 | 2 | # 闪烁效果 3 | 4 | ?> 背景知识：:point_right: [animation-direction](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-direction) 5 | 6 | `animation-direction`属性接受的值共有四个，为了你能从视觉上直接理解其作用，我以下图一段从`#FFFFFF`变化到`#b4a078`并循环三次的动画为例，展示了这四个值各自对动画的作用效果。 7 | 8 |

9 | 10 | 11 | 12 | 64 | 65 | 66 | > 一切的过度皆应该由动画来完成 67 | 68 | ### 浏览器支持 69 | 70 | 76 | -------------------------------------------------------------------------------- /zh-cn/scrollbar.md: -------------------------------------------------------------------------------- 1 | 2 | # 自定义滚动条 3 | 4 | ?> 背景知识：:point_right: [box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow), [::-webkit-scrollbar](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar) 5 | 6 | 7 | 8 | 62 | 63 | 64 | !> 兼容性很差，并且很多样式不可控，建议在生产环境中采用类似 [perfect-scrollbar](https://github.com/utatti/perfect-scrollbar) 的方案。 65 | 66 | ### 浏览器支持 67 | 68 | 74 | -------------------------------------------------------------------------------- /_sidebar.md: -------------------------------------------------------------------------------- 1 | - **Introduction** 2 | - [About CSS Tricks](/introduce.md?v=1) 3 | - **Borders & Backgrounds** 4 | - [Translucent borders](/translucent-borders.md) 5 | - [Multiple borders](/multiple-borders.md) 6 | - [Inner rounding](/inner-rounding.md) 7 | - [Background position](/extended-bg-position.md) 8 | - [Striped backgrounds](/stripes-background.md) 9 | - [One pixel line](/one-pixel-line.md) 10 | - **Shapes** 11 | - [Ellipse](/ellipse.md) 12 | - [Parallelograms](/parallelogram.md) 13 | - [Cutout corners](/bevel-corners.md) 14 | - [Pie charts](/pie-chart.md) 15 | - [Poptip](/poptip.md) 16 | - [Polygon](/polygon.md) 17 | - **Visual Effects** 18 | - [Common shadows](/single-projection.md) 19 | - [Irregular shadows](/irregular-projection.md) 20 | - [Frosted glass effect](/frosted-glass.md) 21 | - [Zebra-striped effect](/zebra-stripes.md) 22 | - [Text effects](/text-effects.md) 23 | - [Circular text](/circular-text.md) 24 | - [Line breaks](line-breaks.md) 25 | - [Image contrast widget](/image-slider.md) 26 | - **User Experience** 27 | - [Mouse cursor](/mouse-cursor.md) 28 | - [Extend hit area](/extend-hit-area.md) 29 | - [Custom checkboxes](/custom-checkbox.md) 30 | - [Custom radios](/custom-radio.md) 31 | - [Custom switch](/custom-switch.md) 32 | - [Input align](/input-align.md) 33 | - [Shadow weaken background](/shadow-weaken-background.md) 34 | - [Blurry weaken background](/blurry-weaken-background.md) 35 | - [Text underlines](/text-underline.md) 36 | - [Custom scrollbar](/scrollbar.md) 37 | - **Structure & Layout** 38 | - [Full background fixed content](/fluid-fixed.md) 39 | - [Sticky footer](/sticky-footer.md) 40 | - [Centered](/centering-known.md) 41 | - [Holy grail layout](/holy-grail-layout.md?v=1) 42 | - [Double wing layout](/double-wing-layout.md?v=1) 43 | - [Class order layout](/class-order-layout.md) 44 | - [Flexbox layout](/flexbox-layout.md) 45 | - **Transition & Animations** 46 | - [Bounce](/bounce.md) 47 | - [Elastic](/elastic.md) 48 | - [Blink](/blink.md) 49 | - [Typing](/typing.md) 50 | - [Shake](/shake.md) 51 | - [Smooth](/smooth.md) 52 | - [Circular smooth](/circular-smooth.md) 53 | 54 | - **Other** 55 | - [Code snippets](/common-snippets.md) 56 | - [Custom variables](/custom-variables.md) 57 | - [Interesting usage](/interesting-usage.md) 58 | -------------------------------------------------------------------------------- /scrollbar.md: -------------------------------------------------------------------------------- 1 | 2 | # Custom scrollbar 3 | 4 | ?> Background：:point_right: [box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow), [::-webkit-scrollbar](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar) 5 | 6 | 7 | 8 | 62 | 63 | 64 | !> Poor compatibility, many styles are uncontrollable, it is recommended to use similar solution like [perfect-scrollbar](https://github.com/utatti/perfect-scrollbar) in production environment 65 | 66 | ### Browser Support 67 | 68 | 74 | -------------------------------------------------------------------------------- /multiple-borders.md: -------------------------------------------------------------------------------- 1 | 2 | # Multiple borders 3 | 4 | ?> Background：:point_right: [box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow), [outline](https://developer.mozilla.org/zh-CN/docs/Web/CSS/outline),[outline-offset](https://developer.mozilla.org/zh-CN/docs/Web/CSS/outline-offset) 5 | 6 | It is believed that many people have used `box-shadow` widely, it can be used to add various shadow effects to the elements. Conversely, it is brought back to our mind only when we need to implement shadows. Actually, `box-shadow` also accepts the fourth argument serve as shadow expansion radius. When we want to set the expansion radius only, zero offset, zero blur, its effect is actually equivalent to a solid line "**border**". 7 | 8 | `box-shadow` can only simulate solid border effects. In some cases, we may need to generate a dashed border effect. We can use the stroke `outline` similar to `border` and the corresponding stroke offset `outline-offset` to achieve. 9 | 10 | 11 | 12 | 49 | 50 | 51 | ### Browser Support 52 | 53 | -------------------------------------------------------------------------------- /libs/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Docsify config 3 | */ 4 | gitalkConfig = { 5 | clientID: "8b7cffeb4ae285e0e3e4", 6 | clientSecret: "58d06f5220e953d6dac7d6723daf225177cc7bb3", 7 | repo: "You-need-to-know-css", 8 | owner: "l-hammer", 9 | admin: ["l-hammer"], 10 | perPage: 20, 11 | language: "en", 12 | labels: ["💬Gitalk"], 13 | pagerDirection: "last", 14 | distractionFreeMode: false 15 | }; 16 | window.$docsify = { 17 | name: "You-need-to-know-css", 18 | repo: "https://github.com/l-hammer/You-need-to-know-css", 19 | auto2top: true, 20 | loadNavbar: true, 21 | loadSidebar: true, 22 | mergeNavbar: true, 23 | subMaxLevel: 2, 24 | homepage: "README.md", 25 | ga: "UA-122081516-1", 26 | search: { 27 | noData: { 28 | "/zh-cn/": "找不到结果!", 29 | "/": "No results!" 30 | }, 31 | paths: "auto", 32 | placeholder: { 33 | "/zh-cn/": "搜索", 34 | "/": "Search" 35 | } 36 | }, 37 | plugins: [ 38 | function(hook, vm) { 39 | hook.beforeEach(function(html) { 40 | var url = 41 | "https://github.com/l-hammer/You-need-to-know-css/blob/master/" + 42 | vm.route.file; 43 | var editHtml = "[📝 EDIT DOCUMENT](" + url + ")\n"; 44 | 45 | return editHtml + html; 46 | }); 47 | 48 | hook.doneEach(function() { 49 | var label, domObj, main, divEle, gitalk; 50 | label = vm.route.path.split("/").pop(); 51 | domObj = Docsify.dom; 52 | main = domObj.getNode("#main"); 53 | 54 | /** 55 | * render gittalk 56 | */ 57 | if (vm.route.path.includes("zh-cn")) { 58 | gitalkConfig.language = "zh-CN"; 59 | } 60 | Array.apply( 61 | null, 62 | document.querySelectorAll("div.gitalk-container") 63 | ).forEach(function(ele) { 64 | ele.remove(); 65 | }); 66 | divEle = domObj.create("div"); 67 | divEle.id = "gitalk-container-" + label; 68 | divEle.className = "gitalk-container"; 69 | divEle.style = "width: " + main.clientWidth + "px; margin: 0 auto 20px;"; 70 | domObj.appendTo(domObj.find(".content"), divEle); 71 | gitalk = new Gitalk( 72 | Object.assign(gitalkConfig, { id: !label ? "home" : label }) 73 | ); 74 | gitalk.render("gitalk-container-" + label); 75 | }); 76 | } 77 | ] 78 | }; 79 | -------------------------------------------------------------------------------- /blink.md: -------------------------------------------------------------------------------- 1 | 2 | # Blink 3 | 4 | ?> Background：:point_right: [animation-direction](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-direction) 5 | 6 | The `animation-direction` Property has four values can be accepted. For the purpose of understanding its effect visiually and precisely, this document takes the example of the animation that changes from `#FFFFFF` to `#b4a078` and loop three times, which present the different effects of the different four values. See the following diagram. 7 |

8 | 9 | 10 | 11 | 66 | 67 | 68 | > All the transitions should be animated. 69 | 70 | ### Browser Support 71 | 72 | 78 | -------------------------------------------------------------------------------- /zh-cn/single-projection.md: -------------------------------------------------------------------------------- 1 | 2 | # 常见投影 3 | 4 | ?> 背景知识：:point_right: [box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow) 5 | 6 | 7 | 8 | 83 | 84 | 85 | ### 浏览器支持 86 | 87 | 93 | -------------------------------------------------------------------------------- /single-projection.md: -------------------------------------------------------------------------------- 1 | 2 | # Common shadows 3 | 4 | ?> Background：:point_right: [box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow) 5 | 6 | 7 | 8 | 83 | 84 | 85 | ### Browser Support 86 | 87 | 93 | -------------------------------------------------------------------------------- /zh-cn/custom-switch.md: -------------------------------------------------------------------------------- 1 | 2 | ### 自定义开关选择器 3 | 4 | ?> 背景知识：:point_right: [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition), [伪元素](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#%E4%BC%AA%E5%85%83%E7%B4%A0) 5 | 6 | 同自定义复选框或自定义单选框类似，都是利用一个隐藏的`input(:checked)`元素 + 一个关联的`label`元素，通过`label`元素及其伪元素模拟switch选择器，通过`input`的`:checked`属性来模拟`switch`状态是否开启。 7 | 8 | 9 | 10 | 84 | 85 | 86 | ### 浏览器支持 87 | 88 | 94 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2 | 3 | 996 License Version 1.0 (Draft) 4 | 5 | Permission is hereby granted to any individual or legal entity 6 | obtaining a copy of this licensed work (including the source code, 7 | documentation and/or related items, hereinafter collectively referred 8 | to as the "licensed work"), free of charge, to deal with the licensed 9 | work for any purpose, including without limitation, the rights to use, 10 | reproduce, modify, prepare derivative works of, distribute, publish 11 | and sublicense the licensed work, subject to the following conditions: 12 | 13 | 1. The individual or the legal entity must conspicuously display, 14 | without modification, this License and the notice on each redistributed 15 | or derivative copy of the Licensed Work. 16 | 17 | 2. The individual or the legal entity must strictly comply with all 18 | applicable laws, regulations, rules and standards of the jurisdiction 19 | relating to labor and employment where the individual is physically 20 | located or where the individual was born or naturalized; or where the 21 | legal entity is registered or is operating (whichever is stricter). In 22 | case that the jurisdiction has no such laws, regulations, rules and 23 | standards or its laws, regulations, rules and standards are 24 | unenforceable, the individual or the legal entity are required to 25 | comply with Core International Labor Standards. 26 | 27 | 3. The individual or the legal entity shall not induce or force its 28 | employee(s), whether full-time or part-time, or its independent 29 | contractor(s), in any methods, to agree in oral or written form, to 30 | directly or indirectly restrict, weaken or relinquish his or her 31 | rights or remedies under such laws, regulations, rules and standards 32 | relating to labor and employment as mentioned above, no matter whether 33 | such written or oral agreement are enforceable under the laws of the 34 | said jurisdiction, nor shall such individual or the legal entity 35 | limit, in any methods, the rights of its employee(s) or independent 36 | contractor(s) from reporting or complaining to the copyright holder or 37 | relevant authorities monitoring the compliance of the license about 38 | its violation(s) of the said license. 39 | 40 | THE LICENSED WORK IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 41 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 42 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 43 | IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, 44 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 45 | OTHERWISE, ARISING FROM, OUT OF OR IN ANY WAY CONNECTION WITH THE 46 | LICENSED WORK OR THE USE OR OTHER DEALINGS IN THE LICENSED WORK. -------------------------------------------------------------------------------- /zh-cn/bounce.md: -------------------------------------------------------------------------------- 1 | 2 | # 弹跳效果 3 | 4 | ?> 背景知识：:point_right: [animation](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation), [timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform) 5 | 6 | 小球下落过程属于自由落体运动，在时间函数[timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function)中,`ease`（更快的加速度）相对更接近于自由落体运动，所以下落过程我们选用`ease`作为时间函数的关键值；当小球被弹起时属于减速运动，我们需用使用`ease`的方向版本`cubic-bezier(.1,.25,.1,.25)`（更快的减速度）作为时间函数的函数值来模仿减速运动。调速函数如下图所示： 7 | 8 |
9 |
10 | 11 | ------ 12 | 13 | 14 | 15 | 74 | 75 | 76 | ### 浏览器支持 77 | 78 | 84 | 85 | 91 | -------------------------------------------------------------------------------- /zh-cn/double-wing-layout.md: -------------------------------------------------------------------------------- 1 | 2 | # 双飞翼布局 3 | 4 | 此布局的需求同[圣杯布局](https://lhammer.cn/You-need-to-know-css/#/holy-grail-layout)一样，都为两边等宽，中间自适应的三栏布局，源自淘宝UED 5 | 6 | 7 | 8 | 84 | 85 | 86 | ### 圣杯布局和双飞翼布局的区别 87 | 88 | 圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。 89 | 90 | 不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。 91 | 92 | 双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。多了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。 93 | 94 | ?> 作者：吕延庆
95 | 链接：https://www.zhihu.com/question/21504052/answer/50053054
96 | 来源：知乎
97 | 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 98 | -------------------------------------------------------------------------------- /custom-switch.md: -------------------------------------------------------------------------------- 1 | 2 | ### Custom switch selector 3 | 4 | ?> Background: :point_right: [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition), [Pseudo-elements](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#%E4%BC%AA%E5%85%83%E7%B4%A0) 5 | 6 | Similar to custom checkboxes or custom radio buttons, they use a hidden `input(:checked)` element + an associated `label` element to simulate the switch selector with the `label` element and its pseudo-elements. Use the `:checked` property of `input` to simulate whether the `switch` state is enabled. 7 | 8 | 9 | 10 | 86 | 87 | 88 | ### 浏览器支持 89 | 90 | 96 | -------------------------------------------------------------------------------- /zh-cn/interesting-usage.md: -------------------------------------------------------------------------------- 1 | # 🎢 一些有趣的项目 2 | 3 | 收藏一些CSS有趣的项目，欢迎补充完善~ 4 | 5 | ### NES.css 6 | 7 | NES红白机风格的 CSS 框架，主要的实现原理是通过将字体 [Press+Start+2P](https://fonts.google.com/specimen/Press+Start+2P) 和 `box-shadow` 巧妙的结合，非常有意思，尤其是icon的实现，强烈建议大家看下源码~ :thumbsup: 8 | 9 | 10 | 11 | 12 | ?> **GitHub:** [BcRikko/NES.css](https://github.com/BcRikko/NES.css) 13 | 14 | ### Shapes generated 15 | 16 | 用CSS渐变实现的形状 17 | 18 | 19 | 20 | 21 | ?> **GitHub:** [yuanchuan/gradient-shapes](https://github.com/yuanchuan/gradient-shapes) 22 | 23 | ### CSS Grid Generator 24 | 25 | 动态生成 CSS Grid 代码! 26 | 27 | 28 | 29 | 30 | ?> **GitHub:** [sdras/cssgridgenerator](https://github.com/sdras/cssgridgenerator) 31 | 32 | ### Epic Spinners 33 | 34 | CSS 加载动画 35 | 36 | 37 | 38 | 39 | ?> **GitHub:** [epicmaxco/epic-spinners](https://github.com/epicmaxco/epic-spinners) 40 | 41 | ### CSS file icons 42 | 43 | 纯CSS实现的文件Icon 44 | 45 | 46 | 47 | 48 | ?> **GitHub:** [colorswall/CSS-file-icons](https://github.com/colorswall/CSS-file-icons) 49 | 50 | 57 | 58 | ### magic 59 | 60 | CSS动画特效 61 | 62 | 63 | 64 | 65 | ?> **GitHub:** [miniMAC/magic](https://github.com/miniMAC/magic) 66 | 67 | ### A Single Div 68 | 69 | 只用一个HTML元素实现的CSS的绘图 70 | 71 | 72 | 73 | 74 | ?> **GitHub:** [lynnandtonic/a-single-div](https://github.com/lynnandtonic/a-single-div) 75 | -------------------------------------------------------------------------------- /zh-cn/irregular-projection.md: -------------------------------------------------------------------------------- 1 | 2 | # 不规则投影 3 | 4 | ?> 背景知识：:point_right: [filter](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter), [radial-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient), [border-image](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image) 5 | 6 | 7 | 8 | 66 | 67 | 68 | ### 浏览器支持 69 | 70 | 76 | 77 | 83 | 84 | 90 | -------------------------------------------------------------------------------- /bounce.md: -------------------------------------------------------------------------------- 1 | 2 | # Bounce 3 | 4 | ?> Background：:point_right: [animation](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation), [timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform) 5 | 6 | The falling of ball is a typical Free Fall motion, in the [timing function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function), `ease`(sharper accelerated speed) is relatively closer to the free-fall motion. Therefore, we use the `ease` as the keyword during the falling process; However, when the ball is bounced, it belongs to the deceleration motion, we need to use the `ease` direction version `cubic-bezier(.1,.25,.1,.25)`(faster deceleration) as the function value of the time function to mimic deceleration. The speed control function is shown below: 7 | 8 |
9 |
10 | 11 | ------ 12 | 13 | 14 | 15 | 74 | 75 | 76 | ### Browser Support 77 | 78 | 84 | 85 | 91 | -------------------------------------------------------------------------------- /irregular-projection.md: -------------------------------------------------------------------------------- 1 | 2 | # Irregular shadow 3 | 4 | ?> Background：:point_right: [filter](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter), [radial-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient), [border-image](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image) 5 | 6 | 7 | 8 | 66 | 67 | 68 | ### Browser Support 69 | 70 | 76 | 77 | 83 | 84 | 90 | -------------------------------------------------------------------------------- /interesting-usage.md: -------------------------------------------------------------------------------- 1 | # 🎢 Interesting usage 2 | 3 | Some intersting CSS project here, welcome to contribute~ 4 | 5 | ### NES.css 6 | 7 | NES red and white style CSS framework, the main implementation principle is through the clever combination of font [Press+Start+2P](https://fonts.google.com/specimen/Press+Start+2P) and `box-shadow`, which is very interesting, especially the implementation of icon. The source code is highly recommended ~ :thumbsup: 8 | 9 | 10 | 11 | 12 | ?> **GitHub:** [BcRikko/NES.css](https://github.com/BcRikko/NES.css) 13 | 14 | ### Shapes generated 15 | 16 | Shapes implemented with CSS gradients 17 | 18 | 19 | 20 | 21 | ?> **GitHub:** [yuanchuan/gradient-shapes](https://github.com/yuanchuan/gradient-shapes) 22 | 23 | ### CSS Grid Generator 24 | 25 | Generate basic CSS Grid code to make dynamic layouts! 26 | 27 | 28 | 29 | 30 | ?> **GitHub:** [sdras/cssgridgenerator](https://github.com/sdras/cssgridgenerator) 31 | 32 | ### Epic Spinners 33 | 34 | CSS animation loading 35 | 36 | 37 | 38 | 39 | ?> **GitHub:** [epicmaxco/epic-spinners](https://github.com/epicmaxco/epic-spinners) 40 | 41 | ### CSS file icons 42 | 43 | File icon implementated by pure CSS 44 | 45 | 46 | 47 | 48 | ?> **GitHub:** [colorswall/CSS-file-icons](https://github.com/colorswall/CSS-file-icons) 49 | 50 | 57 | 58 | ### magic 59 | 60 | CSS animation effects 61 | 62 | 63 | 64 | 65 | ?> **GitHub:** [miniMAC/magic](https://github.com/miniMAC/magic) 66 | 67 | ### A Single Div 68 | 69 | CSS drawing with only one HTML element 70 | 71 | 72 | 73 | 74 | ?> **GitHub:** [lynnandtonic/a-single-div](https://github.com/lynnandtonic/a-single-div) 75 | -------------------------------------------------------------------------------- /sw.js: -------------------------------------------------------------------------------- 1 | /* =========================================================== 2 | * docsify sw.js 3 | * =========================================================== 4 | * Copyright 2016 @huxpro 5 | * Licensed under Apache 2.0 6 | * Register service worker. 7 | * ========================================================== */ 8 | 9 | const RUNTIME = 'docsify' 10 | const HOSTNAME_WHITELIST = [ 11 | self.location.hostname, 12 | 'img.shields.io', 13 | 'static.hotjar.com', 14 | 'fonts.gstatic.com', 15 | 'fonts.googleapis.com', 16 | 'www.google-analytics.com', 17 | 'avatars1.githubusercontent.com' 18 | ] 19 | 20 | // The Util Function to hack URLs of intercepted requests 21 | const getFixedUrl = (req) => { 22 | var now = Date.now() 23 | var url = new URL(req.url) 24 | 25 | // 1. fixed http URL 26 | // Just keep syncing with location.protocol 27 | // fetch(httpURL) belongs to active mixed content. 28 | // And fetch(httpRequest) is not supported yet. 29 | url.protocol = self.location.protocol 30 | 31 | // 2. add query for caching-busting. 32 | // Github Pages served with Cache-Control: max-age=600 33 | // max-age on mutable content is error-prone, with SW life of bugs can even extend. 34 | // Until cache mode of Fetch API landed, we have to workaround cache-busting with query string. 35 | // Cache-Control-Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=453190 36 | if (url.hostname === self.location.hostname) { 37 | url.search += (url.search ? '&' : '?') + 'cache-bust=' + now 38 | } 39 | return url.href 40 | } 41 | 42 | /** 43 | * @Lifecycle Activate 44 | * New one activated when old isnt being used. 45 | * 46 | * waitUntil(): activating ====> activated 47 | */ 48 | self.addEventListener('activate', event => { 49 | event.waitUntil(self.clients.claim()) 50 | }) 51 | 52 | /** 53 | * @Functional Fetch 54 | * All network requests are being intercepted here. 55 | * 56 | * void respondWith(Promise r) 57 | */ 58 | self.addEventListener('fetch', event => { 59 | // Skip some of cross-origin requests, like those for Google Analytics. 60 | if (HOSTNAME_WHITELIST.indexOf(new URL(event.request.url).hostname) > -1) { 61 | // Stale-while-revalidate 62 | // similar to HTTP's stale-while-revalidate: https://www.mnot.net/blog/2007/12/12/stale 63 | // Upgrade from Jake's to Surma's: https://gist.github.com/surma/eb441223daaedf880801ad80006389f1 64 | const cached = caches.match(event.request) 65 | const fixedUrl = getFixedUrl(event.request) 66 | const fetched = fetch(fixedUrl, { cache: 'no-store' }) 67 | const fetchedCopy = fetched.then(resp => resp.clone()) 68 | 69 | // Call respondWith() with whatever we get first. 70 | // If the fetch fails (e.g disconnected), wait for the cache. 71 | // If there’s nothing in cache, wait for the fetch. 72 | // If neither yields a response, return offline pages. 73 | event.respondWith( 74 | Promise.race([fetched.catch(_ => cached), cached]) 75 | .then(resp => resp || fetched) 76 | .catch(_ => { /* eat any errors */ }) 77 | ) 78 | 79 | // Update the cache with the version we fetched (only for ok status) 80 | event.waitUntil( 81 | Promise.all([fetchedCopy, caches.open(RUNTIME)]) 82 | .then(([response, cache]) => response.ok && cache.put(event.request, response)) 83 | .catch(_ => { /* eat any errors */ }) 84 | ) 85 | } 86 | }) -------------------------------------------------------------------------------- /zh-cn/parallelogram.md: -------------------------------------------------------------------------------- 1 | 2 | # parallel四边形 3 | 4 | ?> 背景知识：:point_right: [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform), [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path) 5 | 6 | 9 | 10 | 11 | 12 | 95 | 96 | 97 | ### 浏览器支持 98 | 99 | 105 | 106 | 112 | -------------------------------------------------------------------------------- /zh-cn/custom-variables.md: -------------------------------------------------------------------------------- 1 | 2 | # ⚗️ 自定义变量 3 | 4 | ?> 背景知识：:point_right: [CSS_variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)，[var()](https://developer.mozilla.org/en-US/docs/Web/CSS/var) 5 | 6 | CSS变量类似于我们在SCSS、LESS中定义的变量，但前者支持通过JS来控制变量的值，以`--`开头，(e.g. `--main-color: #b4a078`)，通过`var(--main-color)`来引用。`var()`函数接受两个参数（e.g. `var(--main-color, gray)`），第一个参数为自定义属性名，第二个参数用作缺省值。 7 | 8 | > 以下示例演示了通过JS [setProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty) 方法改变CSS变量，从而控制元素甚至伪元素的样式~ 9 | 10 | 11 | 12 | 105 | 106 | 107 | !> 如需设置特定的值，直接修改示例中`INITIAL_COLOR`的值即可，**只支持支6位16进制的颜色格式**。 108 | 109 | ### 浏览器支持 110 | 111 | 117 | -------------------------------------------------------------------------------- /introduce.md: -------------------------------------------------------------------------------- 1 | 2 | # About You-need-to-know-css 3 | 4 | As a Web developer, I believe CSS is one of our necessary skills. I always thought that I've had enough mastery of CSS until I read [Lea Verou](http://lea.verou.me/about/)'s [CSS Secrets](https://item.jd.com/11911279.html), when I found myself merely a so-so CSS player. The book offers a variety of practical and elegant solutions from different perspectives for our common web design problems. Here, I strongly recommend it to everyone who is working in front-end or interested in it. I am sure you will gain something from it. 5 | 6 | For the convenience of future CTRL+ C/V, I summarized some small CSS styles that I collected or frequently used at work into this document. And for the sake of zhuangbility (Chinese slang, meaning pretending to be smarter), I titled the document `You-need-to-know-css`. So please, don't be too critical of it. Currently, there are in total 43 small CSS styles in this document (to be continued ...). Besides, since the document is still far from being flawless, any of your advices and suggestions would be much appreciated. If you find it somewhat helpful to you, you are welcome to improve it together with me. :memo: 7 | 8 | The definition of [CSS](https://developer.mozilla.org/zh-CN/docs/Web/CSS) in MDN: 9 | 10 | ?> Cascading Style Sheets (abbreviated as CSS) is a style sheet language used to describe the presentation of HTML or XML (including XML branching languages such as SVG and XHTML). CSS describes how elements on screen, paper, audio and other media should be rendered. 11 | 12 | 15 | 16 | ## principle 17 | 18 | Reduce the duplicate code, keep it dry 19 | 20 | ```css 21 | /* bad~bad~bad~ */ 22 | 23 | tips { 24 | color: #f4f0ea; 25 | border: 1px solid #f4f0ea; 26 | } 27 | tips:before { 28 | border-left-color: #f4f0ea; 29 | } 30 | 31 | /* good~good~good~ */ 32 | 33 | tips { 34 | color: #f4f0ea; 35 | border: 1px solid currentColor; 36 | } 37 | tips:before { 38 | border-left-color: inherit; 39 | } 40 | ``` 41 | 42 | Reasonable use of shorthand 43 | 44 | ```css 45 | /* bad~bad~bad~ */ 46 | 47 | div { 48 | border-width: 2px 2px 2px 0; 49 | } 50 | 51 | /* good~good~good~ */ 52 | 53 | div { 54 | border-width: 2px; 55 | border-left-width: 0; 56 | } 57 | ``` 58 | 59 | Appropriate transition effect 60 | 61 | ```css 62 | /* bad~bad~bad~ */ 63 | 64 | input:not(:focus) + .popTips{ 65 | display: none; 66 | } 67 | 68 | input:focus + .popTips{ 69 | display: block; 70 | } 71 | 72 | /* good~good~good~ */ 73 | 74 | input:not(:focus) + .popTips{ 75 | transform: scale(0); 76 | transition: transform .25s cubic-bezier(.25, .1, .25, .1); 77 | } 78 | 79 | input:focus + .popTips{ 80 | transform: scale(1); 81 | transition: transform .4s cubic-bezier(.29, .15, .5, 1.46); 82 | } 83 | ``` 84 | 85 | ## Color 86 | 87 | In order to maintain consistency in the examples in the documentation, all sample colors in the document refer to the Netease Yan Xuan design specifications. 88 | 89 | ![color](static/colors_guide.jpeg) 90 | 91 | !> The sample style in the document is not compatible with the addition of a browser prefix. It is recommended to use Chrome, Firefox and other mainstream browsers. Please use it in a production environment [Autoprefixer](https://www.npmjs.com/package/autoprefixer) to deal compatibility. 92 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Tricks 6 | 7 | 8 | 12 | 16 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /parallelogram.md: -------------------------------------------------------------------------------- 1 | 2 | # Parallelograms 3 | 4 | ?> Background：:point_right: [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform), [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path) 5 | 6 | 9 | 10 | 11 | 12 | 95 | 96 | 97 | ### Browser Support 98 | 99 | 105 | 106 | 112 | -------------------------------------------------------------------------------- /zh-cn/extend-hit-area.md: -------------------------------------------------------------------------------- 1 | 2 | # 扩大可点击区域 3 | 4 | ?> 背景知识：:point_right: [box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow), [filter](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter) 5 | 6 | 7 | 8 | 106 | 107 | 108 | > 创造良好的用户体验应当养成一种习惯~ 109 | 110 | ### 浏览器支持 111 | 112 | 118 | 119 | 125 | -------------------------------------------------------------------------------- /zh-cn/blurry-weaken-background.md: -------------------------------------------------------------------------------- 1 | # 通过模糊弱化背景 2 | 3 | ?> 背景知识：:point_right: [css-boxshadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/css-boxshadow), HTML < [dialog](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dialog) > 4 | 5 | 6 | 7 | 81 | 82 | 83 | > 创造良好的用户体验应当养成一种习惯~ 84 | 85 | ### 浏览器支持 86 | 87 | 93 | 94 | 100 | -------------------------------------------------------------------------------- /extend-hit-area.md: -------------------------------------------------------------------------------- 1 | 2 | # Extend hit area 3 | 4 | ?> Background：:point_right: [box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow), [filter](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter) 5 | 6 | 7 | 8 | 106 | 107 | 108 | > All the transitions should be animated. 109 | 110 | ### Browser Support 111 | 112 | 118 | 119 | 125 | -------------------------------------------------------------------------------- /blurry-weaken-background.md: -------------------------------------------------------------------------------- 1 | # Blurry waken background 2 | 3 | ?> Background：:point_right: [css-boxshadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/css-boxshadow), HTML < [dialog](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dialog) > 4 | 5 | 6 | 7 | 81 | 82 | 83 | > Greate user experience should always go first as a habit ~ 84 | 85 | ### Browser Support 86 | 87 | 93 | 94 | 100 | -------------------------------------------------------------------------------- /zh-cn/stripes-background.md: -------------------------------------------------------------------------------- 1 | 2 | # 条纹背景 3 | 4 | ?> 背景知识：:point_right: [gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient), [linear-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient), [radial-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient), [repeating-linear-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeating-linear-gradient) 5 | 6 | 7 | 8 | ## 进度条 9 | 10 | 11 | 12 |
13 | 14 | > Work overtime today. 15 | 16 | 17 | 18 | 63 | 64 | 65 | ## 不规则卡片 66 | 67 | 68 | 69 |
70 | 71 | 74 | 75 | > Today's work is seriously overtime. 76 | 77 | 78 | 79 | 101 | 102 | 103 | > 示例中为了实现:hover时有贴边的阴影，所以采用了`radial-gradient`。如果你有更好的办法，欢迎留言~ 104 | 105 | ------ 106 | 107 | ### 推荐 108 | 109 | 《CSS揭秘》作者[Lea Verou](http://lea.verou.me/about/)使用CSS3渐变实现的图案库[Patterns Gallery](http://verou.me/css3patterns/#)，还有它的SVG版本[SVG Patterns Gallery](https://philiprogers.com/svgpatterns/)，有兴趣的可以去研究一下作者的实现原理。 110 | 111 | [Patterns Gallery](https://verou.me/css3patterns ':include :type=iframe width=100% height=429px') 112 | 113 | ### 浏览器支持 114 | 115 | 121 | -------------------------------------------------------------------------------- /zh-cn/custom-checkbox.md: -------------------------------------------------------------------------------- 1 | # 自定义复选框 2 | 3 | ?> 背景知识：:point_right: [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform) 4 | 5 | 6 | 7 | 99 | 100 | 101 | > 创造良好的用户体验应当养成一种习惯~ 102 | 103 | ### 浏览器支持 104 | 105 | 111 | 112 | 118 | -------------------------------------------------------------------------------- /zh-cn/custom-radio.md: -------------------------------------------------------------------------------- 1 | # 自定义单选框 2 | 3 | ?> 背景知识：:point_right: [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform) 4 | 5 | 6 | 7 | 100 | 101 | 102 | > 创造良好的用户体验应当养成一种习惯~ 103 | 104 | ### 浏览器支持 105 | 106 | 112 | 113 | 119 | -------------------------------------------------------------------------------- /custom-checkbox.md: -------------------------------------------------------------------------------- 1 | # Custom checkboxes 2 | 3 | ?> Background：:point_right: [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform) 4 | 5 | 6 | 7 | 99 | 100 | 101 | > Greate user experience should always go first as a habit ~ 102 | 103 | ### Browser Support 104 | 105 | 111 | 112 | 118 | -------------------------------------------------------------------------------- /custom-variables.md: -------------------------------------------------------------------------------- 1 | 2 | # ⚗️ Custom variables 3 | 4 | ?> Background：:point_right: [CSS_variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)，[var()](https://developer.mozilla.org/en-US/docs/Web/CSS/var) 5 | 6 | CSS variables are similar to the variables we defined in SCSS and LESS. The difference is that CSS supports for inserting the values of CSS variable through JS. Variable's name represented by an identifier that starts with two dashes `--` (e.g. `--main-color: #b4a078`), then use the `var(--main-color)` function to reference it. 7 | 8 | The `var()` function accepts two arguments (e.g. `var(--main-color, gray)`）, the first argument is the name of the custom property to be substituted, the optional second argument to the function serves as a fallback value. 9 | 10 | > The following example presents how to adjust the style of elements or even pseudo elements by JS [setProperty](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty) 11 | 12 | 13 | 14 | 107 | 108 | 109 | !> To set specific values, please revise the value of `INITIAL_COLOR` simply in the example. **Only support 6-digit hexadecimal color format** 110 | 111 | ### Browser Support 112 | 113 | 119 | -------------------------------------------------------------------------------- /custom-radio.md: -------------------------------------------------------------------------------- 1 | # Custom radios 2 | 3 | ?> Background: :point_right: [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform) 4 | 5 | 6 | 7 | 100 | 101 | 102 | > Greate user experience should always go first as a habit ~ 103 | 104 | ### Browser Support 105 | 106 | 112 | 113 | 119 | -------------------------------------------------------------------------------- /double-wing-layout.md: -------------------------------------------------------------------------------- 1 | 2 | # Double wing layout 3 | 4 | The requirements of this layout are the same as [Holy grail layout](https://lhammer.cn/You-need-to-know-css/#/holy-grail-layout) : three-column with two sides are equally wide and the adaptive middle part. Soucring from Taobao UED. 5 | 6 | 7 | 8 | 84 | 85 | 86 | ### The differences between Holy-grial double-wing layout 87 | 88 | The solution for solving the problem between the Holy Grail layout and the double-wing layout is the same in the first half, that is, all three `float` floats, but the left and right columns plus the negative `margin` are arranged side by side with the middle column `div` to form a three-column layout. 89 | 90 | The difference lies in the scheme that solve the problem of "the middle column div content". The Holy grail layout, in order to prevent the middle `div` content from being occluded, it sets the `div` in the middle to the left and right `padding-left` and `padding-right`, and for the left and right `div`s are relative layout position: `relative` and respectively match the , so that it won't obstruct the middle `div` after moving `right` and `left` properties . 91 | 92 | The double-wing layout, in order to prevent the middle `div` content from being occluded, directly creates a sub-div inside the middle `div` for placing content, and uses `margin-left` and `margin-right` to set a position for the left and right `div`s in the sub-div. One more div, less than roughly four css attributes (the two properties of the `padding-left` and `padding-right` for the middle `div` of the holy grial layout, plus the left and right `div`s with relative layout position: relative and corresponding right and left total of 4 attributes, so its 6 in total; While the double-wing layout sub-div uses total of two attributes : `margin-left` and `margin-right`, 6-2=4). Personaly speaking, double-wing layout is more direct and concise than the holy-grail layout. 93 | 94 | ?> Author：Yanqing Lv
95 | Link：https://www.zhihu.com/question/21504052/answer/50053054
96 | Source：zhihu
97 | Copyright is owned by the author. For commercial reprint, please contact the author for authorization. For non-commercial reprint, please indicate the source. 98 | -------------------------------------------------------------------------------- /zh-cn/bevel-corners.md: -------------------------------------------------------------------------------- 1 | 2 | # 切角效果 3 | 4 | ?> 背景知识：:point_right: [gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient), [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path) 5 | 6 | 7 | 8 | 85 | 86 | 87 | ### 浏览器支持 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /zh-cn/image-slider.md: -------------------------------------------------------------------------------- 1 | 2 | # 交互式图片对比控件 3 | 4 | ?> 背景知识：:point_right: [resize](https://developer.mozilla.org/zh-CN/docs/Web/CSS/resize), HTML < [input[type=range]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) > 5 | 6 | 7 | 8 | 116 | 117 | 118 | > 创造良好的用户体验应当养成一种习惯~ 119 | 120 | ### 浏览器支持 121 | 122 | 128 | 129 | 135 | -------------------------------------------------------------------------------- /zh-cn/circular-smooth.md: -------------------------------------------------------------------------------- 1 | 2 | # 延轨迹平滑效果 3 | 4 | ?> 背景知识：:point_right: [animation](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation), [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform), [animation-delay](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-delay) 5 | 6 | > “transform-origin 只是一个语法糖而已。实际上你总是可以用 translate() 来代替它。” [——James Anderson](/Aryeh Gregor) 7 | 8 | 9 | 10 | 117 | 118 | 119 | !> 如有疑问，后续会添加细节的讲解~ 120 | 121 | ### 浏览器支持 122 | 123 | 129 | 130 | 136 | 137 | 143 | -------------------------------------------------------------------------------- /image-slider.md: -------------------------------------------------------------------------------- 1 | 2 | # Image contrast widget 3 | 4 | ?> Background：:point_right: [resize](https://developer.mozilla.org/zh-CN/docs/Web/CSS/resize), HTML < [input[type=range]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) > 5 | 6 | 7 | 8 | 116 | 117 | 118 | > Greate user experience should always go first as a habit ~ 119 | 120 | ### Browser Support 121 | 122 | 128 | 129 | 135 | -------------------------------------------------------------------------------- /circular-smooth.md: -------------------------------------------------------------------------------- 1 | 2 | # Circular smooth 3 | 4 | ?> Background：:point_right: [animation](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation), [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform), [animation-delay](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-delay) 5 | 6 | > "Transform-origin is just a syntactic sugar. In fact, you can always use translate() instead." [——James Anderson](/Aryeh Gregor) 7 | 8 | 9 | 10 | 117 | 118 | 119 | !> If any questions, please keep following the continued explanation. 120 | 121 | ### Browser Support 122 | 123 | 129 | 130 | 136 | 137 | 143 | -------------------------------------------------------------------------------- /bevel-corners.md: -------------------------------------------------------------------------------- 1 | 2 | # Cutout corners 3 | 4 | ?> Background：:point_right: [gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient), [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path) 5 | 6 | 7 | 8 | 85 | 86 | 87 | ### Browser Support 88 | 89 | 95 | 96 | 102 | -------------------------------------------------------------------------------- /stripes-background.md: -------------------------------------------------------------------------------- 1 | 2 | # Stripe background 3 | 4 | ?> Background：:point_right: [gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient), [linear-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient), [radial-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient), [repeating-linear-gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeating-linear-gradient) 5 | 6 | Linear gradient `linear-gradient` is a very important module of CSS3, but in real development, they are not commonly used. Here, I will give two scenarios that I often use, namely `progress bar` and ` Irregular card` 7 | 8 | ## progress bar 9 | 10 | 11 | 12 |
13 | 14 | > Work overtime today. 15 | 16 | 17 | 18 | 63 | 64 | 65 | ## Irregular card 66 | 67 | 68 | 69 |
70 | 71 | 74 | 75 | > Today's work is seriously overtime. 76 | 77 | 78 | 79 | 101 | 102 | 103 | > In the example above, to achieve: a shadow of the welt effect added when hovering, so we apply the `radial-gradient`. If you have better propose, welcome to leave a message ~ 104 | 105 | ------ 106 | 107 | ### Recommendation 108 | 109 | 《CSS Secrets》author [Lea Verou](http://lea.verou.me/about/) uses the CSS3 gradient to implement the pattern library [Patterns Gallery](http://verou.me/css3patterns/#)，and its SVG version [SVG Patterns Gallery](https://philiprogers.com/svgpatterns/), if you are interested, it would be very helpful to research the author's implementation principle. 110 | 111 | [Patterns Gallery](https://verou.me/css3patterns ':include :type=iframe width=100% height=429px') 112 | 113 | ### Browser Support 114 | 115 | 121 | -------------------------------------------------------------------------------- /zh-cn/polygon.md: -------------------------------------------------------------------------------- 1 | 2 | # 其他多边形 3 | 4 | ?> 背景知识：:point_right: [box-sizing](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform) 5 | 6 | > *{ box-sizing: border-box; } 7 | 8 | 9 | 10 | 159 | 160 | 161 | ### 浏览器支持 162 | 163 | 169 | 170 | 176 | -------------------------------------------------------------------------------- /polygon.md: -------------------------------------------------------------------------------- 1 | 2 | # Polygon 3 | 4 | ?> Background：:point_right: [box-sizing](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform) 5 | 6 | > *{ box-sizing: border-box; } 7 | 8 | 9 | 10 | 159 | 160 | 161 | ### Browser Support 162 | 163 | 169 | 170 | 176 | --------------------------------------------------------------------------------