Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/l-hammer/You-need-to-know-css

💄CSS tricks for web developers~
https://github.com/l-hammer/You-need-to-know-css

css css-animations css-center css-effects css-experiment css-flexbox css-layout css-properties css-scrollbar css-shadow-parts css-shapes css-snippets css-transitions css-tricks css-variables css3 cssnext docsify pseudo-elements

Last synced: 14 days ago
JSON representation

💄CSS tricks for web developers~

Host: GitHub
URL: https://github.com/l-hammer/You-need-to-know-css
Owner: l-hammer
License: other
Created: 2017-12-01T08:16:13.000Z (almost 7 years ago)
Default Branch: master
Last Pushed: 2022-08-11T03:21:36.000Z (about 2 years ago)
Last Synced: 2024-05-22T18:31:07.890Z (6 months ago)
Topics: css, css-animations, css-center, css-effects, css-experiment, css-flexbox, css-layout, css-properties, css-scrollbar, css-shadow-parts, css-shapes, css-snippets, css-transitions, css-tricks, css-variables, css3, cssnext, docsify, pseudo-elements
Language: CSS
Homepage: https://lhammer.cn/You-need-to-know-css/
Size: 5.13 MB
Stars: 5,130
Watchers: 86
Forks: 602
Open Issues: 53
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

awesome-learning - l-hammer/You-need-to-know-css

README

        


  

    

  

  
You-need-to-know-css

  

     

    

    

    

     

    

  

  

    CSS tricks web developers need to know


  


## View online

