现代 CSS

藤藤每日一练

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

作者：大漠 日期：2012-09-21 点击：287
css3
gradient
:before&:after
藤藤每日一练
Form
提高篇
藤藤每日一练——CSS3制作登录表单
今天藤藤给大家带来的是一个CSS3制作的登录表单效果，这个效果有两上亮点，第一是渐变制作内凹圆角效果，第二个就是渐变制作花边效果。可以说这两个效果的实现都有一定的难度，如果你对css3的渐变属性gradient和CSS3的多背景不了解的话，你是无法实现的。如果你对这个效果感兴趣，那就自己动手一试吧。
阅读全文

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

作者：大漠 日期：2012-09-21 点击：368
css3
gradient
border-radius
藤藤每日一练
入门级
藤藤每日一练——CSS3制作价格标牌
今天藤藤给大家带来一个使用CSS3制作价格标牌的例子，这个例子相对来比较简单，最主要的关键点是如何使用border-radius来制作圆形的效果。同时这个例子中还运用了CSS3的渐变，阴影。
阅读全文

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

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

CSS3制作时钟

作者：大漠 日期：2012-09-18 点击：712
css3
gradient
box-shadow
:before&:after
藤藤每日一练
提高篇
CSS3制作时钟
这个效果是一个CSS3制作的时钟，不过并不是我们传统的时钟风格，分别用三块显示时、分、秒三个部分，而且这个DEMO中藤藤还为其加上了一个js的效果，能让这个效果和现实时钟的时间同步。这个效果运用到的CSS3知识点就是渐变、阴影，而最为关键的就是CSS3的渐变制作。
阅读全文

CSS3制作日历备忘录

作者：大漠 日期：2012-09-17 点击：546
css3
box-shadow
gradient
:before&:after
藤藤每日一练
入门级
CSS3制作日历备忘录
在发这个案例前，首先非常感谢藤藤加入w3cplus，今天开始w3cplus又多了一员猛将，我们会继续为大家制作一些实际可用的CSS3案例，帮助喜欢CSS3的同学一起学习和成长。今天这个案例就是藤藤（本来是要用藤藤的名发布，但由于我们设置还出了问题，所以先放上来让大家看看效果吧）制作的，将两张psd图转换到一个CSS3案例中。在这个案例中主要使用了：CSS3渐变制作日期的头部渐变效果；使用box-shadow制作了多层纸张的效果。
阅读全文

CSS3 Share Button

作者：大漠 日期：2012-09-14 点击：334
css3
button
@font-face
:before&:after
藤藤每日一练
CSS3 Share Button

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

阅读全文

页面

返回顶部