摘要:在日常布局当中,肯定经常会遇到文本内容超过容器的情况。非常常见的一种解决方案是超出省略。 但是,有的时候,由于场景的限制,可能会出现在一些无法使用超出打点省略的方法的场景,譬如在导航栏中: 这种情况下,在容器定宽但是文本又溢出且不能换行的情况下,我们就需要寻求另外的解决方案。 hover 时弹出框提 阅读全文
posted @ 2020-07-27 15:20 ChokCoco 阅读(1381) 评论(6) 推荐(15) 编辑
摘要:本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义,mask 译为遮罩。在 CSS 中,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出现已经有一段时间了,只是没有特别多实用的场景,在实战中使用的非常少,本文将罗 阅读全文
posted @ 2020-07-06 10:26 ChokCoco 阅读(1500) 评论(9) 推荐(25) 编辑
摘要:display: contents 是一个比较陌生的属性,虽然属于 display 这个基本上是最常见的 CSS 属性,但是 contents 这个取值基本不会用到。但是它早在 2016 年就已经得到了 Firefox 的支持。 本文将深入一下这个有意思的属性值。 基本用法 根据 W3C 对 dis 阅读全文
posted @ 2020-05-28 14:33 ChokCoco 阅读(1295) 评论(5) 推荐(9) 编辑
摘要:如何实现下面这个渐变的边框效果: 这个问题本身不难,实现的方法也有一些,主要是有一些细节需要注意。 border-image border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 阅读全文
posted @ 2020-02-17 15:08 ChokCoco 阅读(1743) 评论(3) 推荐(13) 编辑
摘要:本文的主题是 Glitch Art,故障艺术。 什么是故障艺术?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉,看起来具有闪烁、震动的效果,很吸引人眼球。 故障艺术它模拟了画面信号出现故障导致成像错误的感觉。青色色块与红色色块无法重合就是这种故障的体现。从胶片时代开始到 阅读全文
posted @ 2020-02-10 10:46 ChokCoco 阅读(2350) 评论(9) 推荐(27) 编辑
摘要:标题中的 Cascading 亦可以理解为级联。 进入正文,这是一个很有意思的现象。可以直接跳到 总结一下 部分,看完再回过头来阅读本文。 引子 假设我们有如下结构: 上面的 p 标签只有一个内联 CSS,很明显,在没有其他样式的干预下,文本 .txt 的颜色肯定就是红色的。 如果此时,我们希望改变 阅读全文
posted @ 2020-01-16 11:44 ChokCoco 阅读(1620) 评论(7) 推荐(8) 编辑
摘要:循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果。 画个电池 当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个: 欧了,勉强就是它了。有了电池,那接下来直接充电吧。最最简单的动画,那应该是用色彩把整个电池灌满即可。 方法很多,代码也很简单,直接看效果: 有内味了,如果 阅读全文
posted @ 2019-12-23 10:31 ChokCoco 阅读(6276) 评论(20) 推荐(79) 编辑
摘要:根据 CSS Scroll Snap Module Level 1 规范,CSS 新增了一批能够控制滚动的属性,让滚动能够在仅仅通过 CSS 的控制下,得到许多原本需要 JS 脚本介入才能实现的美好交互。 Tips:本文截的一些 Gif 图涉及容器滚动,效果不是很好,可以点进 Demo 里实际感受下 阅读全文
posted @ 2019-12-06 10:57 ChokCoco 阅读(1033) 评论(1) 推荐(5) 编辑
摘要:最近一直在使用 css-doodle 实现一些 CSS 效果。 css-doodle 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面,以实现各种 CSS 效果(或许可以称之为 CSS 艺术)。后续几篇文章可能都会与之有关。 当然,本文的主角并不是 阅读全文
posted @ 2019-11-22 10:41 ChokCoco 阅读(3147) 评论(5) 推荐(13) 编辑
摘要:本技巧来自这篇文章 -- How to animate box-shadow with silky smooth performance 本文不是直译,因为觉得这个技巧很有意思很有用,遂起一文。 box-shadow 在我们的工作中使用以及越来越多,伴随阴影的动画或多或少都有一点。假设,我们有下面这 阅读全文
posted @ 2019-10-31 10:38 ChokCoco 阅读(1475) 评论(1) 推荐(7) 编辑