现代 CSS

CSS3制作Lightbox效果

CSS3制作Lightbox效果

Lightbox效果以往都是依靠jQuery插件或者别的JavaScript脚本来实现,今天开始为大家提供几个纯CSS3制作的Lightbox效果。今天这个Lightbox效果使用的是input[type=radio]配合CSS3的相邻兄弟元素选择器(E + F)来实现,这种制作方法最关键的地方是结构的配合,以及label的for属性与元素的id属性配合一致,并且运用了display:table属性实现弹出层的图片居中效果。详细的请看下面的代码。

藤藤每日一练——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选择器来控制不同按钮的效果。详细的请看具体代码。

Twitter Login Or Signup Form

Twitter Login Or Signup Form

今天仿制了Twitter的登录表单,除了大背景是使用的img,其他都是纯CSS3代码实现。整个效果使用了Bootstrap的表单风格,并且运用box-sizing改变了元素默认的box module风格,同时使用了CSS3的gradient、box-shadow和text-shadow制作了其他效果。具体请查看相关代码。

CSS3 Hover Effects

CSS3 Hover Effects

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

藤藤每日一练——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实现渐变色还是需要一定的功底的,不信你就试试吧,我可是信了,因为我也做不到。(^_^)

页面

返回顶部