藤藤每日一练

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

藤藤每日一练——CSS3制作登录表单
今天藤藤给大家带来的是一个CSS3制作的登录表单效果,这个效果有两上亮点,第一是渐变制作内凹圆角效果,第二个就是渐变制作花边效果。可以说这两个效果的实现都有一定的难度,如果你对css3的渐变属性gradient和CSS3的多背景不了解的话,你是无法实现的。如果你对这个效果感兴趣,那就自己动手一试吧。

藤藤每日一练——CSS3制作价格标牌

藤藤每日一练——CSS3制作价格标牌
今天藤藤给大家带来一个使用CSS3制作价格标牌的例子,这个例子相对来比较简单,最主要的关键点是如何使用border-radius来制作圆形的效果。同时这个例子中还运用了CSS3的渐变,阴影。

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

藤藤每日一练——CSS3制作登录表单
W3cplus从今天刚开推出藤藤练习的CSS3系列。出这个系列主要是为了让同样有着CSS3兴趣的同学更有动力,在这个系列中都是由W3cplus美女成员藤藤每天根据国外搜集的有关psd设计图,然后将设计图通过css3的代码转换成DEMO案例。一是为了自己提高,二是与其他有同样爱好的同学一起分享。如果你喜欢,那就持续关注w3cplus的有关更新。

CSS3制作时钟

CSS3制作时钟
这个效果是一个CSS3制作的时钟,不过并不是我们传统的时钟风格,分别用三块显示时、分、秒三个部分,而且这个DEMO中藤藤还为其加上了一个js的效果,能让这个效果和现实时钟的时间同步。这个效果运用到的CSS3知识点就是渐变、阴影,而最为关键的就是CSS3的渐变制作。

CSS3制作日历备忘录

CSS3制作日历备忘录
在发这个案例前,首先非常感谢藤藤加入w3cplus,今天开始w3cplus又多了一员猛将,我们会继续为大家制作一些实际可用的CSS3案例,帮助喜欢CSS3的同学一起学习和成长。今天这个案例就是藤藤(本来是要用藤藤的名发布,但由于我们设置还出了问题,所以先放上来让大家看看效果吧)制作的,将两张psd图转换到一个CSS3案例中。在这个案例中主要使用了:CSS3渐变制作日期的头部渐变效果;使用box-shadow制作了多层纸张的效果。

CSS3 Share Button

CSS3 Share Button

首先非常感谢藤藤提供的代码,是她用CSS3写的一个分享按钮的效果,而且写得非常不错。结过她的同意,我稍加做了点点的修改,增加了ICON图标上去,让效果看上去更清晰一些。在这个效果中主要使用了:CSS3的伪类选择器(伪元素)、box-shadow和@font-face三个属性,结过颜色细腻的搭配,制作了这么一个完美的分享按钮。

页面

返回顶部