关于《CSS选择器世界》这本书

2019年10月16日 by 张 鑫旭 阅读 34309 次, 今日 52 次

《CSS选择器世界》是我正式出版的第二本技术书籍,关于这本书,我有一些话想要和大家说……

阅读全文…

CSS变量对JS交互组件开发带来的提升与变革

2020年07月1日 by 张 鑫旭 阅读 2019 次, 今日 93 次

CSS变量与组件开发

CSS变量带来的提升绝不仅仅是节约点CSS成本,其可以颠覆目前JS组件交互开发的思路,把原来的JS负责的UI层的东西全部转移到了CSS层,组件代码更简洁,视觉表现实现更灵活,本文会举若干例子展示这种提升与变革。

阅读全文…

使用CSS text-emphasis对文字进行强调装饰

2020年06月16日 by 张 鑫旭 阅读 2344 次, 今日 26 次

过去想要强调文字,做法是加粗,或者使用高亮颜色,现在可以使用text-emphasis属性进行强调装饰,我们可以指定任意的装饰字符,很实用的一个CSS新属性。

阅读全文…

移动端双指缩放图片JS事件的实践心得

2020年06月12日 by 张 鑫旭 阅读 3609 次, 今日 26 次

双指缩放示意图

今天要JS实现一个手机中双指缩放的需求,本以为很简单,结果遇到了意料之外的状况,特意记录下来和大家分享,有demo演示,也有精简的JavaScript代码,以后说不定用得到,可以mark下。

阅读全文…

CSS gap属性进化史

2020年06月7日 by 张 鑫旭 阅读 1937 次, 今日 14 次

蜜瓜占位

带大家了解下gap属性的前世今生,了解gap属性在CSS世界3大布局中的过往和现状。

阅读全文…

SVG任意图形path曲线路径的面积计算

2020年06月3日 by 张 鑫旭 阅读 2450 次, 今日 10 次

路径面积计算多边形占位图

我写了一段JS,用来计算SVG任意图形元素,或者path字符串路径对应的面积大小,直接复制粘贴就可以用,希望可以解决你的开发需求。

阅读全文…

CSS columns轻松实现两端对齐布局效果

2020年05月27日 by 张 鑫旭 阅读 4782 次, 今日 22 次

CSS columns,就是分栏布局的columns属性,可以在不改变元素display值前提下实现两端对齐布局效果,说不定关键时候还是很有用的,可以来了解下这种CSS布局方法。

阅读全文…

快速了解CSS display:flow-root声明

2020年05月12日 by 张 鑫旭 阅读 4527 次, 今日 11 次

display: flow-root封面图

display:flow-root可以让元素块状化,同时包含格式化上下文BFC,可以用来清除浮动,去除margin合并,实现两栏自适应布局等。

阅读全文…

借助CSS mask遮罩显著优化PNG图片的尺寸

2020年05月8日 by 张 鑫旭 阅读 4649 次, 今日 10 次

遮罩压缩PNG封面图

带有透明区域,同时色彩丰富的PNG图片再怎么压缩体积也是很大的,有没有什么办法既保持PNG图片的透明,又显著降低图片的尺寸呢?本文就将介绍如何使用CSS遮罩降低超过50%大小的PNG体积,优化性能。

阅读全文…

CSS conic-gradient()锥形渐变简介

2020年04月20日 by 张 鑫旭 阅读 4667 次, 今日 17 次

锥形渐变是CSS Images Module Level 4规范中新定义的一种渐变,可以非常方便实现过去很难实现的效果,例如饼图,色板,棋盘等各种效果,CSS开发必学必会技能。

阅读全文…

ES6 Math方法和Number新特性简介

2020年04月16日 by 张 鑫旭 阅读 5322 次, 今日 16 次

不错的情侣封面图

ES6 新增了很多Math方法,扩展了一些Number新特性,本文就对相关知识进行的整理和说明,希望可以对您的学习有所帮助。

阅读全文…