网页设计新式方法:CSS3应用、网络字体和图标

网页制作Webjx文章简介：适应网页设计新趋势：CSS3、字体以及图标.

很荣幸从事网页设计业，新技术、新技巧越来越多，我们的工作越来越轻松，甚至不用设计软件，利用网上的一些工具都能完成设计。

当然，若想更轻松的工作，就必须跟进新趋势、新方法，本文介绍了网页设计中一些新式设计方法。

CSS3可以称得上是伟大，无论是开发者还是设计师都能从中受益。CSS3提高了网页整体的表现，为我们的设计实验提供了大量机会，让我们可以把很多灵感付诸实践。技术的提高，自然也带来了很多问题，多设备浏览网络，分辨率多种多样，成千上万的设别种类、屏幕尺寸应用场景，但不管怎样，都要满足用户的浏览需求。

有问题便需要解决，解决问题需要知识，需要探索精神，我们需要不断学习。

那这意味着什么？不可能为每一种设备一一进行设计吧？取而代之的是，我们需要改进工作流程。
我们的设计流程、开发流程需要迭代了，我们应该使用更多适应性较强的技术、元素。

别看CSS3刚出来不久，实际上，CSS3于1999年开始制定，花了14年！

跟前几个版本的CSS不太一样，CSS3划分为好几个模块——2012年年中发布了超过50种模块，有4种尤其值得推荐，经过了大量的讨论、检测，这4种可以说已经是很完善的了。W3C推荐的这4种模块是：

Media Queries （媒体查询）

Namespaces （命名空间）

Selectors (Level 3) （选择器）

Colour（颜色）

还有一些模块，比如 “Background and Borders”, “Multi-Column Layout”, “Flexible Box Layout” 作为“候选推荐”，也很值得关注。
还有一些例如 “CSS Animations（CSS动效）”, “CSS Transforms（CSS转换）” and “CSS Filter Effects（CSS滤镜效果）”,尚处于起草阶段。

除了上面4种W3C推荐的模块，还有很多CSS3技术也很流行。包括

CSS Gradients（CSS渐变）

Border-radius （边框半径）

Box-shadow （图层阴影）

Multiple Backgrounds （多重背景）

Opacity (rgba) （不透明度）

Animations & Transforms （动效&转换）

我们来看看细节：

CSS 渐变

CSS渐变的引入取代了背景图像，无需图像也可以打造渐变

为页面减负，加载更快，而且，响应式问题也好解决。

边框半径

现在，我们可以用CSS打造圆角效果，不用修改图像即可实现。非常方便的就能实现图像的边框、圆角、渐变、阴影的处理——过去想要达到这种效果，要费煞苦心，现在非常的方便。

如果你客户是个明白人，那你就挺走运，要不然还得给他们解释新技术。利用CSS可以实现多设备较为一致的体验效果，圆角的优雅也无可替代！

图层阴影

CSS3引入了图层阴影，很简单的就能添加投影。而且还支持文字！

跟渐变一样，也不用修改图片效果了，直接拿来就用，用CSS即可轻松实现。

多重背景

CSS3多重背景的引入提供了层次感极强的背景效果，极其美妙。

不透明度(rgba)

IE9向上兼容，终于不用制作重复的透明图像了。这就是为何我喜欢CSS3,简便、高效。

动效&转换

让你的网页更具交互性，尽管设计起来很困难，但是倘若成功，你的网站会大为动人。