藤藤每日一练

藤藤每日一练——CSS3制作导航菜单与分享按钮

藤藤每日一练——CSS3制作导航菜单与分享按钮

这个案例制作了两个效果,一个是CSS制作的导航效果,这个导航效果配一点js代码实现active状态下改变当前项的效果(从文字转变为icon),导航其他效果都是使用css3的常用属性制作的,具体什么属性我就不多说了,大家一看就知道。第二种效果使用纯css3制作了一个twitter的分享按钮,而且这个按钮还带有Tip的提示效果,详细的请看下面的实现代码:

藤藤每日一练——Get The App Button

藤藤每日一练——Get The App Button

今天这个案例是使用CSS3制作了四个不同的App下载按钮。这个效果中主要使用了gradient制作渐变按钮效果,配合@font-face制作向右的箭头效果,同时使用box-shadow制作阴影效果,而且使用了:nth-child选择器来控制不同按钮的效果。详细的请看具体代码。

藤藤每日一练——CSS3 Button UI Kit

藤藤每日一练——CSS3 Button UI Kit

这个案例是将Button UI Kit的设计图转换成CSS3的DEMO,效果简单,制作的方法也相对简单,说名实话用来用去的属性也就是那么几个,渐变gradient 、阴影text-shadow和box-shadow、还有就是字体icon的制作@font-face。但话说回来,属性简单,制作方法简单,但对渐变色的配置,阴影效果的拿捏还是要一定的技术,不信,你试试,反正我是信了。(^_^)

藤藤每日一练——CSS3 Button Pink

藤藤每日一练——CSS3 Button Pink

今天这个案例是使用CSS3的常用属性制作的一个ICON圆开按钮效果,在这个案例中使用@font-face属性制作了三个浏览器的icon(chrom/firefox/ie),使用gradient制作的径向渐变效果,并且使用box-shadow实现立体效果,用text-shadow制作的icon发光效果,详细的可以看代码。

藤藤每日一练——36 Web Buttons Collection

藤藤每日一练——36 Web Buttons Collection

今天这个案例不单单是一个CSS3的练习案例,他还是一个按钮库,在这个基础上你可以演变更多的按钮效果。说得在大一点,这个案例还能让你了解如何组织你的CSS代码。当然这个案例中的效果制作的非常的细腻,藤藤花了很多心思,正如她所说,在制作这些按钮时,学到很多新的东西,CSS3的属性运用就不多说了,还学到了如何组织代码,如何供用共性的东西等等,如果你感兴趣不仿跟藤藤一起做一下这个案例,我想你会有所收获的。

藤藤每日一练——CSS3制作分步注册表单

CSS3制作分步注册表单

这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变。不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成的,整个案例中使用了:@font-face来制作icon图标,使用gradient来制作渐变的按钮效果,使用text-shadow来制作文字阴影效果等等,方便简单点,但细节与创意才是最重要的,喜欢的同学可以看看是怎么实现的吧。

藤藤每日一练——CSS3 Chunky Button Pack

藤藤每日一练——CSS3 Chunky Button Pack

这是一个CSS3使用gradient、box-shadow制作的按钮集合,在w3cplus有关于按钮方面的实例不少,随便搜索css3 button就会有大把相关介绍。今天老调重谈,还是使用按钮的制作,不过这里想给大家呈现的一种思想是,只要你敢想,就有实现的方法,在这里一共展示了15种不同颜色的按钮,而且在":hover"和“:active”下都有不同的效果。制作方法是一样,但配色,特别是gradient实现渐变色还是需要一定的功底的,不信你就试试吧,我可是信了,因为我也做不到。(^_^)

藤藤每日一练——CSS3制作Freebie标签

藤藤每日一练——CSS3制作Freebie标签

这个案例主要使用css3来制作标签,不过使用的的属性还是常见的那几种,可是要实现还是有一定的难度。其中最有亮点的是使用css3来实现斜线背景以及方格背景,然后就是使用@font-face来制作icon图标。原理简单,重要的是思路,以及这两种背景实现的细节。感兴趣的同学直接看源码。

藤藤每日一练——CSS3制作Twitter信息框

藤藤每日一练——CSS3制作Twitter信息框

今天与大家分享一款使用CSS3制作的Twitter信息分享框。在这个DEMO中,使用的CSS3属性还是那么几个,css3的渐变gradient,盒子阴影box-shadow,css3的选择器等,不过在这个案例中两个特色之处,一个是使用了":before"配合gradient制作了内凹圆角效果,类似于chrome浏览器上的tabs效果,这个效果可有点难度(思路来自于Tabs with Round Out Borders),还有一个亮点就是使用gradient制作了渐变的线条。想一探究竟的同学,看下面的代码吧。

藤藤每日一练——CSS3制作3D表单

藤藤每日一练——CSS3制作3D表单

藤藤今天给大家带来一款使用CSS3制作的3D立体表单效果。在这个案例中主要使用了CSS3的渐变制作了body的背景;使用box-shadow制作的3D立体input框和3D立体按钮;使用@font-face制作的icon图标。

页面

返回顶部