摘要:标题中的 Cascading 亦可以理解为级联。 进入正文,这是一个很有意思的现象。可以直接跳到 总结一下 部分,看完再回过头来阅读本文。 引子 假设我们有如下结构: 上面的 p 标签只有一个内联 CSS,很明显,在没有其他样式的干预下,文本 .txt 的颜色肯定就是红色的。 如果此时,我们希望改变 阅读全文
posted @ 2020-01-16 11:44 ChokCoco 阅读 (959) 评论 (6) 编辑
摘要:循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果。 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了。有了电池,那接下来直接充电吧。最最简单的动画,那应该是用色彩把整个电池灌满即可。 方法很多,代码也很简单,直接看效果: 有内味了,如果 阅读全文
posted @ 2019-12-23 10:31 ChokCoco 阅读 (3886) 评论 (19) 编辑
摘要:根据 CSS Scroll Snap Module Level 1 规范,CSS 新增了一批能够控制滚动的属性,让滚动能够在仅仅通过 CSS 的控制下,得到许多原本需要 JS 脚本介入才能实现的美好交互。 Tips:本文截的一些 Gif 图涉及容器滚动,效果不是很好,可以点进 Demo 里实际感受下 阅读全文
posted @ 2019-12-06 10:57 ChokCoco 阅读 (556) 评论 (1) 编辑
摘要:最近一直在使用 css-doodle 实现一些 CSS 效果。 css-doodle 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面,以实现各种 CSS 效果(或许可以称之为 CSS 艺术)。后续几篇文章可能都会与之有关。 当然,本文的主角并不是 阅读全文
posted @ 2019-11-22 10:41 ChokCoco 阅读 (1622) 评论 (5) 编辑
摘要:本技巧来自这篇文章 -- How to animate box-shadow with silky smooth performance 本文不是直译,因为觉得这个技巧很有意思很有用,遂起一文。 box-shadow 在我们的工作中使用以及越来越多,伴随阴影的动画或多或少都有一点。假设,我们有下面这 阅读全文
posted @ 2019-10-31 10:38 ChokCoco 阅读 (720) 评论 (1) 编辑
摘要:本文是内部的一次分享沉淀,偏向基础但是涉及了一些有意思的细节,文笔有限,才疏学浅,文中若有不正之处,万望告知。 前端的一大工作内容就是去兼容页面在不同内核的浏览器,不同的设备,不同的分辨率下的行为,使页面的能正常工作在各种各样的宿主环境当中。 而本文的主题 -- 移动端开发的兼容适配与性能优化,就是 阅读全文
posted @ 2019-09-05 11:14 ChokCoco 阅读 (2938) 评论 (7) 编辑
摘要:之前写过一篇关于Web字体简介及使用技巧的文章: 你该知道的字体 font-family。 该篇文章基本没有太多移动端的字体选择及分析。并且过了这么久,如今的 Web 字体又有了一些新的东西,遂有此文。 正文从这里开始。 各大网站最新 font-family 作为前端的一个习惯,浏览各个网站的时候总 阅读全文
posted @ 2019-08-14 11:07 ChokCoco 阅读 (1388) 评论 (1) 编辑
摘要:写本文的起因是,一天在群里有同学说误打误撞下,使用负的 outline-offset 实现了加号。嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢? 使用负值 outline-offset 实现加号 假设我们有这样一个简单的结构: 修改 outline-o 阅读全文
posted @ 2019-08-08 10:30 ChokCoco 阅读 (3260) 评论 (20) 编辑
摘要:CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场景下的不同用法。 简单的语法介绍 [attr]:该选择器选择包含 attr 属性的所有元素,不论 a 阅读全文
posted @ 2019-06-18 10:47 ChokCoco 阅读 (1171) 评论 (1) 编辑
摘要:为了引出本文的主题,先看看这个问题,最快水平垂直居中一个元素的方法是什么? 水平垂直居中也算是 CSS 领域最为常见的一个问题了,不同场景下的方法也各不相同,各有优劣。嗯,下面这种应该算是最便捷的了: 上面的 display: flex 替换成 display: inline-flex | grid 阅读全文
posted @ 2019-05-23 10:56 ChokCoco 阅读 (4053) 评论 (11) 编辑