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

带有透明区域,同时色彩丰富的PNG图片再怎么压缩体积也是很大的,有没有什么办法既保持PNG图片的透明,又显著降低图片的尺寸呢?本文就将介绍如何使用CSS遮罩降低超过50%大小的PNG体积,优化性能。
阅读全文…
标签: css相关, jpeg, mask, mask-image, png, 前端性能, 图片压缩, 性能优化
发布在 CSS相关 | 17 条评论 »
2020年04月20日 by 张 鑫旭 阅读 29495 次, 今日 10 次

锥形渐变是CSS Images Module Level 4规范中新定义的一种渐变,可以非常方便实现过去很难实现的效果,例如饼图,色板,棋盘等各种效果,CSS开发必学必会技能。
阅读全文…
标签: conic-gradient, css-gradient, linear-gradient, radial-gradient, 径向渐变, 线性渐变, 锥形渐变
发布在 CSS相关 | 5 条评论 »
2020年04月16日 by 张 鑫旭 阅读 23262 次, 今日 9 次

ES6 新增了很多Math方法,扩展了一些Number新特性,本文就对相关知识进行的整理和说明,希望可以对您的学习有所帮助。
阅读全文…
标签: ES6, isFinite, isInteger, isNaN, isSafeInteger, Math.cbrt, Math.fround, Math.hypot, Math.sign, Number, parseFloat, parseInt, 进制转换
发布在 JS API | 6 条评论 »
2020年04月12日 by 张 鑫旭 阅读 31503 次, 今日 16 次

目前主流浏览器都已经支持了CSS min()/max()/clamp()数学函数,可以让你的布局和样式表现更加的智能。
阅读全文…
标签: calc, clamp(), CSS函数, CSS数学函数, CSS计算, max(), min, minmax()
发布在 CSS相关 | 13 条评论 »
2020年04月9日 by 张 鑫旭 阅读 33120 次, 今日 16 次
Text around
有一个正圆或者椭圆,里面有一些文字,如何让这些文字每一行的边缘正好就是圆弧的边缘而不发生溢出呢?本文就将介绍这个CSS布局技巧,希望可以帮到大家的学习。
阅读全文…
标签: border-radius, CSS Shapes, css相关, farthest-side, radial-gradient, Shadow DOM, shape布局, 文字排版, 自定义元素
发布在 CSS相关 | 7 条评论 »
2020年04月8日 by 张 鑫旭 阅读 54159 次, 今日 11 次

AVIF图像格式被誉为下一代图片压缩格式,究竟有什么魔力让其如此口出狂言呢,不妨一起进来看一看。
阅读全文…
标签: APNG, AVIF, HEIF, HEVC, https, jpeg, Service Workers, webP, 图片, 图片压缩
发布在 Graphic相关 | 17 条评论 »
2020年03月21日 by 张 鑫旭 阅读 36626 次, 今日 11 次

波浪线效果CSS 径向渐变可以绘制,SVG也可以实现,这里介绍另外一个自己想到的实现方法,使用text-decoration实现宽度100%波浪线效果,易理解易上手,尺寸可控,颜色可控。
阅读全文…
标签: content, css相关, letter-spacing, text-decoration, vw, white-space, 径向渐变, 波浪线
发布在 CSS相关 | 6 条评论 »
2020年03月18日 by 张 鑫旭 阅读 24081 次, 今日 14 次

先介绍overflow-wrap属性,再介绍overflow-wrap新出了一个属性值anywhere,说不定在以后文字排版布局时候用得上。
阅读全文…
标签: anywhere, break-all, CJK文本, css相关, overflow-wrap, word-break, word-wrap, 字符换行
发布在 CSS相关 | 5 条评论 »
2020年03月12日 by 张 鑫旭 阅读 29665 次, 今日 12 次

关于Emoji字体你可能不知道的一些知识,顺便简单介绍了下彩色字体标准之一的OpenType SVG字体的一些知识。
阅读全文…
标签: emoji字体, font-face, font-family, font-feature-settings, font-plattle, OpenType-SVG, Segoe UI, system-ui, unicode-range
发布在 CSS相关 | 4 条评论 »
2020年03月8日 by 张 鑫旭 阅读 54240 次, 今日 23 次

JS ResizeObserver这个全新的API可以用来观察与检测DOM元素尺寸的变化,很多以前不好实现的需求这下有了高性能高质量的解决方案了。
阅读全文…
标签: borderBoxSize, content-box, contentBoxSize, contentRect, DOMRect, javascript, MutationObserver, resize, ResizeObserver, textarea, 数据埋点
发布在 JS API | 9 条评论 »