前端开发者学堂 - fedev.cn
    发布于

    CSS3 Hover Effects

    这个案例效果很像lightbox的效果,鼠标悬浮在图片上时,会将图片放大,并且移至页面中心位置。这个效果的实现并没有使用太多的技术,最关键的就是使用了CSS3 transform中的scale和translate,其中使用scale()来放大图片,而translate()用来改变其位置,另外使用了CSS3选择器的:nth-type-of()分别对六张图片进行放大和定位。同时使用了transition属性,让整个图片放大效果看起来更圆润,详细的效果看代码吧,更有说服力。

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

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

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

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

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

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

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

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

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

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

    CSS3重构百度图片首页中图片展示效果

    今天使用百度图片搜索图片时,无意之中看到首页的图片展示效果具有旋转、阴影等效果。好奇之下查看其源码,使用了一些CSS3属性制作,但不知道出与什么原因,在制作这个效果中并不什么完美(我个人认为),于是动手自己整了一个,放上来与大家分享,希望大家喜欢