🌏 [You-need-to-know-css](https://lhammer.cn/You-need-to-know-css/#/)

## Quick start

Several quick start options are available:

- Clone the repo: `https://github.com/l-hammer/You-need-to-know-css.git`

- Install docsify with [docsify](https://docsify.js.org/#/): `npm install docsify-cli -g (or yarn global add docsify-cli)`

- Development run `docsify serve`

- Open `http://localhost:3000` in your browser.

## What's included

| [![translucent-borders](https://img.shields.io/badge/translucent%20borders-%E5%8D%8A%E9%80%8F%E6%98%8E%E8%BE%B9%E6%A1%86-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/translucent-borders) | [![multiple-borders](https://img.shields.io/badge/multiple%20borders-%E5%A4%9A%E9%87%8D%E8%BE%B9%E6%A1%86-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/multiple-borders) | [![inner-rounding](https://img.shields.io/badge/inner%20rounding-%E8%BE%B9%E6%A1%86%E5%86%85%E5%9C%86%E8%A7%92-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/inner-rounding)|

|:--|:--|:--|

| [![background-position](https://img.shields.io/badge/background%20position-%E8%83%8C%E6%99%AF%E5%AE%9A%E4%BD%8D-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/extended-bg-position) | [![stripes-background](https://img.shields.io/badge/stripes%20background-%E6%9D%A1%E7%BA%B9%E8%83%8C%E6%99%AF-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/stripes-background) | [![ellipse](https://img.shields.io/badge/ellipse-%E5%9C%86%2F%E6%A4%AD%E5%9C%86-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/ellipse) | 

|[![parallelogram](https://img.shields.io/badge/parallelogram-%E5%B9%B3%E8%A1%8C%E5%9B%9B%E8%BE%B9%E5%BD%A2-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/parallelogram) | [![bevel-corners](https://img.shields.io/badge/bevel%20corners-%E5%88%87%E8%A7%92%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/bevel-corners) | [![pie-chart](https://img.shields.io/badge/pie%20chart-%E7%AE%80%E6%98%93%E9%A5%BC%E5%9B%BE-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/pie-chart) |

|[![polygon](https://img.shields.io/badge/polygon-%E5%85%B6%E4%BB%96%E5%A4%9A%E8%BE%B9%E5%BD%A2-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/polygon) | [![single-projection](https://img.shields.io/badge/single%20projection-%E5%B8%B8%E8%A7%81%E6%8A%95%E5%BD%B1-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/single-projection) | [![不规则投影](https://img.shields.io/badge/irregular%20projection-%E4%B8%8D%E8%A7%84%E5%88%99%E6%8A%95%E5%BD%B1-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/irregular-projection) |

|[![毛玻璃效果](https://img.shields.io/badge/frosted%20glass-%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/frosted-glass) | [![文本行斑马条纹](https://img.shields.io/badge/zebra%20stripes-%E6%96%87%E6%9C%AC%E8%A1%8C%E6%96%91%E9%A9%AC%E6%9D%A1%E7%BA%B9-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/zebra-stripes) | [![常见的文字效果](https://img.shields.io/badge/text%20effects-%E5%B8%B8%E8%A7%81%E7%9A%84%E6%96%87%E5%AD%97%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/text-effects) |

|[![环形文字](https://img.shields.io/badge/circular%20text-%E7%8E%AF%E5%BD%A2%E6%96%87%E5%AD%97-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/circular-text) | [![选择合适的鼠标光标](https://img.shields.io/badge/mouse%20cursor-%E9%80%89%E6%8B%A9%E5%90%88%E9%80%82%E7%9A%84%E9%BC%A0%E6%A0%87%E5%85%89%E6%A0%87-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/mouse-cursor) | [![扩大可点击区域](https://img.shields.io/badge/extend%20hit%20area-%E6%89%A9%E5%A4%A7%E5%8F%AF%E7%82%B9%E5%87%BB%E5%8C%BA%E5%9F%9F-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/extend-hit-area) |

|[![自定义复选框](https://img.shields.io/badge/custom%20checkbox-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%8D%E9%80%89%E6%A1%86-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/custom-checkbox) | [![自定义单选框](https://img.shields.io/badge/custom%20radio-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8D%95%E9%80%89%E6%A1%86-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/custom-radio) | [![输入框完美居中](https://img.shields.io/badge/input%20align-%E8%BE%93%E5%85%A5%E6%A1%86%E5%AE%8C%E7%BE%8E%E5%B1%85%E4%B8%AD-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/input-align) |

|[![通过阴影弱化背景](https://img.shields.io/badge/shadow%20weaken%20background-%E9%80%9A%E8%BF%87%E9%98%B4%E5%BD%B1%E5%BC%B1%E5%8C%96%E8%83%8C%E6%99%AF-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/shadow-weaken-background) | [![通过模糊弱化背景](https://img.shields.io/badge/blurry%20weaken%20background-%E9%80%9A%E8%BF%87%E6%A8%A1%E7%B3%8A%E5%BC%B1%E5%8C%96%E8%83%8C%E6%99%AF-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/blurry-weaken-background) | [![交互式图片对比控件](https://img.shields.io/badge/image%20slider-%E4%BA%A4%E4%BA%92%E5%BC%8F%E5%9B%BE%E7%89%87%E5%AF%B9%E6%AF%94%E6%8E%A7%E4%BB%B6-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/image-slider) |

|[![全背景下等宽内容居中](https://img.shields.io/badge/fluid%20fixed-%E5%85%A8%E8%83%8C%E6%99%AF%E4%B8%8B%E7%AD%89%E5%AE%BD%E5%86%85%E5%AE%B9%E5%B1%85%E4%B8%AD-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/fluid-fixed) | [![绝对底部](https://img.shields.io/badge/sticky%20footer-%E7%BB%9D%E5%AF%B9%E5%BA%95%E9%83%A8-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/sticky-footer) | [![水平垂直居中](https://img.shields.io/badge/center-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/centering-known) |

|[![弹性过度](https://img.shields.io/badge/elastic-%E5%BC%B9%E6%80%A7%E8%BF%87%E5%BA%A6-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/elastic) | [![闪烁效果](https://img.shields.io/badge/blink-%E9%97%AA%E7%83%81%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/blink) | [![打字效果](https://img.shields.io/badge/typing-%E6%89%93%E5%AD%97%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/typing) |

|[![抖动效果](https://img.shields.io/badge/shake-%E6%8A%96%E5%8A%A8%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/shake) | [![无缝平滑效果](https://img.shields.io/badge/smooth-%E6%97%A0%E7%BC%9D%E5%B9%B3%E6%BB%91%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/smooth) | [![延轨迹平滑效果](https://img.shields.io/badge/circular%20smooth-%E5%BB%B6%E8%BD%A8%E8%BF%B9%E5%B9%B3%E6%BB%91%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/circular-smooth) |

|[![自定义文字下划线](https://img.shields.io/badge/custom%20text%20underline-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%87%E5%AD%97%E4%B8%8B%E5%88%92%E7%BA%BF-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/text-underline) | [![提示气泡](https://img.shields.io/badge/poptip-%E6%8F%90%E7%A4%BA%E6%B0%94%E6%B3%A1-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/poptip) | [![自定义滚动条](https://img.shields.io/badge/custom%20scrollbar-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%BB%9A%E5%8A%A8%E6%9D%A1-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/scrollbar) |

|[![圣杯布局](https://img.shields.io/badge/holy%20grail%20layout-%E5%9C%A3%E6%9D%AF%E5%B8%83%E5%B1%80-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/holy-grail-layout) | [![双飞翼布局](https://img.shields.io/badge/double%20wing%20layout-%E5%8F%8C%E9%A3%9E%E7%BF%BC%E5%B8%83%E5%B1%80-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/double-wing-layout) | [![类订单布局](https://img.shields.io/badge/class%20order%20layout-%E7%B1%BB%E8%AE%A2%E5%8D%95%E5%B8%83%E5%B1%80-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/class-order-layout) |

|[![Flex 布局](https://img.shields.io/badge/flexbox%20layout-Flex%E5%B8%83%E5%B1%80-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/flexbox-layout) | [![1px 线/边](https://img.shields.io/badge/one%20pixel%20line-1px%20%E7%BA%BF%2F%E8%BE%B9-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/one-pixel-line) | [![弹跳效果](https://img.shields.io/badge/bounce-%E5%BC%B9%E8%B7%B3%E6%95%88%E6%9E%9C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/bounce) |

|[![插入换行](https://img.shields.io/badge/line%20breaks-%E6%8F%92%E5%85%A5%E6%8D%A2%E8%A1%8C-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/line-breaks) | [![自定义变量](https://img.shields.io/badge/custom%20variables-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8F%98%E9%87%8F-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/custom-variables) | [![有趣的项目](https://img.shields.io/badge/interesting-%E6%9C%89%E8%B6%A3%E7%9A%84%E9%A1%B9%E7%9B%AE-b4a078.svg)](https://lhammer.cn/You-need-to-know-css/#/interesting-usage) |

## Contributing ![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?longCache=true&style=flat-square)

- :fork_and_knife:Fork it!

- :twisted_rightwards_arrows:Create your branch: `git checkout -b new-branch`

- :wrench:Make your changes

- :memo:Commit your changes: `git commit -am 'Add some feature'`

- :rocket:Push to the branch: `git push origin new-branch`

- :tada:Submit a pull request

or submit an [issue](https://github.com/l-hammer/You-need-to-know-css/issues) - any helpful suggestions are welcomed. :stuck_out_tongue_winking_eye:

------

This project exists thanks to all the people who contribute. 



## Donate ![donate](https://img.shields.io/badge/%E2%98%95-Buy%20Me%20A%20Coffee-%23be4141.svg?style=flat-square&colorB=00A862)

If you find this project useful, you can buy me a coffee ☕, Thank you! 🙏🏻 🙏 🙏🏿

 



If you provide your github in the message, it will show up here with a link to your github.







## Backers

Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/You-need-to-know-css#backer)]



## Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/You-need-to-know-css#sponsor)]





## license

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fl-hammer%2FYou-need-to-know-css.svg?type=small)](https://app.fossa.io/projects/git%2Bgithub.com%2Fl-hammer%2FYou-need-to-know-css?ref=badge_small)

[996ICU](https://github.com/l-hammer/You-need-to-know-css/blob/master/LICENSE) © 2017-present, LHammer