css3

纯css3列表切换动画

纯css3列表切换动画
本实例的思路和之前说的用radio来控制手风琴效果有异曲同工之效。主要应用radio单选按钮来确认状态,然后对这个状态下的兄弟元素进行css控制。当然这里不比手风琴有几个radio就有几个内容,这里是一个内容,所以所有的radio应该和这个内容是兄弟元素,以便使用兄弟元素选择器~。然后对各个状态下的内容进行css控制,或显示或隐藏或浮动等。

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面包屑设计

css3面包屑设计
这里总共有四种面包屑效果,其中第一种运用:before和:after,运用border生成同等大小的尖角,叠加起来左右错动1px;第二个还是运用:before和:after,运用border生成不同的尖角,一个在左一个在右;第三个是运用一个:after生成一个正方形,设置border-radius然后rotate旋转45度;第四个直接运用水平扭曲就skewX就可以了。

css3选项卡标题样式设计3

css3选项卡标题样式设计3
这是第三个tabs的标题设计了,这次应用的又跟上两个不是一样的技术。这里用了:after来生成了,然后对生成的内容水平方向上扭曲skewX来达到斜切的效果。当然li的margin距离要刚好等于生成a:after生成内容的宽度。然后就是注意box-shadow了。注意火狐14.0更新后,skew得写成skewX或skewY分别表示水平方向和竖直方向偏移,这里它的demo用的是skew,所以火狐下并没有斜切的效果,我们可以firebug手动添加。

css3选项卡标题样式设计2

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

css3选项卡标题样式设计1

css3选项卡标题样式设计1
说起来惭愧,这个实例以前看起来的时候,看得莫名其妙,一时云里雾里。于是静下心来仔细研究下,才终于发现这个窍门。这里我们看到的选项卡tabs标题的高度并不是由height来撑起来了,各位firebug就可以知道了,设置的height是为0,然后line-height为30px,其实这个还不是关键,关键在于设计了border-bottom为30px。至于上面的那个斜角效果则是border-right为transparent。鼠标滑过的颜色是通过改变border-bottom-color来改变的,至于重叠的部分则是用了margin-right为负值。没有:before&:after一样拿下斜角效果。不得不说这又是border的一个杰作,加上上一个实例,不得不感叹我们对于这个border生成三角形的效果运用还是太基础啊,人家这才是高水平的应用。

创建一个褶皱带

创建一个褶皱带
本实例主要是对:before,:after和rotate的应用。其实神来之笔在于对border的应用,一般来说我们经常会使用宽高为0,然后再运用border来设计一个三角出来,可是这里是应用border三角和一个宽度或高度的结合,设计出来了我们看到的向上折叠的效果。正好:before生成一个同色的向上折叠,:after生成一个阴影色的旋转下的折叠。

CSS3 Full Background Slider

CSS3 Full Background Slider
今天在365psd上看到一个psd效果,很有意思,想着能不能转成web页面,这问题想得太SB了,然后接着想,转成带有css3的动画效果。那转成什么呢?思来想去做了一个全屏背景图的幻灯片效果。虽然是一个简单的demo,但里面集合了CSS3众多属性,从伪结构选择器,到圆角,阴影以及动画等。

页面

返回顶部