CSS3 技术

不确定你可以利用CSS3吗?再想想。网络先锋如Andy Clarke 和 Jeremy Keith一直提倡网页设计要“逐步加强”。

逐步增强是指在网站设计师时要兼顾到旧版浏览器的可用性,而“增强”则是针对喜欢最新技术的用户。

在这样的设计阵营,你利用可以尽情利用CSS3属性的优势,如圆角,边框背景和文本框阴影。新版浏览器用户会看到一个很好的版本,并且对旧版本用户( IE6同学,我就不每次都点名了)将看到较为基本的版本。

CSS3 动画 
在网络上动画经历了很多阶段。起初,我们只能用GIF动画图片。然后,我们又几乎限于Flash。现在,我们可以选择的有Flash,Silverlight,以及GIF,JavaScript和甚至乎CSS3。CSS3更轻量,更易用,可创造令人难忘的微妙的动画。


   圆角 
在2005年和2006年的Web 2.0风格,使得圆角大受欢迎,恼人的问题是,在当时要实现这些可不容易。有没有固定可行的方法来建立真正的圆角。退而求其次的,大多都是利用CSS,JavaScript和图像来模拟。

现在CSS3允许浏览器直接生成圆角,不仅创建轻松,而且更有效率,因为用户不必下载额外的图片或JavaScript文件。

2010年,设计师正越来越多地利用浏览器的这些新功能优势。


图框和文本阴影 
在网络的早期,利用阴影创造一种立体感是早已有之(甚至有时是用过头了)。但其实并不总是那么好搞的,要给文本添加阴影,你得使用的图片,从而增加加载时间,并且维护更加困难。框架阴影需要一些图片和CSS技巧,如“滑动门”。

CSS3具有阴影高度可定制的能力,这对于创新影响十分巨大,不仅包括阴影,还有内阴影。有创意设计师已经开始使用这些CSS3效果,模拟浮雕和压印的效果。


RGBa和半透明 
多年来,使用不透明性和透明度,在网络上技术上是不可能的。你有三种选择:使用平面图像模拟的透明度,使用不能跨浏览器兼容的PNG格式,或者去折腾CSS基本的透明选择器和滤镜。

CSS3使得设计师在使用RGBa不透明属性时,更加稳定和自由。你可以在很多方面利用半透明的优点,其中之一就是使用半透明的颜色叠加到复杂背景时起到特别作用。之前,这种效果如果没有使用PNG是不切实际,也是不可能达到的。
   


手机兼容设计 
移动网络让成千上万的用户在排队等候(无事可做)时能够检查他们的银行帐户,在地铁里可以查看最新分数,在开车时更新自己的Twitter的情况(这是一个危险的习惯?),移动网络正在茁壮成长。

据我们所知,很多公司都都在考虑他们的网站是否要加入移动网络,如果是的话又会怎么样。而创新公司则已经投入巨资在开发高效的用户友好的移动版本网站。


   创新 
社交媒体使用率的爆炸性增长证明,人们对连接和共享东西总是热情有加的。

在设计领域,我们已经看浏览和分享别人作品的趋势正在增长。作为设计师,现在我们感受着别人创造力的冲击。这不仅提高了设计质量的标准,还鼓励了共享精神,也促进了创造力和创新文化理念。
清新的插画 
如果你像我一样,看着迪斯尼电影长大,你会欣赏动画里面每一帧的效果。我们早已淡忘了墨水和马克笔画插画的日子,工具的演变产生了一些非常有创意的方法去实现设计。

很多设计师正在学习使用光滑,干爽,清晰的插图创建一个独特的感觉,这不是摄影或简单的剪贴画可以达到的。结果是出现了很多美丽动人富有吸引力的专业插画设计。


纹理背景 
纹理图案背景在网络上没有什么新鲜的。但是,最近几个月这种技术已经出现了有趣的变化。我指的是“微型纹理”, 是微妙的,几乎不明显的背景纹理。


缩略图 
你可能会说,“缩略图从网络出世那天早就有了。怎样么会是趋势呢?”是的,它们一直被使用,但普遍很简单。有一个缩略图,点击一下就可以看得更大的图片。需要的功能就是这样,不过很无聊。

在最近几个月,设计师们开始探讨,“怎样才能使缩略图更精彩?”这些探讨导致了缩略图在智能和可用性方面大大增强。


水彩效果 
随着网络的发展,我们看到越来越多的设计师正从各种媒体来源获取灵感。毫不奇怪,艺术就是来源于此。

最近出现风格之一是模拟水彩。这种轻柔优雅风格看起来总是那么清晰和平静。


手写 
手写字体和草稿字体一直滥用得很厉害。基于这个原因,许多设计师避开这两种类型,出于厌恶或者因为看起来很业余的感觉。不过最近,许多设计师都发现,如果使用得当,手写风格可以传达手工艺和策划的意识。在结合上下文环境使用,会是一个功能强大的表达方式。


社交媒体 
现在人们在Facebook和Google上花更多的时间,设计师正用创新的方法来把社交媒体整合到网站上。

有些设计师竟然在社交媒体网络上发布内容,然后利用他们的网站聚合。

