2019年07月19日 by 张 鑫旭 阅读 27000 次, 今日 5 次
如果你的主要工作内容就是重构HTML静态页面，则本文介绍的“魔卡”工具会很适合你。头尾公用，支持简易CSS变量，支持http服务以及JS，CSS合并，都是专门为HTML静态页面开发定制的功能。本工具极简免安装，非常轻量。
阅读全文…
标签： @import, github, html, nodejs, var, 原型, 合并, 工具
发布在 HTML相关, JS实例 | 5 条评论 »
2019年07月7日 by 张 鑫旭 阅读 71454 次, 今日 13 次
音视频播放暂停控制，播放时长获取，播放速率，以及检测什么时候播放结束，当前媒体资源是否处于暂停状态等，都在本文有所介绍，本文就是audio/video元素各类基础API完全介绍，总能找到你需要的东西。
阅读全文…
标签： API, audio, autoplay, buffered, currentTime, duration, html, HTML5, loop, muted, playbackRate, preload, seekable, video, volumechange
发布在 JS API, Web综合 | 36 条评论 »
2019年06月23日 by 张 鑫旭 阅读 31509 次, 今日 9 次
本文介绍两个DOM API，DOMParser和XMLSerializer，一个是HTML字符串解析成DOM tree，另外一个是把DOM tree序列化成字符串，正好功能相反，有兴趣可以了解下。
阅读全文…
标签： createTreeWalker, dom, DOMParser, DOMString, element, node, parseFromString, serializeToString, XMLSerializer
发布在 JS API | 10 条评论 »
2019年06月15日 by 张 鑫旭 阅读 49052 次, 今日 8 次
本文详细深入介绍HTML favicon尺寸、格式、制作等相关知识，以前以为favicon很简单，但是一旦深入才发现规则之多，需要适配场景之广泛完全出乎预期。
阅读全文…
标签： favicon, link, meta, png, rel, sizes, 图标
发布在 HTML相关 | 10 条评论 »
2019年06月10日 by 张 鑫旭 阅读 31115 次, 今日 4 次
第4届中国前端开发者千人峰会上我做了名为“滤镜与混合模式”主题分享，这里我把分享内容，尤其一些案例和源码整理成文，给需要的人，末尾有分享PPT文件的下载，内容较多，请提前预留足够学习时间。
阅读全文…
标签： background-blend-mode, blur, contrast, darken, difference, drop-shadow, filter, hue-rotate, lighten, mix-blend-mode, screen, soft-light, 我，
发布在 CSS相关 | 12 条评论 »
2019年06月9日 by 张 鑫旭 阅读 40975 次, 今日 4 次
第五届CSS大会主题分享之“CSS创意与视觉表现”文字版完全整理，共有10个纯CSS实现的创意案例，旨在展现CSS的潜力，同时激发你的CSS创意思维。每个案例都有demo，原理讲解，文末还有分享文档，希望对你CSS学习有所帮助。
阅读全文…
标签： animation, background-blend-mode, box-shadow, calc, content, CSS Shapes, CSSgram, filter, hue-rotate, linear-gradient, mask, mask-composite, mix-blend-mode, opacity, outline, perspective, radial-gradient, resize
发布在 CSS相关 | 11 条评论 »
2019年06月8日 by 张 鑫旭 阅读 34689 次, 今日 7 次
我们可以使用纯CSS显示页面滚动百分比进度，传统实现是在body标签上做文章，但有致命缺陷，后来我借助混合模式实现了一种新方法，此方法可以规避传统实现的不足，使纯CSS滚动指示器效果在实际项目中应用成为了可能。
阅读全文…
标签： body, css相关, darken, lighten, mix-blend-mode, pointer-events, z-index, 滚动, 进度条
发布在 CSS相关 | 21 条评论 »
2019年06月7日 by 张 鑫旭 阅读 24343 次, 今日 4 次
本文介绍一个CSS项目CSSgram，借助css滤镜和混合模式实现Instagram中的26种滤镜效果，不仅可以作用于图片，还可以作用于视频。
阅读全文…
标签： CSSgram, filter, foreignObject, github, mix-blend-mode, video
发布在 CSS相关 | 10 条评论 »
2019年06月3日 by 张 鑫旭 阅读 40992 次, 今日 5 次
本文介绍HTML中33个rel属性值及其对应的含义，这33个属性值各有千秋，涵盖web开发方方面面，或SEO或功能开发或性能优化等，阅读前请预留足够的时间。
阅读全文…
标签： a, area, dns-prefetch, form, html, link, manifest, nofollow, noopener, noreferrer, OpenSearch, preconnect, prefetch, preload, prerender, referrer, rel, shortlink
发布在 HTML相关 | 13 条评论 »
2019年05月28日 by 张 鑫旭 阅读 30761 次, 今日 7 次
借助CSS计数器，我们可以巧妙地实现CSS var变量值在页面中呈现的效果。这是一个所有CSS开发人员都必须要掌握的一个小技巧。
阅读全文…
标签： content, counter-reset, CSS计数器, var, 伪元素, 变量
发布在 CSS相关 | 10 条评论 »
我的应用
我的应用