文章关键字 ‘css3’

CSS :default伪类选择器简介

2018年03月15日,星期四

CSS3 :default伪类选择器作用设计的作用是让用户在选择一组数据的时候,依然知道默认选项是什么,否则其他选项一多,选着选着就不知道默认提供的是哪个了,算是一种体验增强策略。作用不是很强烈,但是关键时刻却很有用。

阅读全文…

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

2018年01月28日,星期日

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

阅读全文…

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

2018年01月21日,星期日

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

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

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

阅读全文…

10个demo示例学会CSS3 radial-gradient径向渐变

2017年11月23日,星期四

实际开发的时候,当要使用radial-gradient径向渐变的时候,脑中会有大概的语法,但是细节却记不住,于是想快捷找个案例看看具体怎么用,然后直接套一下,本文就是满足类似此需求而写,共展示了10例常见使用案例,相信一定可以覆盖你的使用场景的。

阅读全文…

3种纯CSS实现中间镂空的12色彩虹渐变圆环方法

2017年11月7日,星期二

上周我做了个demo,使用SVG实现了一个彩条圆环倒计时效果,使用SVG实现的优点是兼容性非常好,不足在于学习成本比较高,于是我就琢磨有没有更简单的方法实现类似的多彩圆环渐变效果,最好纯CSS就能搞定。绞尽脑汁想出了下面三种实现方法……

阅读全文…

客栈说书:CSS遮罩CSS3 mask/masks详细介绍

2017年11月6日,星期一

CSS mask遮罩属性目前除了IE和Edge浏览器不支持,Firefox,Chrome以及移动端等都已经全线支持,其实际应用价值已不可同日而语。尤其Firefox浏览器,从版本55开始,已经全面支持了CSS3 mask属性。并且mask属性规范已经进入候选推荐规范之列,会说以后进入既定规范标准已经是板上钉钉的事情,大家可以放心学习,将来必有用处。

阅读全文…

CSS3 linear-gradient线性渐变实现虚线等简单实用图形

2017年10月27日,星期五

我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是background-image,于是,我们可以实现任意数量渐变背景图的叠加效果。甚至,理论上,任意彩色jpg图片都是可以使用CSS3渐变背景实现的。

当然我们实际开发的时候,是不会使用CSS3渐变来模拟一张图片的,更多是用来生成一些简单实用的图形。

本文就将通过实现虚线,三角以及加号减号等案例,展示下CSS3 linear-gradient线性渐变要图形生成技巧。

阅读全文…

借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海

2017年09月19日,星期二

iPhone X造型上有个显著的特质,就是有个明显的刘海。

然后,也出现了一些酷酷的交互,例如页面滚动的时候,列表会自动绕着iPhone X的刘海排列。看微博评论,好像觉得这个效果实现很难,实际上,CSS3里面针对这种特定形状环绕的效果已经支持很久了,CSS3 Shapes和CSS3 Regions都是可以实现的,本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。

阅读全文…

-webkit-text-stroke文字描边CSS属性及展开

2017年06月4日,星期日

今天,我使用caniuse查看text-stroke兼容性的时候,发现了一件令我震惊的事情,最新版的Firefox以及Edge已经支持text-stroke描边属性了,并且全部都是采用-webkit-私有前缀,这就意味着在不久的将来,要实现文字描边效果,我们就可以使用原生的text-stroke属性,不用担心兼容性问题…

阅读全文…

真正了解CSS3背景下的@font face规则

2017年03月30日,星期四

很多人只要一提到@font face规则,心中就会不由自主“哦~~”的一声:“这个我知道,可以用来生成自定义字符小图标!”话是没错,问题在于很多人就以为生成字符小图标就是@font face规则的全部,实际上只是功能之一,如果真正了解@font face规则,你会发现,@font face规则可以做的事情其实非常多,尤其我们不考虑IE7,IE8浏览器的情况下……

阅读全文…