现代 CSS

Airen的博客

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也能实现。今天学习了一下觉得蛮实用的,也是相当的方便。整理了一下放上来与大家一起分享。

目标

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

10个实用的CSS3技巧

CSS3的运用是越来越成熟了,在QQ群时常能看到朋友讨论这方面的技术,我也学习CSS3的相关技术也有一年之久了,收获也不少。在我的blog中也收集了不少这方面的教程。为了更方便的与大家分享,我今天特意将本站的有关于CSS3的运用罗列一下,并列出10个常用的相关属性,最后在以一个实例来与大家再次学习相关的CSS3的应用,希望大家能喜欢。

jQuery和CSS3制作回到页面顶部和底部

当一个页面的篇幅太长时,用户的检验就有点烦,特别是当用户要到页面的底部或顶部时,只靠scrollBar来操作的确不爽,我有时也烦。当然,W3cplus也有这样的不足之处,好多朋友都有提过,于是在第二版本中我加了一个回到顶部的效果,但不知道怎么加回到底的效果。因为自己的jQuery还处在学习的初级阶段,属于半吊子中的半吊子,时常依赖别人的插件来做效果。比如说,前面介绍的《jQuery制作go to top按钮》中介绍的回到页面顶部的四个demo效果,都是到处整来的,有时只知道其表,不知道其质。真是感到惭愧呀。

纯CSS3制作满屏图像幻灯片

记得前段时间在《完美的页面背景图片制作》介绍了几种实现全屏背景图片的制作方法,其中第一种就是使用的CSS3的background-size来实现的。今天看了Mary Lou (Manoela Ilic)写的一篇有关于全屏背景图像的幻灯片效果的教程《Fullscreen Background Image Slideshow with CSS3》,觉得特有意思,同时勾起了我动手的冲动。

网站设计的黄金比例应用

记得以前读书时有一个黄金分隔线,今天在网站上看到一些有关于这个黄金比例在Web设计中的应用,觉得很有意思,于是在GG中寻找了这方面的相关资料学习了一回。个人觉得有必要了解一下,如果你对这个也感兴趣的话,不仿跟着我一起往下阅读。

十步图解CSS的position

CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行。今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“position”中的“static、relative、absolute、float”使用,觉得蛮有意思的。整理了一下贴上来与大家一起分享。希望大家能喜欢。

在图解这十个过程之前,我将实例的代码放上来,好让大家一个实体参考:

HTML Markup

表单button的outline问题

outline的使用,大家都喜欢在reset样式表中直接重置:

    * {
      outline: none;
    }
  

Eric Meyers在他的CSS Reset是这样重置的:

页面

返回顶部