gradient

css3导航设计1

css3导航设计1
本实例通过:before和:after生成高度和宽度透明度都为0且背景为渐变的两个内容,两个不同点在于绝对定位的位置一个为left,一个为right,然后渐变背景的方向刚好相反;最后当鼠标滑过改变高度宽度及透明度,就完成了该动画。因为是对:hover状态下的:before和:after生成的内容进行宽度变化,所以该实例如同先前的那个:hover状态下的激发伪元素动画一样,webkit内核是不支持的。

37个CSS3 Patterns Gallery

今天在《Web页面的纹理背景设计与资源》一文中向大家推荐了一些有关于Web上的纹理背景资源以及制作工具等,其中Lea Verou大师使用纯CSS3制作的纹理背景最吸引我,于是我花了几天的时间整理了一份37种CSS3制作的纹理背景图。这份DEMO能兼容Webkit和Firefox浏览器,其他浏览器没有测试(Lea Verou只能在firefox显示正常),虽然很多代码是copy了Lea Verou大师的,但还是从中学到了不少东西,最起码对CSS3的渐变和背景尺寸等属性有了进一步的了解与加深,现在整理出源码与大家分享。希望大家喜欢。

css3标题设计

css3标题设计
本实例主要是对:before及:after的应用,比较初级,浅显易懂,适合入门。第一个使用border-left和负margin,跟css3没有关系,就是应用了rgba这个属性,使border的颜色有一定的透明值;第二个运用:before和:after生成两个三角叠加起来;第三个背景应用了linear-gradient,然后加上:before和:after生成的三角左右两边各一个;第四个则应用了:after生成元素,然后box-shadow生成阴影,再加上rotate旋转一点角度。这四个虽然比较简单,但是还是非常实用的。

css3选项卡标题样式设计2

css3选项卡标题样式设计2
本实例的tabs斜角效果跟border没有一毛钱关系了,呵呵也跟:before和:after没有关系,却是运用了渐变背景制作的。给了一个角度的渐变,由transparent到红色的220度渐变。然后设置了一个box-shadow的左右偏移为负,使右侧看起来颜色比较深。

纯css3手风琴效果2

纯css3手风琴效果2
这三个案例实际上就是用了两种技术,一个是radio来控制,一个是checkbox来控制,用radio表示只有一个可以展开(radio的只有一个是选中状态),而checkbox则表示可以同时展开多个(checkbox可以多个选中)。其实道理都是一样的,对radio或者checkbox的选中状态进行判断,然后决定其下面的兄弟元素的高度。

css3进度条动画

css3进度条动画
这个进度条是应用css3的渐变背景做出来的,然后应用background-size属性设置大小,然后以这个size为单位平铺。分析的时候你可以先禁用animation这个动画,然后可以用firebug设置background-repeat:no-repeat;来查看它一个单元的渐变背景。得到非动画的原理,我们再来研究动画部分,背景图片的运动,当然是用background-position了。

css3背景运动

css3背景运动
两个css3背景运动实例,一个是图片,一个是渐变。关键点就在于定义背景的位置,使之可以循环往复,注意衔接地方不要出现中断啊。这个对不支持的浏览器降级也可以很优雅,第一个就是背景的平铺,至于第二个也可以设置一个背景,或者直接设置一个border-top什么的都可以。

页面

返回顶部