2012网页设计趋势(下)

CSS3 技术 

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

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

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

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

2010网页设计趋势 MazingTech.Com翻译

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

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

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

2010网页设计趋势 MazingTech.Com翻译

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

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

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

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

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

2010网页设计趋势 MazingTech.Com翻译

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

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

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译
   创新 
社交媒体使用率的爆炸性增长证明,人们对连接和共享东西总是热情有加的。

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

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

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

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

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

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

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

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

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

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

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

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

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

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

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

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

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译
固定元素 
现在,浏览器可以更好地支持元素position: fixed属性,我们看到这个属性的一些巧用。

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

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

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/404557.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

树莓派CM4 装系统和换源

一、系统下载 官网:Operating system images – Raspberry Pi 最新的版本删除了默认账号pi。考虑以前的使用习惯,此处下载以前的buster debian版本。CM4是arm64架构,根据板子的配置容量不同可选相应的版本,我这里选择lite版本。…

C++沉思录

C沉思录 第五章 代理类 : 为了实现容器或数组的多态性。 1 #include <iostream> 2 3 using namespace std; 4 5 class Vehicle 6 { 7 public: 8 virtual void start() const 0 ; 9 virtual Vehicle* copy() const 0 ;10 virtual ~Vehicle() {};11 };12 1…

VC内存泄露检查工具:VisualLeakDetector

From: http://www.xdowns.com/article/170/Article_3060.html 初识Visual Leak Detector 灵活自由是C/C语言的一大特色&#xff0c;而这也为C/C程序员出了一个难题。当程序越来越复杂时&#xff0c;内存的管理也会变得越加复杂&#xff0c;稍有不慎就会出现内存问题。内…

JQuery Easy Ui 可装载组合框 - ComboBox

JQuery Easy Ui 可装载组合框 - ComboBox 可装载组合框 - ComboBox 继承自$.fn.combo.defaults,通过$.fn.combobox.defaults覆盖默认值 combobox显示的是一个可以编辑的文本框和一个下拉列表.允许用户从里面选择一个或者是多个值,用户可以直接输入值到列表顶部,或者可以从列表选…

用SQL实现统计报表中的“小计”和“合计”

客户提出需求&#xff0c;针对某一列分组加上小计&#xff0c;合计汇总。网上找了一些有关SQL加合计的语句。都不是很理想。决定自己动手写。 思路有三个&#xff1a; 1.很多用GROUPPING和ROLLUP来实现。 优点实现代码简洁&#xff0c;要求对GROUPPING和ROLLUP很深的理解。 …

Linux串口驱动程序-termios结构体中的VTIME和VMIN应用

#Linux串口驱动程序-termios结构体中的VTIME和VMIN应用 参考 https://tldp.org/HOWTO/Serial-Programming-HOWTO/x115.html 最近在看Unix-linux系统编程一书&#xff0c;做到第六章的时候需要做一个标准输入的超时处理。如下图所示 需要改动的&#xff0c;是原书的play_aga…

C# 线程手册 第一章 线程定义 .NET 和 C# 对线程的支持

由于.NET Framework 支持自由线程&#xff0c;所以自由线程在所有.NET 语言中都存在&#xff0c;包括C#和VB.NET. 在下一部分&#xff0c;我们将着重关注如何提供这种支持以及更多关于线程是如何做到的&#xff0c;而不再关注线程是什么。我们将讨论一些能够进一步帮助区分进程…

前端第一天 HTML基础

前端第一天 HTML基础 1.是什么 HTML里值得记住的就几个点&#xff0c;第一&#xff0c;这东西还有自身也有结构 这东西是个超文本&#xff0c;可以挂载文字图片视频或者别的超文本自身可以通过各种各样的tag进行标记&#xff0c;排版给浏览器提供渲染的依据&#xff0c; 2.…

view2.0移植自定义图标,带颜色修改

1.下载你的iconfont项目 1.将图标添加到项目&#xff0c;修改font-family值 2.下载项目打包文件&#xff0c;解压后如图所示 我们只关心里面的iconfont.css和iconfont.json 我们在这个文件夹&#xff0c;新建一个convert.js,内容如下 //convert.js let path1 "./iconf…

