CSS3 :default伪类选择器作用设计的作用是让用户在选择一组数据的时候,依然知道默认选项是什么,否则其他选项一多,选着选着就不知道默认提供的是哪个了,算是一种体验增强策略。作用不是很强烈,但是关键时刻却很有用。
CSS, SVG和canvas分别实现文本文字纹理叠加效果
2018年02月27日 by 阅读 36840 次, 今日 25 次本文这里所说的叠加,就是混合模式中的叠加,也就是说,本文要实现的效果是,文字本身的颜色和纹理进行叠加,而非直接填充纹理。
CSS, SVG和canvas都能实现类似的效果,我们一个一个来看一下……
小tips: 使用JS检测用户是否安装某font-family字体
2018年02月24日 by 阅读 51918 次, 今日 27 次下午突发灵感,写了一段JavaScript小脚本,可以用来判断用户的操作系统是否安装了某字体,代码非常简单,使用也非常方便,性能也比较快,兼容性也非常好,在一些特殊的交互场景非常有用。总之,希望本文的内容能够对您的学习有所帮助。
解决canvas图片getImageData,toDataURL跨域问题
2018年02月10日 by 阅读 117606 次, 今日 41 次对于跨域的图片,只要能够在网页中正常显示出来,就可以使用canvas的drawImage() API绘制出来。但是如果你想更进一步,通过getImageData()方法获取图片的完整的像素信息,则多半会出错。
那有没有什么办法可以解决这个问题呢?
CORS ajax跨域请求php简单完整案例一则
2018年02月9日 by 阅读 44674 次, 今日 24 次CORS是Cross-Origin Resource Sharing的缩写,表示跨域的资源分享,不仅可以跨子域,就算域名长得完全不一样,也可以进行资源获取。
比较常见的应用之一就是Ajax跨域请求数据。
canvas文本绘制自动换行、字间距、竖排等实现
2018年02月5日 by 阅读 95069 次, 今日 55 次和CSS相比,SVG以及canvas对文字排版的支持很弱。
在CSS中天然支持的文本自动换行,其他letter-sapcing字间距,writing-mode竖排等都是一个CSS属性就可以实现。但是在canvas中,全部都不支持。
但是canvas可以方便把文字转换成图片,有些场合,例如广告生成工具就需要canvas前端图片生成,此时我们该如何处理这些文字排版呢?
小tips: 滚动容器尺寸变化子元素视觉上位置不变JS实现
2018年02月2日 by 阅读 32765 次, 今日 22 次对于一个宽度不固定的滚动容器,如果里面内容已经滚动到了一定的高度,这个时候滚动容器的宽度发生变化,则里面内容的位置会进行重定位,一不留神就不知道刚才的位置是哪里了。
尤其是看小说这种非常考验眼力的场景。于是,就有需求:当滚动容器尺寸发生变化的时候(如宽屏窄屏切换,或者默认尺寸变全屏时候),最上面元素位置要保持不变,这样视觉体验就很好。不会因为突然的尺寸变化而不知道刚才看到哪里了。
那么该如何实现呢?
小tips: 纯CSS显示JS/HTML等源代码行数
2018年02月1日 by 阅读 28585 次, 今日 27 次如图,纯CSS显示JS/HTML等源代码行数,希望实现的方法可以给大家带来更多的思路和灵感。
CSS改变插入光标颜色caret-color简介及其它变色方法
2018年01月28日 by 阅读 58416 次, 今日 27 次有这样一个需求,改变输入光标的颜色,同时不改变输入框文字原本的颜色,在以前,如果产品经理提这样的需求,多半都会被开发一板子打过去。而如今,实际上已经有了天然针对此需求的属性caret-color。同时本文还会介绍其他一些改变光标颜色不改变文字颜色方法。希望本文能够对你的学习有所帮助。
详细了解CSS :focus-within伪类及其交互应用
2018年01月21日 by 阅读 40042 次, 今日 25 次:focus-within
伪类原本设计的作用是原生表单元素focus
时候,祖先<form>
元素可以也有状态变化。
但是在我看来,:focus-within
功能之强悍,远远不是仅仅和祖先<form>
元素玩过家家这么简单。
理论上,只要页面上任意一个元素focus
,通过:focus-within
就能对页面上任意的元素进行样式控制…