Form

CSS3制作登录表单

CSS3制作登录表单

这个表单效果是很普通,但其制作采用的方法却很有创新,其中用到老技术的是@font-face制作icon、box-shadow制作阴影等,最亮点是使用了calc()函数来计算定位的值。这可是一种新玩法,虽然前面有介绍过这个属性的使用方法,后期的制作中却很少使用他,这个案例让我再次领略了calc()函数的功能。如果你喜欢,也可以尝试一下,自己动手丰衣足食。

css3制作日历风格登陆表单

css3制作日历风格登陆表单

好久没有发布案例了,今天发布一个@白牙同学制作的登录表单,这个表单风格类似于日历。其中较为复杂的是登录表单的中链环效果。通过五个span标签,配合CSS3的伪类来制作。详细制作请查看Demo制作过程。

藤藤每日一练——Metro Login Form

藤藤每日一练——Metro Login Form

这是一个很简单也很普通的登录表单的效果,只不过这个案例采用的是Metro的UI设计风格,当然不是Metro UI CSS中的东西,设计风格,色彩类似于Metro。另外在加载表单时,给部分元素使用了transition属性,让你在视觉上加载有动画,其在input[type="text"]得到焦点时,使用了box-shadow模仿了border效果。

Beautiful Login Form

 Beautiful Login Form

好久没有写案例了,今天邮件收到Team Dzyngiri 设计的Creating Beautiful Login Form。他这个案例用了很多CSS3效果,不过有些地方还是使用了图片和jQuery来实现。后来兴趣来了,我根据他的设计效果进行了一些修改。比如说,icon我使用了我们常用的@font-face来制作,icon显示与隐藏,他是通过jQuery来实现,我现在改了他的结构和样式,通过css来实现。感兴趣的同学可以对比一下两种方法的实现过程与区别。

藤藤每日一练——CSS3制作登录表单

藤藤每日一练——CSS3制作登录表单

登录表单的案例,在w3cplus上已经有很多个,但我们一直没有放下这一块的效果制作,虽然结构与制作方法是类似的,但有很多效果实现的技巧还是略有差别,因为我们有一个目标,希望这上面展示的案例效果,能直接拿到项目中使用,另外一件事就是帮助有需要的同学在工作闲空时间学习CSS3的各种知识以及实战经验,来回馈广大前端人员一直对w3cplus的大力支持,希望大家喜欢。

Pure CSS3 Search Form

Pure CSS3 Search Form

今天把《CSS3制作超酷的SearchBox》教程中的案例整理了一下,把教程中的DEMO单独拿出来与大家分享。这个DEMO中一共制作了四个不同的搜索表单的效果,希望大家喜欢。

藤藤每日一练——Pure CSS3 Checkbox

Pure CSS3 Checkbox

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

藤藤每日一练——Pure CSS3 Select

藤藤每日一练——Pure CSS3 Select

表单元素向来是前端人员最为头痛的一件事情,众说周知,表单元素的兼容性是最为难处理的,而且想制作一个美丽好看的表单元件,都需要依赖于脚本来实现自定义。其实我们抛开低版本的浏览器,使用CSS3来美化还是可以的,她不需要依赖任何脚本代码,能将表单的元件美化的很靓丽。今天就给大家推荐一个纯CSS3美化的表单中的下拉选择框(select)的效果。这个效果很简单,使用渐变制作了表单select的背景色,同时使用label标签的伪元素“:after”来制作向右的三角。其中最为有特色的是,使用渐变制作了一个美丽的背景方格效果,详细的请看代码。

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制作分步注册表单

CSS3制作分步注册表单

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

页面

返回顶部