H3C——路由策略和策略路由实例配置

配置如下&#xff1a;[IP]int s0/2/0[IP-Serial0/2/0]ip add 202.112.1.10 28[IP-Serial0/2/0]int s0/2/1[IP-Serial0/2/1]ip add 61.67.1.10 28 [IP-Serial0/2/1]int lo0[IP-LoopBack0]ip add 10.10.10.10 32[IP]ip route-static 0.0.0.0 0 202.112.1.9 指条静态缺省路由到R1 …

功能:人脉(People Hub)7-固定到“开始”屏幕

如果是您的亲人和密友&#xff0c;再或者是领导和重要客户。 您需要经常沟通&#xff0c;可以将他的联系人头像固定在开始屏幕上&#xff0c;方便您的沟通。方法&#xff1a;很简单&#xff0c;“长按该联系人”后&#xff0c;有菜单出现&#xff0c;选择弹出菜单中的“固定到‘…

《OEA - 实体扩展属性系统 - 设计方案说明书》

这篇设计文档是 12 月份写来参加公司的研发峰会的&#xff0c;自己倒是信心满满&#xff0c;不过最后还是没有入围。现在想想也没啥大用&#xff0c;所以贴出来&#xff0c;期待与园友交流。 文档有点长&#xff0c;没全部贴在博客中&#xff0c;有兴趣的可以下载附件中的 PDF。…

Amazon S3 设置对象的生命周期Lifecycle

2019独角兽企业重金招聘Python工程师标准>>> 保存在S3上面的文件&#xff0c;有些是长期保存的&#xff0c;而有一些我们却不希望保存太久&#xff0c;过一段时间后就可以删除了。例如备份文件&#xff0c;太旧的就要删除&#xff1b;又或如日志文件&#xff0c;只保…

Direct3D提高篇:HLSL编程实现PhotoShop滤镜效果 - 伪 HDR/Blow

所谓HDR就是高动态范围的意思。在普通的显示器和位图里&#xff0c;每通道都是8-bit&#xff0c;也就是说RGB分量的范围都是0-255&#xff0c;这用来表示现实中的颜色显然是远远不够的。现实中的图像的动态范围远远大的多&#xff0c;那么如何在现有的显示设备里尽可能的保持更…

Oracle Buffer Cache的keep、recycle、default pool概念图解

Oracle Buffer Cache的keep、recycle、default pool概念图解 转载于:https://blog.51cto.com/maclean/1278284

程序中调用命令行命令,不显示那个黑黑的DOS窗口

From: http://hi.baidu.com/yanqiuge/item/5da466c3d3f18453ad00ef1d 在程序中使用命令行时&#xff0c;会有黑黑的DOS窗口&#xff0c;很不爽&#xff0c;在网上查了一下&#xff0c;写一个有点实用价值的小程序&#xff1a; /****************************** 文件名&#…

Oracle Row cache lock图解

Oracle Row cache lock(dictionary cache)图解 转载于:https://blog.51cto.com/maclean/1278273

windows平台编译vlc

From: http://blog.csdn.net/guanshangming/article/details/5581270 转自:http://jeremiah.blog.51cto.com/539865/114190Jeremiah刚刚工作几个月&#xff0c;参与的第一个项目是与视频监控有关&#xff0c;分配给我的任务就是用开源的vlc做一个自己的播放器。对于开源项目来…

Appium--环境搭建

Appium介绍 Appium是一个移动端的自动化框架&#xff0c;可以做H5、Web测试、可以做功能测试&#xff08;Android、IOS&#xff09;、可以做跨进程测试&#xff0c;且是跨平台的。Appium做测试的时候支持的语言有很多种&#xff0c;包括java、Python、ruby、PHP、C#等。由于我熟…

Windows 系统下Git安装图解

From: http://blog.csdn.net/jiguanghoverli/article/details/7902791 Windows 系统下Git安装图解 简单来说Git是一个免费的、开源的版本控制软件&#xff0c;从功能上讲&#xff0c;跟我们比较熟悉的Subversion(SVN)这类版本控制软件没什么两样。由于工作的需求&#xff0c;需…