CSS, SVG和canvas分别实现文本文字纹理叠加效果

2018年02月27日 by 张 鑫旭 阅读 10129 次, 今日 29 次

本文这里所说的叠加,就是混合模式中的叠加,也就是说,本文要实现的效果是,文字本身的颜色和纹理进行叠加,而非直接填充纹理。

CSS, SVG和canvas都能实现类似的效果,我们一个一个来看一下……

阅读全文…

小tips: 使用JS检测用户是否安装某font-family字体

2018年02月24日 by 张 鑫旭 阅读 10703 次, 今日 30 次

下午突发灵感,写了一段JavaScript小脚本,可以用来判断用户的操作系统是否安装了某字体,代码非常简单,使用也非常方便,性能也比较快,兼容性也非常好,在一些特殊的交互场景非常有用。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

解决canvas图片getImageData,toDataURL跨域问题

2018年02月10日 by 张 鑫旭 阅读 13813 次, 今日 76 次

对于跨域的图片,只要能够在网页中正常显示出来,就可以使用canvas的drawImage() API绘制出来。但是如果你想更进一步,通过getImageData()方法获取图片的完整的像素信息,则多半会出错。

那有没有什么办法可以解决这个问题呢?

阅读全文…

CORS ajax跨域请求php简单完整案例一则

2018年02月9日 by 张 鑫旭 阅读 12920 次, 今日 37 次

CORS是Cross-Origin Resource Sharing的缩写,表示跨域的资源分享,不仅可以跨子域,就算域名长得完全不一样,也可以进行资源获取。

比较常见的应用之一就是Ajax跨域请求数据。

阅读全文…

canvas文本绘制自动换行、字间距、竖排等实现

2018年02月5日 by 张 鑫旭 阅读 16193 次, 今日 46 次

和CSS相比,SVG以及canvas对文字排版的支持很弱。

在CSS中天然支持的文本自动换行,其他letter-sapcing字间距,writing-mode竖排等都是一个CSS属性就可以实现。但是在canvas中,全部都不支持。

但是canvas可以方便把文字转换成图片,有些场合,例如广告生成工具就需要canvas前端图片生成,此时我们该如何处理这些文字排版呢?

阅读全文…

小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现

2018年02月2日 by 张 鑫旭 阅读 11452 次, 今日 27 次

对于一个宽度不固定的滚动容器,如果里面内容已经滚动到了一定的高度,这个时候滚动容器的宽度发生变化,则里面内容的位置会进行重定位,一不留神就不知道刚才的位置是哪里了。

尤其是看小说这种非常考验眼力的场景。于是,就有需求:当滚动容器尺寸发生变化的时候(如宽屏窄屏切换,或者默认尺寸变全屏时候),最上面元素位置要保持不变,这样视觉体验就很好。不会因为突然的尺寸变化而不知道刚才看到哪里了。

那么该如何实现呢?

阅读全文…

小tips: 纯CSS显示JS/HTML等源代码行数

2018年02月1日 by 张 鑫旭 阅读 9526 次, 今日 25 次

如图,纯CSS显示JS/HTML等源代码行数,希望实现的方法可以给大家带来更多的思路和灵感。

阅读全文…

CSS改变插入光标颜色caret-color简介及其它变色方法

2018年01月28日 by 张 鑫旭 阅读 10796 次, 今日 30 次

有这样一个需求,改变输入光标的颜色,同时不改变输入框文字原本的颜色,在以前,如果产品经理提这样的需求,多半都会被开发一板子打过去。而如今,实际上已经有了天然针对此需求的属性caret-color。同时本文还会介绍其他一些改变光标颜色不改变文字颜色方法。希望本文能够对你的学习有所帮助。

阅读全文…

CSS :focus-within伪类选择器及纯CSS下拉等应用举例

2018年01月21日 by 张 鑫旭 阅读 10995 次, 今日 17 次

:focus-within伪类原本设计的作用是原生表单元素focus时候,祖先<form>元素可以也有状态变化。

但是在我看来,:focus-within功能之强悍,远远不是仅仅和祖先<form>元素玩过家家这么简单。

理论上,只要页面上任意一个元素focus,通过:focus-within就能对页面上任意的元素进行样式控制…

阅读全文…

借助HTML5 details,summary无JS实现各种交互效果

2018年01月15日 by 张 鑫旭 阅读 14170 次, 今日 29 次

HTML5 details, summary这两个标签元素内置交互行为,我们可以充分利用这种交互特性不借助任何JavaScript代码实现各种交互效果。当然,前提需要解决自定义以及outline等体验问题。本文就将带你深入探索这两个非常实用的标签元素。

阅读全文…