:before&:after

iPhone Checkbox Effects

iPhone Checkbox Effects

iPhone Checkbox Effect是一个很经典的CSS3的案例了,这样的效果到处可见,如果你还不清楚怎么制作的话,可以点击这里,阅读详细的制作方法。而且w3cplus有关于checkbox的制作方法教程也蛮多的,前不久,藤藤每每日一练中就有一个优秀的案例,今天我只是把以前教程中运用的demo整理放上来,希望对新学习的同学有所帮助。

23 Box-shadow Effects

23 Box-shadow Effects

Box-shadow效果是CSS3中很实用的属性之一,现在网站大量的阴影效果都是通过这个属性来制作,今天整理了23个盒子阴影效果以供大家参考。当然这个案例中的效果不单单是一些简单的box-shadow效果,在整个案例中,有些效果使用了CSS3的伪类选择器,以及CSS3的transform等属性,制作了一些特殊的box-shadow效果,感兴趣的往下吧。

藤藤每日一练——Pure CSS3 Checkbox

Pure CSS3 Checkbox

这个案例是使用了CSS3制作了六种不同风格的checkbox效果。表单的checkbox自定义效果,在webkit内核下,我们可以随心所意的进行自定义样式的美化,但在其他浏览器下还是有些麻烦,早期使用jQuery插件或者别的JavaScript脚本代码来实现,今天的CSS3属性能让你解决这个难题。当然你要知道制作的思路,不然还是有难度的。在整个效果中,最关键的是标签的配合以及":before"和“:after”等CSS3选择器的应用,特别声明一下,由于input的伪类选择器在部分浏览器下还不支持,所以需要添加一些标签来辅助实现":before"这样的伪类选择器的效果,详细的请看藤藤是怎么制作的吧。

Colorful CSS3 Animated Navigation Menu

Colorful CSS3 Animated Navigation Menu

Colorful CSS3 Animated Navigation Menu是Martin Angelov制作的,今天看到这个效果很有意思,特意扒过来与大家分享。整个效果是CSS3使用了BootstrapFont Awesome字体图形制作了一个彩色的动画下拉菜单。其中运用到的CSS3属性有:nth-child()选择器,gradient制作渐变效果,@font-face配合:before伪选择器制作的ICON。其中最具特色的是使用max-height来控制下拉菜单的显示与隐藏。你有试过吗?没试过请继续吧!

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

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

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

藤藤每日一练——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重构百度图片首页中图片展示效果

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

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

Tabs with Round Out Borders

Tabs with Round Out Borders

这个效果和前面藤藤制作的CSS3制作Twitter信息框是一样的,不过比她的效果简单一些,再次放上来的目的是写了一篇《Tabs with Round Out Borders》博文,主要针对的就是这种效果的制作思路与细节。在这个效果中主要运用的是元素的“:after”和“:before”来制作tabs的底部内凹圆角效果。

CSS3制作立体导航

CSS3制作立体导航
首先非常感谢verycd的@不点同学提供案例。这个案例是使用CSS3制作的一个多颜色3D立体导航。在这个案例中有两个关键之处,其一使用box-shadow制作导航立体效果,其二使用gradient配合:before选择器制作导航项之间的分隔线。详细请参阅代码。

页面

返回顶部