“CSS相关”目录存档

小tips: 纯CSS实现打字动画效果

2019年01月10日,星期四

本文主要介绍如何使用CSS实现类似打印机一样的文本打字效果,展示了共两种方法,分别适用于纯中文场景,以及中英文混合场景,这种效果在线简历,或者一些运营活动上比较合适。希望本文内容可以对你的学习有所帮助。

阅读全文…

CSS/CSS3 box-decoration-break属性简介

2019年01月5日,星期六

CSS box-decoration-break属性

CSS box-decoration-break属性可以指定元素片段在跨行、跨列或跨页(如打印)时候的样式渲染表现。

默认情况下,元素的跨行或跨列渲染都是裁剪分割,各得一部分,借助box-decoration-break属性,可以让换行,或者换列的各部分元素按照独立的样式进行渲染,活用这种特性,可以让我们的布局和样式表现更上一层。

阅读全文…

CSS :placeholder-shown伪类实现Material Design占位符交互效果

2018年12月25日,星期二

表单与label与placeholder

Material Design规范中占位符交互效果是这样的:focus输入框的时候,placeholder会位移到左上角作为一个label存在。以前我们要实现这种效果只能借助JavaScript,实际上,纯CSS就能搞定之,就是借助:placeholder-shown伪类实现。且目前在移动端兼容性不错,可以在实际项目中应用。究竟如何实现?有没有这么神奇?一起进来看看吧~

阅读全文…

CSS vector-effect与SVG stroke描边缩放

2018年12月24日,星期一

vector-effect文章头图

默认情况下,我们改变SVG图形尺寸,stroke描边宽度也会跟着一起变化。有时候,我们希望描边宽度一直不变,怎么办呢?可以试试使用vector-effect属性。

阅读全文…

CSS ::backdrop伪元素是干嘛用的?

2018年12月22日,星期六

backdrop头图

backdrop这个单词是背景幕布,就是戏曲表演后面的一块布。::backdrop伪元素就是控制需要视觉聚焦的元素后面的背景元素样式的。在web中哪些元素需要视觉聚焦呢?一个是HTML5 <video>视频元素,还有就是HTMl5.2 <dialog>元素,以及处于全屏状态下的普通元素。这些元素的背景样式均可以交给::backdrop伪元素进行控制。

阅读全文…

周知:CSS -webkit-伪元素选择器不再导致整行无效

2018年12月17日,星期一

-webkit-与伪元素

通常,如果选择器链或组中有无效的伪元素或伪类,则整个选择器列表无效。如果伪元素(但不是伪类)具有-webkit-前缀,那么对于Firefox 63+,Blink、Webkit和Gecko浏览器认为它是有效的,而不会使选择器列表无效。

阅读全文…

CSS font-feature-settings 50+关键字属性值完整介绍

2018年12月9日,星期日

CSS font-feature-settings

CSS font-feature-settings属性控制OpenType字体中的高级排版功能,也就是可以让OpenType字体排版更加精致,符合实际开发需要。

兼容性很不错,支持的特征关键标签也很多,都是4个字母,全部加起来,可能上百要的,本文主要介绍浏览器能够支持的一些特征标签。

阅读全文…

CSS蛋疼应用之:数据上报和HTML验证

2018年12月6日,星期四

介绍两个我觉得比较蛋疼但有意思的CSS应用,一个就是纯CSS实现数据上报,用户行为跟踪;另外一个就是纯CSS实现HTML验证,并且在页面上进行提示。比较有脑洞,有想法,虽然以后估计用不到,但是,其中新奇的思路说不定对于我们开阔眼界很有帮助。

阅读全文…

杀了个回马枪,还是说说position:sticky吧

2018年12月2日,星期日

sticky布局效果缩略图

position:sticky早有耳闻也有所了解,后来,Chrome放弃了对其支持,我也就不关心这个声明了,今天偶然发现,卧槽,Chrome什么时候杀了个回马枪,居然又支持了。眼瞅着,各个浏览器纷纷立了山头,要必要关心关心position:sticky了,不要被人留下厚此薄彼的口舌。结果一关心,竟然发现,sticky定位要比预想的更强大,更有趣……

阅读全文…

大侠,请留步,要不过来了解下CSS Scroll Snap?

2018年11月28日,星期三

scroll snap头图

CSS Scroll Snap是CSS中一个独立的模块,可以让网页容器滚动停止的时候,自动平滑定位到指定元素的指定位置。虽然Scroll Snap最后的定位效果是平滑的,但是Scroll Snap的作用不是平滑滚动,而是元素定位增强。要想实现平滑滚动,请使用CSS scroll-behavior属性

阅读全文…