藤藤每日一练——CSS3制作分步注册表单
这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变。不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成的,整个案例中使用了:@font-face来制作icon图标,使用gradient来制作渐变的按钮效果,使用text-shadow来制作文字阴影效果等等,方便简单点,但细节与创意才是最重要的,喜欢的同学可以看看是怎么实现的吧。
![藤藤](https://static.fequan.com/vueconf/img/default_avatar.png)
这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变。不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成的,整个案例中使用了:@font-face来制作icon图标,使用gradient来制作渐变的按钮效果,使用text-shadow来制作文字阴影效果等等,方便简单点,但细节与创意才是最重要的,喜欢的同学可以看看是怎么实现的吧。
今天这个案例不单单是一个CSS3的练习案例,他还是一个按钮库,在这个基础上你可以演变更多的按钮效果。说得在大一点,这个案例还能让你了解如何组织你的CSS代码。当然这个案例中的效果制作的非常的细腻,藤藤花了很多心思,正如她所说,在制作这些按钮时,学到很多新的东西,CSS3的属性运用就不多说了,还学到了如何组织代码,如何供用共性的东西等等,如果你感兴趣不仿跟藤藤一起做一下这个案例,我想你会有所收获的。
今天这个案例是使用CSS3的常用属性制作的一个ICON圆开按钮效果,在这个案例中使用@font-face属性制作了三个浏览器的icon(chrom/firefox/ie),使用gradient制作的径向渐变效果,并且使用box-shadow实现立体效果,用text-shadow制作的icon发光效果,详细的可以看代码。
这个案例是将Button UI Kit的设计图转换成CSS3的DEMO,效果简单,制作的方法也相对简单,说名实话用来用去的属性也就是那么几个,渐变gradient 、阴影text-shadow和box-shadow、还有就是字体icon的制作@font-face。但话说回来,属性简单,制作方法简单,但对渐变色的配置,阴影效果的拿捏还是要一定的技术,不信,你试试,反正我是信了。(^_^)
今天仿制了Twitter的登录表单,除了大背景是使用的img,其他都是纯CSS3代码实现。整个效果使用了Bootstrap的表单风格,并且运用box-sizing改变了元素默认的box module风格,同时使用了CSS3的gradient、box-shadow和text-shadow制作了其他效果。具体请查看相关代码。
表单元素向来是前端人员最为头痛的一件事情,众说周知,表单元素的兼容性是最为难处理的,而且想制作一个美丽好看的表单元件,都需要依赖于脚本来实现自定义。其实我们抛开低版本的浏览器,使用CSS3来美化还是可以的,她不需要依赖任何脚本代码,能将表单的元件美化的很靓丽。今天就给大家推荐一个纯CSS3美化的表单中的下拉选择框(select)的效果。这个效果很简单,使用渐变制作了表单select的背景色,同时使用label标签的伪元素“:after”来制作向右的三角。其中最为有特色的是,使用渐变制作了一个美丽的背景方格效果,详细的请看代码。
这个案例是使用CSS3制作的一个媒体分享圆形按钮。效果看起来很简单,其实制作也非常的简单的,主要就是径向渐变的运用,以及@font-face实现的ICON效果,当然其中也离开不其他属性的点缀效果,比如说box-shadow制作的阴影,transition制作的动画效果等。
Codrops CSS3 Lightbox总供有三个效果,今天把最后一个效果放上来与大家分享,这是一个完美的Lightbox效果,是有Codrops的Mary Lou制作的,能把CSS3运用到如此完美,真是让人折服。最后一个案例与前两个Lightbox的效果上没有多大的区别,这一部如何制作,如果你观注了本站的相关案例,我想您是懂了,而这个效果与前两个不同之处是添加了向前向后播放的按钮效果。
今天的案例是个老案例,使用CSS3代码来制作3D按钮效果,w3cplus有关于buttons的介绍已经很多,如果你没有看过,不仿点击这里。今天藤藤给大家带来的还是一个系列的3D按钮制作效果,制作方法是老套(万变不离其中),但其中色彩的调各让我很折服,因为很多效果在ps中制作是容易,特别对于设计师来说更容易,但对于一名coder来说,还是有点困难,具体请看制作的代码,让代码来展现所有的一切。我想您和我一样会为这样的效果折服,至少我已膜拜藤藤以css3的了解,以及其对制作过程中的细节的追求。
这个DEMO是来自于Red Team Design。这个站点是一个学习CSS3的好去处,简单明了,也是我常常去逛的一个网站。今天收到一个CSS3效果,就类似于一张图片四个角使用一个折角遮盖的效果。在整个效果制作中使用了两个标签配合“:after”和“:before”制作了四个折角,同时使用旋转transform以及定位到每个角落上,其中最难的一点就是,使用gradient制作了四个切角效果,这个效果在《CSS3+jQuery制作切角的Tabs》一文中有做过详细介绍。接下来将这个效果使用代码展现给大家。希望大家通过这个案例会有所收获。