可以很有把握的说随着2010年的进一步发展,我们将看到更多的设计师创造性地整合社交媒体到网站,以更好的吸引用户。


固定元素 
现在,浏览器可以更好地支持元素position: fixed属性,我们看到这个属性的一些巧用。

很多情况下,固定的元素(如固定不动的导航条)可以为目标客户更好服务,网站也更加实用。

固定元素令人难忘且增强用户体验,有无数的创意用途,我们将会看到设计师利用这些优点。

那些流行趋势是你在追随的?还有其他什么样的新兴的趋势?欢迎讨论 

2012网页设计趋势(下)相关推荐

  1. 10必试背景网页设计趋势

    在设计网站的早期阶段,您必须做出的最关键的选择之一就是要使用的背景类型.在当今有趣的网页设计趋势下,无需坚持单一的颜色. 从逼真的木纹图案到有趣的几何形状,有多种方法可以确保您创建的网站既新鲜又时髦. ...

  2. 2012年网页设计趋势

    每年的网页设计趋势都会有所改变,跟时装界一样,或者说世间万物亦是如此.作为网页设计师,你必须时刻关注业界的发展和变化,随时作出应对的准备.2012年网页设计的趋势将会是怎样的呢?一起来看看flashu ...

  3. 20个2013年最值得关注的网页设计趋势

    在过去的一年中,我们都看到了网页设计趋势在日益增长.或许有些朋友还记得我早些时候的一些文章关于网页设计,有兴趣的可以点击来查看,现在我们可以看到其中许多想法已经实现了,甚至有些采用了一些更高层次的新奇 ...

  4. 【转载】20个2013年最值得关注的网页设计趋势

    原博文地址:http://ued.lanrentuku.com/di/2013wangyeshejiqushi.html 在过去的一年中,我们都看到了网页设计趋势在日益增长.或许有些朋友还记得我早些时 ...

  5. 2013年最受欢迎的20大网页设计趋势

    在过去的一年中,我们都看到了网页设计趋势在日益增长.或许有些朋友还记得我早些时候的一些文章关于网页设计,有兴趣的可以点击来查看,现在我们可以看到其中许多想法已经实现了,甚至有些采用了一些更高层次的新奇 ...

  6. 我的征程是未来!带你展望2015年最重要的网页设计趋势

     我的征程是未来!带你展望2015年最重要的网页设计趋势 一年到头,总结很重要.但是总结的文章看多的总不免要问,明年会如何?Well,的确是时候展望一下未来了.2014年涌现了许多令人印象深刻的网 ...

  7. 网页设计趋势:模糊背景在网站中的经典应用案例

    如今,网页设计领域出现了多种创新的设计方法,例如视差滚动,全屏背景,单页设计等等.今天这篇文章向大家介绍另一种新的网页设计趋势--模糊背景.这种类似于摄影拍摄的效果应用在网页中能够突出主题内容,同时若 ...

  8. 2010年Web网页设计趋势

    对于追求无限创意和具实验探索精神的Web设计师来讲,趋势一说可能会显得有点可笑,如果每个设计师都遵循原有的趋势,那谁还去开创新趋势?没有了新趋势,下一个轮回的时候,设计师们又去遵循什么趋势? 但不管你 ...

  9. 2020年房价趋势_2020年的9种网页设计趋势

    2020年房价趋势 重点 (Top highlight) Many design trends posts act like art directors - practically guiding y ...

最新文章

  1. android 图标的格式,Android Design
  2. shiro之第一个程序认证
  3. 全面解读php-面向对象
  4. 包-封装模块、设置__init__和外界导入包
  5. POJ - 4045 Power Station(树形dp/树的重心)
  6. 【JAVASCRIPT】处理表单事件
  7. [jQuery原理] jQuery入口函数
  8. 如何用Python画一只机器猫?| 原力计划
  9. linux查看所有目录
  10. SpringCloud微服务架构前后端分离项目实践
  11. 自己收集的全国行政区划,具体到县级,不包括过直辖市和特别行政区
  12. 用CAD看图软件查找文字需要怎么做
  13. 计算机python考试真题及答案新课标_CCF计算机职业资格认证考题答案详解(Python)...
  14. html5页面适配方法,H5案例分享:HTML5移动页面适配方法
  15. rest_framework学习之解析器(Parsers)
  16. 大数据计算框架与平台--深入浅出分析
  17. 美团外卖强杀门背后的真相,你看到的是真的吗?
  18. 什么样的恐怖才是真恐怖?由最近所看的一部电影以及最喜欢的游戏系列想到的。
  19. Win10 WiFi连接不上,如何重新配置DNS地址
  20. 直面春招!一口气拿了9家公司的offer,涨薪7K!

热门文章

  1. 455. 分发饼干 golang
  2. C/C++命令行参数那点事
  3. 非常精简的Linux线程池实现(一)——使用互斥锁和条件变量
  4. Java虚拟机学习集锦是我攒来的,带你碾压面试官!
  5. 日志模块logging用法
  6. JAVA-初步认识-第十三章-多线程(验证同步函数的锁)
  7. LintCode Find the Weak Connected Component in the Directed Graph
  8. 使用Python重命名MP3标签
  9. Sphinx编译docs文档
  10. HDU 2072(单词数)题解