现代 CSS

:before&:after

CSS3制作W3cplus的关注面板

CSS3制作W3cplus的关注面板

W3cplus第三版本皮肤更新好长一段时间了,早就想把站点上的一些CSS3效果分割成单独的案例出来,与大家分享,但受限于时间,今天抽空把页面底部面板效果整理出来了。首先这个效果是有原因的,因为这个效果是当初自己左拼右拼出来的一个效果,后来自我感觉还能接受。上线后也有很多同学问我是图片制作的吗?其实不是的,他是一个CSS3制作的效果。

CSS3制作时钟

CSS3制作时钟
这个效果是一个CSS3制作的时钟,不过并不是我们传统的时钟风格,分别用三块显示时、分、秒三个部分,而且这个DEMO中藤藤还为其加上了一个js的效果,能让这个效果和现实时钟的时间同步。这个效果运用到的CSS3知识点就是渐变、阴影,而最为关键的就是CSS3的渐变制作。

CSS3制作日历备忘录

CSS3制作日历备忘录
在发这个案例前,首先非常感谢藤藤加入w3cplus,今天开始w3cplus又多了一员猛将,我们会继续为大家制作一些实际可用的CSS3案例,帮助喜欢CSS3的同学一起学习和成长。今天这个案例就是藤藤(本来是要用藤藤的名发布,但由于我们设置还出了问题,所以先放上来让大家看看效果吧)制作的,将两张psd图转换到一个CSS3案例中。在这个案例中主要使用了:CSS3渐变制作日期的头部渐变效果;使用box-shadow制作了多层纸张的效果。

css3复选框

css3复选框
本实例主要应用了checkbox的:checked状态来设置其同级后面的label元素的样式及:before&:after生成的内容。所以我们看到的样式其实不是checkbox的,而是其同级后面的label元素的。

CSS3 Share Button

CSS3 Share Button

首先非常感谢藤藤提供的代码,是她用CSS3写的一个分享按钮的效果,而且写得非常不错。结过她的同意,我稍加做了点点的修改,增加了ICON图标上去,让效果看上去更清晰一些。在这个效果中主要使用了:CSS3的伪类选择器(伪元素)、box-shadow和@font-face三个属性,结过颜色细腻的搭配,制作了这么一个完美的分享按钮。

CSS3制作凤凰网导航

CSS3制作凤凰网导航
今天在群讨论一个导航制作(凤凰网娱乐),看过同学发来的gif动画图,想将此图转画为CSS3导航,动手试了一下,还是可以实现的。在这个实例中中要运用了以下知识点:box-shadow,CSS制作图形,旋转,动画。感兴趣的同学可以来围观。

css3导航设计1

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

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手动添加。

页面

返回顶部