l-hammer/you-need-to-know-css

💄CSS tricks for web developers~

you-need-to-know-css's Issues

毛玻璃效果

https://l-hammer.github.io/You-need-to-know-css/#/frosted-glass

Description

multiple-borders

1px 线/边

https://l-hammer.github.io/You-need-to-know-css/#/one-pixel-line

You-need-to-know-css,CSS tricks web developers need to know

全背景等宽内容居中

https://l-hammer.github.io/You-need-to-know-css/#/fluid-fixed

Description

选择合适的鼠标光标

https://l-hammer.github.io/You-need-to-know-css/#/mouse-cursor

Description

扩大可点击区域

https://l-hammer.github.io/You-need-to-know-css/#/extend-hit-area

Description

延轨迹平滑效果

https://l-hammer.github.io/You-need-to-know-css/#/circular-smooth

Description

水平垂直居中

https://l-hammer.github.io/You-need-to-know-css/#/centering-known

Description

输入框完美居中

https://l-hammer.github.io/You-need-to-know-css/#/input-align

Description

文字特效

https://l-hammer.github.io/You-need-to-know-css/#/text-effects

Description

弹跳效果

https://l-hammer.github.io/You-need-to-know-css/#/bounce

You-need-to-know-css,CSS tricks web developers need to know

自定义变量

https://lhammer.cn/You-need-to-know-css/#/custom-variables

You-need-to-know-css,CSS tricks web developers need to know

自定义文字下划线

https://l-hammer.github.io/You-need-to-know-css/#/text-underline

Description

无缝平滑效果

https://l-hammer.github.io/You-need-to-know-css/#/smooth

Description

绝对底部

https://l-hammer.github.io/You-need-to-know-css/#/sticky-footer

Description

打字效果

https://l-hammer.github.io/You-need-to-know-css/#/typing

Description

常见投影

https://l-hammer.github.io/You-need-to-know-css/#/single-projection

Description

extended-bg-position

关于You-need-to-know-css

通过阴影弱化背景

https://l-hammer.github.io/You-need-to-know-css/#/shadow-weaken-background

Description

弹性过度

https://l-hammer.github.io/You-need-to-know-css/#/elastic

Description

类订单布局

https://l-hammer.github.io/You-need-to-know-css/#/class-order-layout

You-need-to-know-css,CSS tricks web developers need to know

pie-chart

其他多边形

https://l-hammer.github.io/You-need-to-know-css/#/polygon

Description

translucent-borders

环形文字

https://l-hammer.github.io/You-need-to-know-css/#/circular-text

Description

parallelogram

掘金沸点点赞效果

https://l-hammer.github.io/You-need-to-know-css/#/hotspot-like

Description

home

stripes-background

Flex布局

https://lhammer.com/You-need-to-know-css/#/flexbox-layout

You-need-to-know-css,CSS tricks web developers need to know

插入换行

https://l-hammer.github.io/You-need-to-know-css/#/line-breaks

You-need-to-know-css,CSS tricks web developers need to know

自定义单选框

https://l-hammer.github.io/You-need-to-know-css/#/custom-radio

Description

抖动效果

https://l-hammer.github.io/You-need-to-know-css/#/shake

Description

交互式图片对比控件

https://l-hammer.github.io/You-need-to-know-css/#/image-slider

Description

提示气泡

https://l-hammer.github.io/You-need-to-know-css/#/poptip

Description

ellipse

圣杯布局

https://l-hammer.github.io/You-need-to-know-css/#/holy-grail-layout

You-need-to-know-css,CSS tricks web developers need to know

不规则投影

https://l-hammer.github.io/You-need-to-know-css/#/irregular-projection

Description

自定义scroll滚动条

https://l-hammer.github.io/You-need-to-know-css/#/scrollbar

Description

双飞翼布局

https://l-hammer.github.io/You-need-to-know-css/#/double-wing-layout

You-need-to-know-css,CSS tricks web developers need to know

inner-rounding

闪烁效果

https://l-hammer.github.io/You-need-to-know-css/#/blink

Description

有趣的项目

https://lhammer.cn/You-need-to-know-css/#/interesting-usage

You-need-to-know-css,CSS tricks web developers need to know

bevel-corners

斑马条纹

https://l-hammer.github.io/You-need-to-know-css/#/zebra-stripes

Description

通过模糊弱化背景

https://l-hammer.github.io/You-need-to-know-css/#/blurry-weaken-background

Description

Im so happy to read it

真的非常好，基本CSS的部分常用的知识都总结了 ，我平常一直收藏着，经常会看一看，平常也会安利给其他小朋友，不知道为什么从8月20号左右就进不去页面了，真的非常可惜，因为里面的知识点确实帮了我大忙，有些样式方面为什么要那么写，我都还没弄懂原理，真的非常感谢作者

谢谢（鞠躬！！）

progress 中 的动画 panoramic 是不是忘了加上去？

在 滚动条 中，类progress-bg的animation: panoramic 20s linear infinite; 中的 panoramic 作者是忘了贴代码吗？

自定义复选框

https://l-hammer.github.io/You-need-to-know-css/#/custom-checkbox

Description