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

2019年10月16日 by 张 鑫旭 阅读 48806 次, 今日 101 次

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

阅读全文…

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

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

模板字面量HTML渲染

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

阅读全文…

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

2020年10月20日 by 张 鑫旭 阅读 996 次, 今日 131 次

文本变CSS背景封面图

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

阅读全文…

SVG feTurbulence滤镜深入介绍

2020年10月17日 by 张 鑫旭 阅读 1008 次, 今日 59 次

feTurbulence滤镜与火焰效果

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

阅读全文…

HTML enterkeyhint设置iOS/Android键盘enter键

2020年10月11日 by 张 鑫旭 阅读 1306 次, 今日 44 次

enterkeyhint封面占位图

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

阅读全文…

快速学习CSS Color Level 4的色值新语法

2020年10月11日 by 张 鑫旭 阅读 1172 次, 今日 31 次

多彩颜色表示

本文介绍#RRGGBBAA色值表示法,对应的透明度的16进制色值,RGB颜色和HSL颜色语法以前的限制都取消了,支持小数,参数个数3个4个都可以,以及介绍RGB颜色和HSL颜色的新语法,希望本文内容对大家的学习有所帮助。

阅读全文…

巧借CSS var变量实现任意的CSS自定义语法

2020年10月11日 by 张 鑫旭 阅读 1275 次, 今日 53 次

CSS变量的自定义语法技术

本文介绍一种自定义任意CSS语法、以及Polyfill CSS新特性的技术,这个技术的精华之处就是巧用CSS变量var让这些浏览器本不应该识别的语法也认为是合法的,从而让JS进行解析识别与转化成为了可能,本文通过3个案例演示该技术,希望可以对您的学习有所帮助。

阅读全文…

Polyfill吊炸天的CSS attr()新语法

2020年10月10日 by 张 鑫旭 阅读 1457 次, 今日 50 次

poly小狗 attr()函数 CSS

CSS attr()新语法可以让HTML属性以任意的CSS属性值类型呈现,足矣对现有的web开发产生颠覆,但是可惜这么好用的东西目前没有任何浏览器支持,本文会介绍我自己找到的一种Polyfill方法,可以让所有支持CSS变量的浏览器都可以使用attr()新语法。

阅读全文…

flex:0 flex:1 flex:none flex:auto应该在什么场景下使用?

2020年10月6日 by 张 鑫旭 阅读 2785 次, 今日 56 次

flex:initial适合小部件元素的分布布局,flex:0适合用到替换元素的场景,flex:none适合按钮等不换行的小控件,flex:1适合等分布局,flex:auto适合基于内容动态适配的布局,具体的剖析可以点击链接进行查看。

阅读全文…

研究了下Houdini中的CSS Layout API

2020年09月13日 by 张 鑫旭 阅读 3660 次, 今日 32 次

CSS layout自定义布局

目前关于CSS Layout API最详细最深入的文章,内有简单易学全新的自定义布局案例,案例代码有详细的注释描述,彻底弄懂CSS Layout API。

阅读全文…

文字沿着不规则路径排版布局的实现

2020年09月6日 by 张 鑫旭 阅读 4768 次, 今日 25 次

封面占位图

SVG textPath可以让文字沿着指定的路径排列排版布局,文中还有配套开发的路径转换工具和诸多应用案例,精彩不容错过。

阅读全文…