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/#/sticky-footer

Description

有趣的项目

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

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

延轨迹平滑效果

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

Description

圣杯布局

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

bevel-corners

闪烁效果

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

Description

translucent-borders

掘金沸点点赞效果

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

Description

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

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

常见投影

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

Description

home

不规则投影

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

Description

无缝平滑效果

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

Description

Im so happy to read it

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

谢谢（鞠躬！！）

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/#/bounce

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

pie-chart

通过阴影弱化背景

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

Description

关于You-need-to-know-css

输入框完美居中

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

Description

extended-bg-position

通过模糊弱化背景

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

Description

打字效果

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

Description

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

inner-rounding

文字特效

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

Description

斑马条纹

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

Description

自定义单选框

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

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/#/custom-checkbox

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

交互式图片对比控件

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

Description

stripes-background

全背景等宽内容居中

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

Description

提示气泡

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

Description

parallelogram

双飞翼布局

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

ellipse

其他多边形

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

Description

环形文字

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

Description

自定义变量

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

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

自定义scroll滚动条

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

Description

抖动效果

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

Description

multiple-borders

自定义文字下划线

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

Description

插入换行

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/#/mouse-cursor

Description

毛玻璃效果

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

Description

水平垂直居中

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

Description

弹性过度

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

Description