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

2019年10月16日 by 张 鑫旭 阅读 53060 次, 今日 7 次

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

阅读全文…

低成本深色模式CSS实现技术探索与拓展

2020年11月28日 by 张 鑫旭 阅读 190 次, 今日 69 次

黑夜中的猫头鹰 深色模式CSS

有两种CSS方法可以轻松实现深色模式效果,一种是借助filter滤镜,一种是借助mix-blend-mode混合模式,均是低成本高收益,详见本文介绍。

阅读全文…

突发奇想,同步单复选框checked态岂不点击通杀?

2020年11月26日 by 张 鑫旭 阅读 1809 次, 今日 21 次

思考的狐狸,突发奇想的张鑫旭

利用浏览器单复选框原生点击的特性,抽象出一个实时同步规则,无需针对每一种交互效果去写具体的代码,就可以实现全覆盖的点击交互事件增强支持,可谓一本万利,大家不妨进来看看到底香不香。

阅读全文…

HTML中无标签文本的CSS变色技巧

2020年11月15日 by 张 鑫旭 阅读 2206 次, 今日 9 次

无标签文字的变色效果实现

介绍一种高级的CSS文字变色技巧,适用于文字外面是没有HTML标签,只能通过兄弟元素或其他不相干元素改变文字颜色的场景。

阅读全文…

介绍一种全新的clipPath Sprites小图标技术

2020年10月30日 by 张 鑫旭 阅读 4330 次, 今日 5 次

剪裁图标合集技术

本文介绍一种全新的SVG图标合集技术,有别于传统的<symbol>元素,这里使用的是<clipPath>元素,配合CSS clip-path属性使用,优势在于HTML标签任意,UI样式任意,本文内容一定会对您的学习有所帮助。

阅读全文…

细说iOS Safari下focus的行为

2020年10月26日 by 张 鑫旭 阅读 3741 次, 今日 1 次

封面图占位图

iOS Safari浏览器下的focus行为和其他浏览器都一些明显不一致的地方,有时候会给开发带来困扰,这里就说说相关的细节知识,均源自于自己日常开发,希望可以给遇到类似问题的前端同行带来帮助。

阅读全文…

图片加载失败后CSS样式处理最佳实践

2020年10月24日 by 张 鑫旭 阅读 8396 次, 今日 8 次

图片加载失败最佳实践封面图

图片加载失败的默认UI是比较丑陋的,因为前端开发会使用出错图进行替换,但是这种做法会隐藏图像的内容信息,有没有什么办法在CSS样式美化同时显示图像的信息呢?本文就介绍我摸索出来的应对此场景的最佳实践技巧,希望可以对您的工作与学习带来帮助。

阅读全文…

ES6模板字符串在HTML模板渲染中的应用

2020年10月22日 by 张 鑫旭 阅读 3525 次, 今日 10 次

模板字面量HTML渲染

ES6模板字符串自带模板解析特性,有没有可能HTML模板直接使用ES6模板字面量语法,然后进行渲染解析呢,这样就不需要引用第3方模板渲染引擎了,岂不妙哉!但是实操下来没那么简单,好在我找到了一个解决方法。本文的技术同样实用,有demo有截图,希望本文内容可以对您的学习有所帮助。

阅读全文…

如何让文字作为CSS背景图片显示?

2020年10月20日 by 张 鑫旭 阅读 3911 次, 今日 6 次

文本变CSS背景封面图

本文介绍一种非常实用的技术,借助SVG让普通的text文字可以直接作为CSS背景图,方便实现很多的布局与样式效果。本文还提供转换工具和多个实时渲染的精彩案例,保证可以让大家学到不少东西。

阅读全文…

SVG feTurbulence滤镜深入介绍

2020年10月17日 by 张 鑫旭 阅读 2529 次, 今日 2 次

feTurbulence滤镜与火焰效果

SVG feTurbulence滤镜可以用来模拟超级逼真的自然特效,例如火焰、水流、土石、烟雾、云朵等等,本文以接近1万字的篇幅详细深入介绍这个SVG滤镜,配备大量精彩实用案例,视觉表现前端必学知识,希望可以对您的学习所有帮助。

阅读全文…

HTML enterkeyhint设置iOS/Android键盘enter键

2020年10月11日 by 张 鑫旭 阅读 2874 次, 今日 2 次

enterkeyhint封面占位图

介绍一个实用的HTML属性enterkeyhint,可以让iOS和Android手机键盘出现时候的enter键显示出你需要的文案或者图标,从而从细节上提高用户体验,有demo有截图,希望本文内容可以对你的工作和学习有所帮助。

阅读全文…