摘要:经常会碰到,问一个 CSS 属性,例如 position 有多少取值。 通常的回答是 static、relative、absolute 和 fixed 。当然,还有一个稍微生僻的 sticky 。其实,除此之外, CSS 属性通常还可以设置下面几个值: initial inherit unset r 阅读全文
posted @ 2021-07-22 10:20 ChokCoco 阅读(277) 评论(0) 推荐(4) 编辑
摘要:在 CSS 中,我们经常会与各种方向方位打交道。 譬如 margin、padding,它们就会有 margin-left、margin-right 或者是 padding-left、padding-right。还有定位中的 left、top、right、bottom,它们表示了上下左右不同的方位。 阅读全文
posted @ 2021-07-20 10:20 ChokCoco 阅读(1803) 评论(5) 推荐(16) 编辑
摘要:之前在这篇文章中 -- 《老生常谈之 CSS 实现三角形》,介绍了 6 种使用 CSS 实现三角形的方式。 但是其中漏掉了一个非常重要的场景,如何使用纯 CSS 实现带圆角的三角形呢?,像是这样: 本文将介绍几种实现带圆角的三角形的实现方式。 法一. 全兼容的 SVG 大法 想要生成一个带圆角的三角 阅读全文
posted @ 2021-07-14 10:15 ChokCoco 阅读(2754) 评论(1) 推荐(16) 编辑
摘要:通过本文,你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的操作,巧妙的同样实现毛玻璃效果,让这个效果真正能运用在业务当中 什么是 backdrop-filte 阅读全文
posted @ 2021-06-30 10:04 ChokCoco 阅读(5086) 评论(13) 推荐(31) 编辑
摘要:在 Web 动画方面,有一套非常经典的原则 -- Twelve basic principles of animation,也就是关于动画的 12 个基本原则(也称之为迪士尼动画原则),网上对它的解读延伸的文章也非常之多: Animation Principles for the Web [译文]网 阅读全文
posted @ 2021-06-23 10:01 ChokCoco 阅读(3113) 评论(8) 推荐(29) 编辑
摘要:本文将介绍 CSS 中一个比较有意思的伪元素 ::marker,利用它,我们可以让我们的文字序号变得更加的有意思! 什么是 ::marker CSS 伪元素 ::marker 是从 CSS Pseudo-Elements Level 3 开始新增,CSS Pseudo-Elements Level 阅读全文
posted @ 2021-06-15 10:58 ChokCoco 阅读(2635) 评论(3) 推荐(31) 编辑
摘要:经常能看到有关 CSS 绘图的文章,譬如使用纯 HTML + CSS 绘制一幅哆啦 A 梦图画。实现的方式就是通过堆叠 div,一步一步实现图画中的一块一块。这种技巧本身没有什么问题,但是就是少了一些难度,只需要有耐心,很多图形还是能够被慢慢实现出来的。 基于 CSS 绘图的这个需求,逐渐又有了新的 阅读全文
posted @ 2021-06-01 10:29 ChokCoco 阅读(2539) 评论(12) 推荐(37) 编辑
摘要:依稀记得,某年广东语文高考作文的相关描述 -- “有时,常识虽易知而难行,有时,常识须推陈而出新”。人的想象力和创造力很容易在对常识的一贯认知中被削弱。 CSS 更新之快,只能不断鞭策自己持续学习,一直呆在舒适区中,很容易就跟不上节奏。当然,不仅仅是 CSS,对于任何技术任何行业也可以套用这句话。 阅读全文
posted @ 2021-05-27 10:39 ChokCoco 阅读(2236) 评论(8) 推荐(30) 编辑
摘要:文本将介绍 CSS 媒体查询中新增的几个特性功能: prefers-reduced-motion prefers-color-scheme prefers-contrast prefers-reduced-transparency prefers-reduced-data 利用好它们,能够很好的提升 阅读全文
posted @ 2021-05-24 11:08 ChokCoco 阅读(1325) 评论(3) 推荐(8) 编辑
摘要:在之前,我介绍过几种使用纯 CSS 实现波浪效果的方式,关于它们有两篇相关的文章: 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果,思路非常有意思。 从定积分实现曲边三角形面积说起 在进入主题之前,先看看这个,在高等数学中,我们可以通 阅读全文
posted @ 2021-05-18 10:09 ChokCoco 阅读(1968) 评论(9) 推荐(17) 编辑