CSS3

CSS3制作分享按钮

Nicolas GallagherPure CSS GUI icons中使用纯CSS3制作的各种ICON的DEMO,让我再次领会了CSS3的强大。

CSS3和jQuery制作翻转表单

CSS3中的Transform应用可以说比较广泛了,但其中的3D Transforms去年就听说了,但一直没有使用过。今天在Tutorialzine看到了一篇这方面的教程《http://tutorialzine.com/2012/02/apple-like-login-form/》。自己动手试了一回,效果蛮好的。现在贴上来与大家一起分享。

这篇教程主要使用了CSS3中的3D transform属性和jQuery制作了一个翻转表单的效果。

Google Plus UI Button制作

Google+的“button”效果一直都吸引了我,早就想亲手去体会一下这样的感觉,但一直给自己找借口,直到最近几天,终于动手一试了,试后才知道,他们做的真NB。Google+的UI Buttons形成了一个制作“按钮”、“图标按钮”、“带有标签的图标按钮”、“下拉按钮”、“tip按钮”等按钮的工具或者说UI Buttons框架,使用这一套“UI Button”将会给你的工作带来极大的速度与视觉冲击效果。

那么我们今天的目的就是来看看Google+的攻城师是怎么写的这个代码。因为只有通过代码,我们才能知道其中的原理与制作过程。

HTML Markup:

老样子,首先就需要他的HTML Markup是怎么写的,因为我们在实际应用中这一块是不可缺少的,如果没有这一块,你就无法继续下去,俗话说得好“巧妇难为无米之炊”。下面我们不说别的,直接上代码才是王道:

CSS3伪元素应用——CSS3 Button

有关于CSS3制作buttons,本站前面介绍了多个案例:

CSS3制作动画加载页面

今天主要想和大家一起探讨一下如何使用CSS3制作页面加载内容的动画效果。听起来可能有点晕晕的,我简单的说一下吧,这种效果就是浏览器加载你的页面时,给页面的内容赋予一个动画效果,让他不在那么生硬。最早看过这种效果是小志Blog首页。今天特意看了一下志哥的写的代码,才知道实现起来并不是很困难的事情,不信大家一起来看看我扣出来的代码。

小志博客首页

别的我不多说,我直接使用firebug把志哥的Blog首页代码扒出来,下面我分为两部分:

HTML markup

CSS3制作Breadcrumbs

“Breadcrumb”直译过来就是“面包屑”的意思(后面我直接说“breadcrumb”)。那么Breadcrumb是什么东东呢?我也不想对他进行详细的描述,大家直接看下面的截图,比我说的要更清楚:

breadcrumbs

上图次导航的效果,我想大家在制作Web的时候肯定有碰到,一些简单的效果当然没话说,三下五除二就解决了,但一些特殊的效果还着实让人头痛。那么今天我和大家一起来学习Rea-Team用CSS3制作的几种效果,另外在此基础上我增加了几种效果,希望大家会喜欢。

CSS3制作留言墙

放假期间一直在家陪儿子玩,好久没有动手更新W3CPLUS了,今天刚好有时间学习了一下CSS3制作的留言墙。说白点就是像便签纸一样的效果,只是贴在墙上,当然大家也可以想像成贴在别的地方,具体什么地方我就不多啰嗦了,直奔主题。

目标

今天我们的目标很明确,也先清楚,就是使用css3的相关属性制作一个类似于留言墙的效果,如下面的demo所示:

css3制作的留言墙

CSS3制作日历

前面使用了CSS3制作过Progress Bars分页导航Login栏Search Box等等。今天一起和大家使用css3来制作一个日历效果,希望大家喜欢。

目标

今天我们的目标是制作如下面DEMO显示的一个日历效果:

CSS3 Filter的十种特效

最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果。今天终于抽出时间学习这个CSS3的Filter。不整不知道呀,一整才让我感到吃惊,太强大了。大家先来看个效果吧:

Google Font的运用

网页的字体的使用,大家都清楚,有时一些特殊字体只能使用图片来代替,因为担心用户的浏览器不具有这样的字体无法正常渲染页面的效果。为了解决这个问题,前面本站推出CSS3@font-face来实现一些特殊字体的效果。效果是作出来了,但性能大家又说,加载文件太大,直接影响了网站的性能。说真的真是鱼和熊掌不能兼得呀,而且@font-face对于中文字体来说还是蛮麻烦的。那么是不是除了@font-face就别无他法了呢?不是的,现在Google Font Api也能实现。今天学习了一下觉得蛮实用的,也是相当的方便。整理了一下放上来与大家一起分享。

目标

目标很明确,需要使用下面的字体来渲染网页的字体效果:

页面

返回顶部