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: about 2 months 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 (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-07-28T04:37:15.000Z (9 months ago)
- Last Synced: 2024-10-29T15:39:11.532Z (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.31 MB
- Stars: 5,298
- Watchers: 89
- Forks: 607
- 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
| [](https://lhammer.cn/You-need-to-know-css/#/translucent-borders) | [](https://lhammer.cn/You-need-to-know-css/#/multiple-borders) | [](https://lhammer.cn/You-need-to-know-css/#/inner-rounding)|
|:--|:--|:--|
| [](https://lhammer.cn/You-need-to-know-css/#/extended-bg-position) | [](https://lhammer.cn/You-need-to-know-css/#/stripes-background) | [](https://lhammer.cn/You-need-to-know-css/#/ellipse) |
|[](https://lhammer.cn/You-need-to-know-css/#/parallelogram) | [](https://lhammer.cn/You-need-to-know-css/#/bevel-corners) | [](https://lhammer.cn/You-need-to-know-css/#/pie-chart) |
|[](https://lhammer.cn/You-need-to-know-css/#/polygon) | [](https://lhammer.cn/You-need-to-know-css/#/single-projection) | [](https://lhammer.cn/You-need-to-know-css/#/irregular-projection) |
|[](https://lhammer.cn/You-need-to-know-css/#/frosted-glass) | [](https://lhammer.cn/You-need-to-know-css/#/zebra-stripes) | [](https://lhammer.cn/You-need-to-know-css/#/text-effects) |
|[](https://lhammer.cn/You-need-to-know-css/#/circular-text) | [](https://lhammer.cn/You-need-to-know-css/#/mouse-cursor) | [](https://lhammer.cn/You-need-to-know-css/#/extend-hit-area) |
|[](https://lhammer.cn/You-need-to-know-css/#/custom-checkbox) | [](https://lhammer.cn/You-need-to-know-css/#/custom-radio) | [](https://lhammer.cn/You-need-to-know-css/#/input-align) |
|[](https://lhammer.cn/You-need-to-know-css/#/shadow-weaken-background) | [](https://lhammer.cn/You-need-to-know-css/#/blurry-weaken-background) | [](https://lhammer.cn/You-need-to-know-css/#/image-slider) |
|[](https://lhammer.cn/You-need-to-know-css/#/fluid-fixed) | [](https://lhammer.cn/You-need-to-know-css/#/sticky-footer) | [](https://lhammer.cn/You-need-to-know-css/#/centering-known) |
|[](https://lhammer.cn/You-need-to-know-css/#/elastic) | [](https://lhammer.cn/You-need-to-know-css/#/blink) | [](https://lhammer.cn/You-need-to-know-css/#/typing) |
|[](https://lhammer.cn/You-need-to-know-css/#/shake) | [](https://lhammer.cn/You-need-to-know-css/#/smooth) | [](https://lhammer.cn/You-need-to-know-css/#/circular-smooth) |
|[](https://lhammer.cn/You-need-to-know-css/#/text-underline) | [](https://lhammer.cn/You-need-to-know-css/#/poptip) | [](https://lhammer.cn/You-need-to-know-css/#/scrollbar) |
|[](https://lhammer.cn/You-need-to-know-css/#/holy-grail-layout) | [](https://lhammer.cn/You-need-to-know-css/#/double-wing-layout) | [](https://lhammer.cn/You-need-to-know-css/#/class-order-layout) |
|[](https://lhammer.cn/You-need-to-know-css/#/flexbox-layout) | [](https://lhammer.cn/You-need-to-know-css/#/one-pixel-line) | [](https://lhammer.cn/You-need-to-know-css/#/bounce) |
|[](https://lhammer.cn/You-need-to-know-css/#/line-breaks) | [](https://lhammer.cn/You-need-to-know-css/#/custom-variables) | [](https://lhammer.cn/You-need-to-know-css/#/interesting-usage) |
## Contributing 
- :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 
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
[](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