文章关键字 ‘css3’

博闻强识:了解CSS中的@ AT规则

2015年08月6日,星期四

大家可能在CSS中见到过字符@然后加一些关键字的用法,这种用法就称之为AT规则。而本文的内容就是列举目前CSS中支持的或即将支持的一些CSS规则,让大家提前有个大致的了解和认识,希望对日后的工作与学习能够提供一些帮助!

阅读全文…

CSS混合模式mix-blend-mode/background-blend-mode简介

2015年05月29日,星期五

熟悉PS的人都应该知道混合模式,什么叠加、正片叠底、颜色减淡、颜色加深、滤色……之类的。在web上基本上常见的现代web技术都支持混合模式,例如SVG啊,Canvas等。CSS3自然也不在话下,本文就将介绍CSS3中两个与混合模式有关的CSS属性mix-blend-mode和background-blend-mode,一起进来看看眼界吧~~

阅读全文…

小tip: 纯CSS实现视差滚动效果

2015年03月17日,星期二

视差滚动效果大家可能都听过,基本上都是JS实现的。

实际上,如果你对兼容性要求不是很高,比方说忽略IE浏览器,则我们使用简单的几行CSS代码就可以实现视差滚动效果了。而本文就是介绍如何使用CSS实现视差滚动效果的。有Demo有截图有源代码展示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

半深入理解CSS3 object-position/object-fit属性

2015年03月15日,星期日


现代web显示环境万变,响应式布局(适配移动端)、半响应布局(宽窄屏适配)以及传统流体布局(任意宽度水平自适应)都比较常见,结果,在处理这些有着固定尺寸的元素的时候,就会遇到障碍,例如,一个2:1的视频,永远要等比例充满容器,但是,随着浏览器宽度不一样,容器的长宽比有可能小于2,也有可能大于2. 你说,你能轻松实现小于比例2时候,视频宽度100%;比例大于2的时候,高度100%吗?

显然,很麻烦,最后大多还是使用JS去把控。正是为了应对类似这样的响应式需求,object-fit和object-position才应运而生……

阅读全文…

小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

2015年01月25日,星期日

当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏,然而,这种布局有一个存在一个影响用户体验的隐患。应该都知道,现代浏览器滚动条默认是overflow:auto类型的,也就是如果尺寸不足一屏,没有滚动条;超出,出现滚动条。于是,问题来了,当内容加载从不足1屏到超过1屏,页面就会跳动!有没有什么好办法呢?本文就将介绍一个简单实用的技能tips, follow me…

阅读全文…

CSS3 cursor属性值zoom-in/zoom-out,grab/grabbing实例

2014年12月22日,星期一

CSS3的领域范围已经渗透到了cursor属性(鼠标手形)。这里简单介绍两个相当实用的组合zoom-in/zoom-out以及grab/grabbing.

本文重在展示,开阔眼界,一如既往,有demo,有截图,有必要的源代码展示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS3/SVG clip-path路径剪裁遮罩属性简介

2014年12月22日,星期一

CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow, gradient, ...之类,还有很重要的一个分支:SVG属性家族!

所谓「SVG属性家族」是指原本SVG的标签属性可以直接使用CSS设置。本文的clip-path就是其中一个属性,可以游走于SVG属性和CSS属性之前。本文中等篇幅,中等难度,丰富的源代码展示,丰富的demo页面,丰富的截图,还有必要的gif演示,总之,希望本文的内容能够对您的学习有所帮助!

阅读全文…

currentColor-CSS3超高校级好用CSS变量

2014年10月25日,星期六

currentColor顾名思意就是“当前颜色”,准确讲应该是“当前的文字颜色”,是非常强大非常好用的一个关键字。本文就将介绍这个关键字的含义、表现,以及提供两个实例展示其价值之处。必要的源代码、必要的截图、必要的demo一个不少,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip: CSS动态实现文本框清除按钮的隐藏与显示

2014年03月28日,星期五

search类型搜索框,设计师常常会设计一个叉叉图标,表示用户点之久可以清除输入的内容。

这是不错的体验!
当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视);FireFox浏览器貌似任何类型的输入框都无动于衷;IE10+浏览器貌似任何输入框都会出现清除按钮,但是长得略微粗糙了点,设计师同学接受不了。
貌似不和谐了,咋办?传授个新技能,借助HTML以及CSS,来模拟清除按钮可动态呈现的搜索框……

源代码、demo页面、截图一个不少,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS3 box-shadow盒阴影图形生成技术

2013年11月29日,星期五

理论上,CSS3 box-shadow盒阴影可以生成任意的图形,小月格格的靓照,含韵格格的靓照那都不在话下。本文且听后宫茶话会上关于CSS3 box-shadow盒阴影图形生成技术的分享。截图、demo源代码示意,美女靓照一个都不少。说不定,你会有别样的收获哦!【挑眉】

阅读全文…