头图

SegmentFault 思否技术周刊 -- 不走寻常路的 CSS

Beverly
English

CSS (英文全称:Cascading Style Sheets)是一种用来表现 HTML(标准通用标记语言的一个应用)或 XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

小编整理了思否社区关于 CSS 的优质技术文章,欢迎大家阅读 ~~

CSS 特性

《2022 年最受瞩目的新特性 CSS @layer 到底是个啥?》

步入 2022,CSS 的新特性层出不穷,而最近在 CSS 圈最受瞩目的新特性,非 CSS @layer 莫属。
本文将用最简洁的语言,快速让读者们搞懂,到底什么是 CSS @layer 新规范。

《革命性创新,动画杀手锏 @scroll-timeline》

在 CSS 规范 Scroll-linked Animations 中,推出了一个划时代的功能。也就是 -- The @scroll-timeline at-rule,直译过来就是滚动时间线。
本文将带大家一探究竟,从入门到学会使用 CSS @scroll-timeline。

《说一说 CSS 中的变量》

大部分的编程语言,在语言出现的那一刻就支持变量。但是,CSS 一开始就不支持原生变量。所以大家开始选择 CSS,LESS 等兼容的 CSS 扩展语言。不过庆幸的是 CSS 目前也已经支持变量,下文就来聊一聊 CSS 中的变量。

《CSS 中的简写到底有多少坑?以后不敢了...》

简写(语法糖)可能给我们的编码带来了很多便利,但凡事都有好有坏,简写也会带来一些问题,所以今天就来讨论一下 CSS 中的简写的 "好" 和 "坏"。

《CSS 自定义属性指北》

自定义属性(有时候也被称作CSS变量或者级联变量)是由CSS作者定义的,它包含的值可以在整个文档中重复使用。由自定义属性标记设定值(比如: --main-color: black;),由var() 函数来获取值(比如: color: var(--main-color);)

《CSS 也能自动补全字符串?》

很多时候都会碰到字符串补全的需求,典型的例子就时间或者日期中的补零操作,例如

2021-12-31
2022-03-03

通常的做法是

if (num < 10) {
  num = '0' + num
}

后来,JS 中出现了原生的补全方法padStart()padEnd(),如下

'3'.padStart(2, '0')
// 结果是 ’03‘
'12'.padStart(2, '0')
// 结果是 ’12‘

其实呢,在 CSS 中也是可以实现这样的效果的,并且有多种方案,下面一起看看吧,相信能有不一样的体会
引用

《CSS 实现树状结构目录》

最近在项目中碰到了一个这样的树状结构目录,效果如下
Kapture 2022-04-10 at 17.48.33
如果用到了 Ant Design 这样的框架,那可以直接用现成的组件。如果没有用到这样的框架呢?其实纯 CSS 也是可以搞定的,下面看看如何实现的,还有很多你可能不知道 CSS 小技巧哦~

神奇的 CSS

《神奇的 CSS,让文字智能适配背景颜色》

文本在黑色底色上表现为白色,在白色底色上表现为黑色。看似很复杂的一个效果,但是其实在 CSS 中非常好实现,今天就介绍这样一个小技巧,在 CSS 中,利用混合模式 mix-blend-mode: difference,让文字智能适配背景颜色。

《Amazing!巧用 CSS 视差实现酷炫交互动效》

本文将介绍利用 CSS 实现滚动视差效果的一个小技巧,并且,利用这个技巧来制作一些有意思的交互特效。
这里,会运用上这样一种纯 CSS 的视差技巧:
1、使用 transform: translate3d 实现滚动视差
2、借助 CSS 视差实现酷炫交互动效
3、CSS 滚动视差动画 2
4、结合 CSS @scroll-timeline,利用 CSS 控制滚动与动画

《巧用 background-clip 实现超强的文字动效》

background-clip: text 之前也提到多很多次。其核心就在于以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。
简单而言,就是运用了 background-clip: text 的元素,其背景内容只保留文字所在区域部分,配合透明文字 color: transparent,就能够利用文字透出背景。
利用 background-clip: text,能够得到很多非常有意思的文字效果。

《让交互更加生动!有意思的鼠标跟随 3D 旋转动效》

简单分析一下,这个交互效果主要有两个核心:

  1. 借助了 CSS 3D 的能力
  2. 元素的旋转需要和鼠标的移动相结合

本文将讲述如何使用纯 CSS 实现类似的交互效果,以及借助 JavaScript 绑定鼠标事件,快速还原上述效果。

《CSS 阴影进阶,实现更加的立体的阴影效果!》

CSS 阴影的存在,让物体看上去更加有型立体。然而,在最简单的阴影使用之上,我们可以实现更多有意思且更加立体的阴影效果。
本文将带大家看看如何使用 CSS 实现几类比普通阴影更加立体的阴影效果。

CSS 的艺术

《CSS重复线性渐变之画格子》

image.png

《离谱的 CSS!从表盘刻度到艺术剪纸》

bg1

《 使用 CSS 绘制带有动画效果的 React Logo 》

《还在使用定时器吗?CSS 也能实现电子时钟》

Kapture 2022-03-04 at 16.28.36

CSS 面试

《前端面试资料整理【css篇】》

简单选择器:id选择器、类选择器、标签选择器、
组合选择器:后代选择器(空格)、子选择器(>)、兄弟选择器 (+)、通用选择器(~)
伪类(:hover)
伪元素(::before, ::firt-child,::not())
属性选择器
ps. 兄弟选择器 (+)与通用选择器(~): “+”指“自己”相邻兄弟,“~”会应用所有兄弟
引用

《一道有意思的 CSS 面试题,FizzBuzz ~》

FizzBuzz 是一道很有意思的题目。我们来看看题目:
如果遇见了 3 的倍数要说 Fizz,5 的倍数就说 Buzz,如果既是 3 的倍数又是 5 的倍数就说 FizzBuzz。
如果是在一些编程语言中,这是一道比较初级的题目,当然,稍微转换一下,我们就可以把它转换成一道有关 CSS 选择器的题目。

PS:大家想看哪些方面的技术内容,可以在评论区留言喔 ~

如有问题可以添加小姐姐微信~

image.png

阅读 2k

SegmentFault_社区周刊
主题技术周刊,每周分享新鲜有趣的技术干货。
avatar
Beverly
SegmentFault 思否社区打工人

怂人面前全是坑,努力填坑。加油💪🏻,小鸣酱~

440 声望
2.1k 粉丝
0 条评论
avatar
Beverly
SegmentFault 思否社区打工人

怂人面前全是坑,努力填坑。加油💪🏻,小鸣酱~

440 声望
2.1k 粉丝
文章目录
宣传栏