Skip to content

Commit 47c42bb

Browse files
author
宋慧武
committed
🎉initial commit
0 parents  commit 47c42bb

File tree

104 files changed

+8942
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

104 files changed

+8942
-0
lines changed

Diff for: ‎.github/CONTRIBUTING.md

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
<vuep template="#CONTRIBUTING"></vuep>
10+
11+
<script v-pre type="text/x-template" id="CONTRIBUTING">
12+
<style>
13+
Style
14+
</style>
15+
<template>
16+
HTML
17+
</template>
18+
<script>
19+
Javascript
20+
</script>
21+
</script>
22+
```
23+
24+
### 浏览器支持
25+
26+
```html
27+
<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=XXX&amp;periods=future_1,current,past_1,past_2,past_3&amp;accessible-colours=false" frameborder="0" width="100%" height="458px"></iframe>
28+
```

Diff for: ‎.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log*
5+
yarn-debug.log*
6+

Diff for: ‎.nojekyll

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

Diff for: ‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2018 LHammer
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

Diff for: ‎README.md

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
2+
<p align="center">
3+
<a href="https://lhammer.cn/You-need-to-know-css/#/">
4+
<img src="./static/logo.png" width="152">
5+
</a>
6+
<h3 align="center">You-need-to-know-css</h3>
7+
<p align="center">
8+
<a href="https://gitter.im/You-need-to-know-css/Lobby"><img src="https://badges.gitter.im/You-need-to-know-css/Lobby.svg"></a>
9+
<a href="https://github.com/l-hammer/You-need-to-know-css/blob/master/LICENSE"><img src="https://img.shields.io/github/license/l-hammer/You-need-to-know-css.svg??colorB=brightgreen"></a>
10+
<a href="https://juejin.im/post/5aab4f985188255582521c57"><img src="https://img.shields.io/badge/%E6%8E%98%E9%87%91-1.2k%20likes-brightgreen.svg"></a>
11+
<a href="https://codeclimate.com/github/l-hammer/You-need-to-know-css/maintainability"><img src="https://api.codeclimate.com/v1/badges/dfba02247f296387a1a7/maintainability" /></a>
12+
<a href="https://github.com/l-hammer/You-need-to-know-css"><img src="https://img.shields.io/github/stars/l-hammer/You-need-to-know-css.svg?style=social"></a>
13+
</p>
14+
<p align="center">
15+
CSS tricks web developers need to know<br>
16+
</p>
17+
</p>
18+
19+
20+
## View online
21+
22+
🌏 [You-need-to-know-css](https://lhammer.cn/You-need-to-know-css/#/)
23+
24+
25+
## Quick start
26+
27+
Several quick start options are available:
28+
29+
- Clone the repo: `https://github.com/l-hammer/You-need-to-know-css.git`
30+
- Install docsify with [docsify](https://docsify.js.org/#/): `npm install docsify-cli -g (or yarn global add docsify-cli)`
31+
- Development run `docsify serve`
32+
- Open `http://localhost:3000` in your browser.
33+
34+
35+
## What's included
36+
37+
| [![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)|
38+
|:--|:--|:--|
39+
| [![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) |
40+
|[![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) |
41+
|[![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) |
42+
|[![毛玻璃效果](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) |
43+
|[![环形文字](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) |
44+
|[![自定义复选框](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) |
45+
|[![通过阴影弱化背景](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) |
46+
|[![全背景下等宽内容居中](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) |
47+
|[![弹性过度](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) |
48+
|[![抖动效果](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) |
49+
|[![自定义文字下划线](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) |
50+
|[![圣杯布局](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) |
51+
|[![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) |
52+
|[![插入换行](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) |
53+
54+
55+
## Contributing ![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?longCache=true&style=flat-square)
56+
57+
- :fork_and_knife:Fork it!
58+
- :twisted_rightwards_arrows:Create your branch: `git checkout -b new-branch`
59+
- :wrench:Make your changes
60+
- :memo:Commit your changes: `git commit -am 'Add some feature'`
61+
- :rocket:Push to the branch: `git push origin new-branch`
62+
- :tada:Submit a pull request
63+
64+
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:
65+
66+
## Backers ![donate](https://img.shields.io/badge/%E2%98%95-Buy%20Me%20A%20Coffee-%23be4141.svg?style=flat-square&colorB=00A862)
67+
68+
If you find this project useful, you can buy me a coffee ☕, Thank you! 🙏🏻 🙏 🙏🏿
69+
70+
<img src="./static/reward-code.png" width="280"> <br><br>
71+
72+
If you provide your github in the message, it will show up here with a link to your github.
73+
74+
<a href="https://github.com/fqs617" target="_blank"><img src="https://avatars3.githubusercontent.com/u/23302051?s=460&v=4" width="29" style="border-radius: 50%"></a>
75+
<a href="https://github.com/ElivesHuangGit" target="_blank"><img src="https://avatars0.githubusercontent.com/u/36831410?s=460&v=4" width="29" style="border-radius: 50%"></a>
76+
<a href="https://github.com/StaminaWang" target="_blank"><img src="https://avatars1.githubusercontent.com/u/19159159?s=460&v=4" width="29" style="border-radius: 50%"></a>
77+
78+
## license
79+
80+
[![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)
81+
82+
[MIT](https://github.com/l-hammer/You-need-to-know-css/blob/master/LICENSE) © 2017-present, LHammer

Diff for: ‎_sidebar.md

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
- **介绍**
2+
- [关于CSS Tricks](/introduce.md?v=1)
3+
- **边框与背景**
4+
- [半透明边框](/translucent-borders.md)
5+
- [多重边框](/multiple-borders.md)
6+
- [边框内圆角](/inner-rounding.md)
7+
- [背景定位](/extended-bg-position.md)
8+
- [条纹背景](/stripes-background.md)
9+
- [1px 线/边](/one-pixel-line.md)
10+
- **常见形状**
11+
- [圆与椭圆](/ellipse.md)
12+
- [parallel四边形](/parallelogram.md)
13+
- [切角效果](/bevel-corners.md)
14+
- [简易饼图](/pie-chart.md)
15+
- [提示气泡](/poptip.md)
16+
- [其他多边形](/polygon.md)
17+
- **视觉效果**
18+
- [常见投影](/single-projection.md)
19+
- [不规则投影](/irregular-projection.md)
20+
- [毛玻璃效果](/frosted-glass.md)
21+
- [斑马条纹](/zebra-stripes.md)
22+
- [文字特效](/text-effects.md)
23+
- [环形文字](/circular-text.md)
24+
- [插入换行](line-breaks.md)
25+
- [图片对比控件](/image-slider.md)
26+
- **用户体验**
27+
- [选择合适的鼠标光标](/mouse-cursor.md)
28+
- [扩大可点击区域](/extend-hit-area.md)
29+
- [自定义复选框](/custom-checkbox.md)
30+
- [自定义单选框](/custom-radio.md)
31+
- [输入框完美居中](/input-align.md)
32+
- [通过阴影弱化背景](/shadow-weaken-background.md)
33+
- [通过模糊弱化背景](/blurry-weaken-background.md)
34+
- [自定义文字下划线](/text-underline.md)
35+
- [自定义scroll滚动条](/scrollbar.md)
36+
- **结构布局**
37+
- [全背景等宽内容居中](/fluid-fixed.md)
38+
- [绝对底部](/sticky-footer.md)
39+
- [水平垂直居中](/centering-known.md)
40+
- [圣杯布局](/holy-grail-layout.md?v=1)
41+
- [双飞翼布局](/double-wing-layout.md?v=1)
42+
- [类订单布局](/class-order-layout.md)
43+
- [Flex布局](/flexbox-layout.md)
44+
- **动画过渡**
45+
- [弹跳效果](/bounce.md)
46+
- [弹性过度](/elastic.md)
47+
- [闪烁效果](/blink.md)
48+
- [打字效果](/typing.md)
49+
- [抖动效果](/shake.md)
50+
- [无缝平滑效果](/smooth.md)
51+
- [延轨迹平滑效果](/circular-smooth.md)
52+
<!-- - [掘金沸点点赞效果](hotspot-like) -->
53+
- **其他**
54+
- [自定义变量](/custom-variables.md)
55+
- [有趣的项目](/interesting-usage.md)

Diff for: ‎assets/common.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
input {
2+
padding: .8em;
3+
outline: none;
4+
border: 1px solid #e3e3e3;
5+
border-radius: 2px;
6+
}
7+
input:hover {
8+
border: 1px solid #b4a078;
9+
}
10+
input:focus {
11+
border: 1px solid #b4a078;
12+
box-shadow: 0 0 0 2px rgba(180, 160, 120, 0.2);
13+
}

0 commit comments

Comments
 (0)