很棒的有关HTML5 发展时间轴的信息图标,欢迎小伙伴们另存下来收藏。

原文链接:HTML5 – Developers Must Aware of History, Present and Expectations

html5history

近期东方设计工作室开发某些项目过程中,有客户提出在类似搜狗浏览器和360浏览器的IE兼容模式下,网页不正常显示的问题,每次都要花很大的功夫去解释,类似浏览器默认IE兼容模式是采用了低版本的IE7为内核,而不是你当前IE浏览器的默认版本,比如IE8或者IE9,因此有必要对此做一下较为明确的说明。

大家都知道针对IE浏览器的指责有些年头了,鉴于前几年浏览器还是IE的霸主位置不可动摇,那时候任何一个网站项目开发,最大的工作量不是采用最新的HTML5+CSS3之类的最新技术,而是要想尽一切办法来让网站在极其低版本的诸如IE6和IE7里边也要能正常显示,为了兼容这类型很落后了的浏览器显示效果,就不得不对网站项目开发过程中尽量避免采用最新技术,转而采用极其保守的比如很早起的table的布局和最传统的一些显示设置,而事实上随着Google Chrome 和 Firefox之类的浏览器市场份额的不断飙升,甚至有一段时间Google Chrome的市场份额超越了IE所有版本的总和,跃居浏览器榜首,这个对于网站开发是一个巨大的变革,因为类似Google Chrome之类的浏览器采用的是非常棒的Webkit的内核,对最新的HTML5+CSS3技术有着非常不错的渲染支持,因此再对低端IE6和IE7的支持已变得不合时宜和完全没有必要性了,简单用一个本工作室30天内浏览器版本分布图来说明一下问题:

系统环境 - 百度统计

从上图可以看出,30天内IE6和IE7的份额很低,IE6 30天内有48个IP,平均每天有1个IP多点,IE7就更低,类似这种份额的访问量,从全局来考虑完全可以去忽略,另外我们可以设想到在现在这个网络环境底下还在坚守IE6和IE7的用户,一般都是盗版的XP操作系统使用者,同时也是对网络几乎没有任何概念的人士,同时基本没有任何购买能力去升级PC设备,因此基本可以肯定此类型用户不太可能有太高的购买能力,也可以说不太可能成为意向客户,忽略这类型的访问者完全不会对公司的业务产生任何影响。

回到此文前面有提到过的有关类似搜狗浏览器的IE兼容模式的问题,有必要做一下说明,坑爹的搜狗浏览器默认设置的IE兼容模式竟然不是当前操作系统默认的IE版本,而是统一的IE7,这点很低端而且没有任何用户体验考量,不知道搜狗开发人员出于什么考虑做了这么一个脑残的默认设定,当然这个设置是可以更改的,通过以下截图可以看出来,只要勾选高级设置底下的“在兼容模式下使用高级渲染特性”以后,即可默认在IE兼容模式下使用IE8以上的内核来解释渲染网页:

sougou

鉴于以上的解释,本工作室做出如下声明:

1,本工作室官方网站www.eastdesign.net已全面升级到最新的HTML5架构,全面停止对于低版本IE6和IE7的兼容;

2,本工作室所开发的任何网站项目均会采用HTML5+CSS3的全新架构,并承诺兼容IE8以上的浏览器及其他所有非IE的主流浏览器。

3,有关本工作室任何项目涉及的浏览器兼容问题,均以本公告为准,不再做更多的解释,如有特殊要求需对IE6和IE7兼容,请在项目启动前和我们售前人员做特意说明,如无说明,均为默认认可只兼容IE8以上浏览器。

特此公告!

东方设计团队

2013年5月22日

工作室官方微博置顶帖:http://weibo.com/1794564114/zyHIwbQS3

为了适应工作室不断拓展壮大的业务领域,东方设计工作室现长期面向社会诚聘英才,欢迎有网站设计、HTML5+CSS3方面项目开发经验、WordPress开发方面经验的人士加盟本工作室,待遇丰厚,发展空间巨大,欢迎有着优秀技术基础的应届毕业生自荐加盟。

有意加盟的人士请发简历 ☞ sales at eastdesign.net ,并注明应聘字样,或者直接加我的工作QQ: 22046822,SKYPE: zhongxiaoge 电话: 0510-88771550 我们期待您的加盟。

本公告长期有效!

东方设计团队
2013年5月12日

本站站内搜索目前采用了强大的Google Custom Search(以下简称GCS),曾尝试过直接采用GCS的搜索框,后来发现国内坑爹的G.F.W时不时屏蔽Google相关服务,导致网站因此而无法载入,为了一个并不那么重要但在某些时候又必不可少的站内搜索而直接导致网站载入不顺畅有点得不偿失,因此无奈之下采用了GCS结合WordPress自带的搜索框来实现,这个方案可以既集成了GCS强大的站内搜索功能,又能有效规避因为GCS被屏蔽导致的网站载入不顺畅的问题,不过也因为放弃了GCS自带的搜索框,而缺失了类似表单自动填充关键词的很人性化的功能,于是想到了何不用HTML5 Datalist属性来实现呢,方法如下:

首先打开模版里边搜索表单的文件,比如本站的相关文件为:search-form.php,然后找到该文件的搜索输入框代码处,比如我这里的代码如下:

<input class="search" value="<?php echo isset( $_REQUEST['s'] ) ? esc_attr( $_REQUEST['s'] ) : '输入关键词'; ?>"   onfocus="if(this.value == '输入关键词') { this.value = ''; }"  name="s" id="s" type="text" tabindex="1" />

在这个代码里边加入一个 list=”keywords” 的属性,如下:

<input class="search" list="keywords" value="<?php echo isset( $_REQUEST['s'] ) ? esc_attr( $_REQUEST['s'] ) : '输入关键词'; ?>"   onfocus="if(this.value == '输入关键词') { this.value = ''; }"  name="s" id="s" type="text" tabindex="1" />

然后在后边再加入一个表单自动填充的关键词列表如下:

	<datalist id="keywords">
  		<option value="WordPress">
  		<option value="WordPress安全性">
  		<option value="WordPress建站">
  		<option value="WordPress自适应">
  		<option value="Centos">
  		<option value="HTML5">
  		<option value="每日一句">
  		<option value="东方设计工作室">
  		<option value="上海设计工作室">
  		<option value="美国主机">
  		<option value="美国eNom域名">
  		<option value="美国VPN">
	</datalist>

以上实际关键词根据实际站点情况进行增删,保存上传覆盖以后,刷新网站,试着在搜索框输入一个大写的W看看,是否看到了底下出现了一个下拉菜单,自动列出来了所有以上代码预设的关键词,甚至你不输入任何关键词,仅仅双击该搜索框也会自动出来一个列表,很酷吧?当然这个特性有浏览器支持限制,目前在Google Chrome和Firefox底下完美测试通过,别的浏览器大家可以去测试看看,但是可以肯定的是ie会支持得比较惨。

html5-autocomplete

原文地址:

CSS3的一些最新的特性运用在网站前台界面上将为站点增色不少,现收集了9个最新的CSS3特性,这些特性都将全面提升站点的品质和感官体验。

用CSS3对照片进行黑白化

以下CSS代码将对任何彩色照片进行黑白化,并且能兼容所有的主流浏览器,很难想象吧。

img.desaturate { 
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

Source/Demo: http://demosthenes.info/blog/532/Convert-Images-To-Black–White-With-CSS

用CSS3实现页面顶部阴影效果

这是一个很简单的通过样式来实现的页面顶部阴影的方法,很容易实施,而且省去了载入图片的过程。

body:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;

          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          box-shadow: 0px 0px 10px rgba(0,0,0,.8);

          z-index: 100;
}

Source/Demo:

通过CSS3来检测鼠标的双击动作

不管你信不信,仅仅通过CSS样式就可以检测页面里边某个区块上的鼠标双击动作,代码如下:

Double click me

Source/Demo:

通过CSS3来画三角形

通过CSS可以很轻松的画出三角形图形,尽管这种方法也许并不是最佳的方法,但我还是觉得足够实用和有趣。

/* create an arrow that points up */
div.arrow-up {
  width:0px; 
  height:0px; 
  border-left:5px solid transparent;  /* left arrow slant */
  border-right:5px solid transparent; /* right arrow slant */
  border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

/* create an arrow that points down */
div.arrow-down {
  width:0px; 
  height:0px; 
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #2f2f2f;
  font-size:0px;
  line-height:0px;
}

/* create an arrow that points left */
div.arrow-left {
  width:0px; 
  height:0px; 
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-right:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

/* create an arrow that points right */
div.arrow-right {
  width:0px; 
  height:0px; 
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent; /* right arrow slant */
  border-left:5px solid #2f2f2f; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

Source/Demo:

使用CSS 的 calc()

calc() 作用有点类似于函数,允许你进行计算来判断对象的大小和形状,它将在任何长度需要确定的地方非常有用。

/* basic calc */
.simpleBlock {
  width: calc(100% - 100px);
}

/* calc in calc */
.complexBlock {
  width: calc(100% - 50% / 3);
  padding: 5px calc(3% - 2px);
  margin-left: calc(10% + 10px);
}

Source/Demo:

纯粹CSS实现的文字渐变

文字渐变在互联网上很受欢迎,现在通过CSS3,实现漂亮的文字渐变将变得非常的容易。

h2[data-text] {
	position: relative;
}
h2[data-text]::after {
	content: attr(data-text);
	z-index: 10;
	color: #e3e3e3;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));

Source:

通过CSS来关闭鼠标动作

最新的 pointer-events 允许通过CSS来关闭某个对象的鼠标动作,例如通过以下代码可以使链接变得不可点击了。

.disabled { pointer-events: none; }

Source/Demo: https://www.eastdesign.net

通过CSS3来自定义浏览器滚动条

记得10年前大家还在用微软的制定的唯一属性去自定义滚动条样式吧?那么现在让我们用CSS3来轻松地做到这个效果。

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: -webkit-linear-gradient(left, #547c90, #002640);
  border: 1px solid #333;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
}

Source/Demo:

用CSS3实现模糊字体效果

一个很简单但是很漂亮的字体模糊效果!

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Source/Demo:

纯CSS实现圆角丝带效果

这个代码有点长,但是却用纯CSS方式实现了很漂亮的圆角丝带效果。

NEWS

CSS如下:

.wrapper {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

Source/Demo: http://jsfiddle.net/chriscoyier/H6rQ6/1/

今日,全球领先浏览器Opera的中文品牌欧朋发布了其下新一代浏览器产品–欧朋HD beta版,为用户带来媲美PC的浏览体验,给国内手机浏览器树立了新的行业标杆。不仅如此,具有独立浏览器内核的欧朋HD beta版在专业HTML5测试中获得了354高分,是国内第一款真正的HTML5手机浏览器。

  欧朋HD beta版是欧朋面向中高端智能移动设备推出的新一代移动浏览器,是一款真正具有独立内核的全能手机浏览器,给用户带来PC般的浏览体验,感受前所未有的速度和流畅。相比2011年底欧朋发布的广受用户和业界好评的HTML5体验版,欧朋HD beta版功能更加强大完善,操作更加简单快捷,浏览体验更加完美流畅。

Opera中国区兼欧朋浏览器总经理宋麟先生表示:“秉承开放共享的精髓,Opera为全球不同地域、不同语言、不同肤色的2.5亿人提供了兼容不同终端及跨越多种壁垒的极致互联网浏览和探索体验。我们认为,互联网只有一个,所以人们访问互联网时,不管是通过手机还是PC,都应该获得同样的浏览体验。欧朋HD beta版将为中国手机用户创造媲美PC的移动浏览体验。”

PC般的品质浏览 

  欧朋HD beta版给消费者带来的是PC般品质浏览体验。其www网页显示效果与电脑显示完全一致,并且通过智能算法将网页自动调整成适应屏幕的大小呈现给用户。欧朋HD beta版直接跟网站服务器通信,不通过第三方服务器中转,在手机端直接展现网页,因此能实现更多页面的适配,利用好手机屏幕的每一个像素,为用户呈现最佳的视觉效果。

得益于Opera 长达17年的浏览器开发经验和技术,欧朋HD beta版的网页缩放和滚动十分流畅自然,让用户在浏览的时候丝毫不觉得受限于手机的屏幕尺寸,就像在用PC上网一样自如。

作为媲美PC的全功能手机浏览器,欧朋HD beta版完美支持Flash,视频、音频、网页动画都能展现,更好地利用了智能终端的强大功能。

欧朋HD beta版将PC般的品质浏览体验带给消费者,使得手机浏览器也能实现强大的网络功能,为行业树立了新的标杆。

 逼真HTML5网页游戏和丰富功能 

众所周知,Opera是网络标准HTML5技术的最早倡导者和推动者,其对HTML5技术的支持也是业界闻名,在行业里拥有“标准浏览器”的称号。因此,采用Opera技术开发的欧朋HD beta版对HTML5技术的支持也是业界领先的。在最新的专业HTML5测试中,欧朋HDbeta版的得分高达354,遥遥领先于同类产品,甚至超过不少PC浏览器。

  欧朋HD beta版为用户推荐多款精彩的HTML5网页游戏,从益智到战略一网打尽,配合欧朋HD beta版独特的游戏模式以及WebGL支持能力,3D效果呈现毫无压力,让HTML5网页游戏与手机原生游戏一样逼真,玩起来一样给力。

欧朋HD beta版支持丰富的设备接口(Device-API),可以方便用户在HTML5网页中轻松使用本地设备功能。它可以拍照、可以地图定位、可以网页游戏、可以离线存储、调用网络字库,而CSS特效矢量图效果更让人眼前一亮。

欧朋HD beta使得一个浏览器真正脱离了仅仅是浏览工具的局限,将手机浏览器变成了人们探索移动生活方式的窗口。

  Opera独立内核保证稳定安全 

基于Opera独有的Presto内核,欧朋HD beta版性能卓越、稳定。

Opera浏览器在业内一向以安全而著称,甚至被评为黑客首选自用浏览器。欧朋HD beta版全面承袭Opera信息安全保护的技术实力,对移动浏览安全方面作了全面保障:支持所有网页加密方式,用户的上网数据全部通过加密方式传输,保证绝对安全;强大的隐私控制功能,保证浏览器数据无从泄漏。

另外,欧朋HD beta支持支付宝插件,保证手机端的安全,为热爱网购的用户提供流畅的手机购物体验,手机支付时更添一道财产安全保护墙。

欧朋HD beta版作为欧朋HTML5技术的旗舰产品,传承Opera一贯的技术优势。如果你还没有感受过欧朋H5体验版的强大,那么欧朋HD beta版一定不能再错过,这是一款能够让你从小小的手机屏幕获得媲美PC浏览体验的HTML5移动浏览器。

欲体验精彩的欧朋HD移动浏览器,请用手机直接登录: m.oupeng.com/HD 免费下载。

更多信息,请参考www.oupeng.com

Impossible Software,正如这家公司的名字,他们做的是一件让人感觉不可思议的事——只需设置几个参数,就可以在原有视频中插入一个广告视频或广告图片,而且根本看不出来是后来插入的。

Impossible Software这家公司创立于2008年,目前只获得了200万美元投资。但它的合作厂商都是像可口可乐、宝马、IBM、微软这样的大公司,而且他们的 视频全是100%的HTML5格式。这些是任何一家公司都没有做过的,但却被这家公司的9个Geek做出来了。

简单的说,就是Impossible Software可以在你平常看的网上中,插入一段视频广告,或者在视频的某一部分。查看网站的Demo主页,你会发现这种技术简直是颠覆性的。

比如我在淘宝上开一家鞋店,只需选择几个产品,就能自动植入到一个视频中,想用不同产品就随时更换。在ebay上,我输入一个产品的代码,下面设计好的视频里的白板上会自动生成该产品的各种信息,比如图片、简介、价格、剩余时间等,当然白板中的图片也可以换成视频。另外还可以在采访节目中插入图片广告,但你根本看不出来,或者在一个病毒视频中插入商品广告。以上插入的所有品牌、参数都可以修改,但前提是可能要对这个视频做一定的技术处理。

Impossible Software的商业应用包括四个方面:视频广告植入、电子商务/OEM生产商/API用户、半专业人员以及终端消费者。如果这种技术能大规模推广的话,相信不久之后,我们看到的视频到处都会是广告,但你却不会知道它是不是广告。

比如下面我选一个ebay美国网站上的Nook Tablet,代码为200730895741,当如输入这个代码。点击play,它就会自动播放一个HTML5格式视频:

近日,Mozilla 上线了一款支持多人在线的 HTML5 游戏 BrowserQuest ,来展示 HTML5 功能的强大。

该游戏主要使用 HTML5 进行开发,在游戏中,玩家扮演一个年轻的战士,在危险的世界中展开冒险并寻找宝藏。

该游戏使用了大量先进的技术,包括:

  • WebSockets 技术:该技术主要用于在浏览器中实现和服务器端的双向通信。
  • HTML5 Canvas:主要用于基于 2D tile 的图形引擎。
  • Web workers:允许初始化大的世界地图,而不会减慢页面 UI。
  • localStorage:随时保存玩家角色的进度。
  • CSS3 Media Queries:使游戏可以自动根据不同的设备进行调整。
  • HTML5 audio:你可以听到游戏中的各种声音。

由于该游戏基于 HTML5,所以可以在大部分设备中的现代浏览器(Chrome、Firefox、Safari 等)中运行,这些设备包括 PC、智能手机、平板电脑等。

游戏地址:http://browserquest.mozilla.org/

BrowserQuest 源码目前托管在 GitHub 上,地址:https://github.com/mozilla/BrowserQuest

让没有Flash知识的人也可以制作支持Flash的页面,Wix正是以此而出名。如今该平台推出新服务,将同样思想应用到HTML5技术,让你零基础打造HTML5应用。这对HTML5技术的推动来说非常重要,因为它让大量的人可以通过它打造跨PC和手机浏览器的应用。

Wix 声称每个月有100万的用户通过他们的平台制作页面,在这些页面中,不仅仅有基于Flash的网页,更有专门支持移动设备浏览器的页面。而通过该平台制作 网页的行为为Wix每个月带来的流量超过了200万。新的HTML5服务非常简单,只需要几个动作就可以完成。Wix联合创始人Avishai Abrahami说:

我们向用户提供了特殊的工具,你可以通过这些工具为你的网页进行各种操作,比如修改或者建立 新的元素。你只需要懂得移动鼠标和点击鼠标,无需HTML方面的编程技术或者其它技术细节。它就像Office的PPT制作,只需对软件进行一些简单的拖 拽动作就可以完成HTML5页面的建立。

目前该平台为用户提供了50多种模版供选择,同时用户也可以选择自己设 计,但是这需要一定的技术。同时,该平台向用户每月收取4到16美元的费用。Wix也将目标锁定在另一个高速增长的手机页面市场,尽管手机上的APP越来 越多的成为人们获取信息内容的主要渠道,但是手机页面的增长同样令人乐观。

当某些网页和服务正借助它们为手机用户打造特殊服务的APP时,其它更多人则寻找一站式解决平台,比如HTML5。Wix将是第一批为支持HTML5而提供DIY平台的最主要公司之一。

至 于为什么现在才推出HTML5的服务平台,Abrahami说主要是之前微软的IE浏览器不支持,而那时的IE浏览器还占据着主要市场。如今市场已完全改 变,像Firefox、Chrome以及苹果的Safari浏览器已经慢慢主导市场,因此此时正是推出该项服务最好的时机。到现在,通过Wix平台制作的 手机网页达到了60万个,而通过它为Facebook上建立自己公司页面的数量也超过了45万个。该公司创立于2008年,去年获得来自大量VC的4000万美元投资

我们听到了很多关于HTML5的新闻和技术动向,一个又一个的新的东西不停的出现,那么最近HTML5的技术应用又如何呢?HTML5又和CSS及 其Javascript如何一起改变我们的网站设计和实现的呢? 带着这些问题,我们将推荐给大家8个超棒的HTML5网站设计。其中包括了Jordan主站的视差滚动特效,它将滚动带入了一个新的境界!还有Draw stick man,这个网站允许你使用你的绘画技能完成你自己的作品。希望大家喜欢!

Draw Stick Man II 

如果你对于HTML5的互动应用有兴趣,这个网站绝对值得你玩玩。现在是第二集的Draw Stick Man。你会喜欢的!

8个超棒的HTML5网站设计欣赏

Air Jordan 2012

Nike使用过视差滚动,在以前的文章中我们曾经介绍过,这里Jordan网站将视差滚动带入了一个新的境界。简单但是绚丽!

8个超棒的HTML5网站设计欣赏

Agent 8 Ball

一个基于web的台球游戏。

8个超棒的HTML5网站设计欣赏

Cut the Rope

拥有iphone的朋友绝对对这个游戏不陌生。 这个游戏使用HTML5实现。支持IE10。

8个超棒的HTML5网站设计欣赏

Shave Guard

澳大利亚男人们的刮胡子游戏

8个超棒的HTML5网站设计欣赏

Drumlet

一个基于web的打鼓应用

8个超棒的HTML5网站设计欣赏

The Restart Page

这个页面肯定让你回忆无限。不同操作系统的各种重启屏幕

8个超棒的HTML5网站设计欣赏

Believe in…

使用动态gif实现的超棒滚动网站。简单但华丽

8个超棒的HTML5网站设计欣赏

CSS3实现的Android Logo 效果很酷:

以下是HTML5与CSS3实现的小树,是不是挺干净漂亮的:

热烈祝贺东方设计工作室网站首页顺利通过W3C的HTML5验证,验证截图如下:

验证网址:

当然也并不是说网站的所有页面都要强制通过W3C验证才好,毕竟因为一些外部内容的嵌入,加之某些页面要求实现特定的功能等,因此无需所有页面都通过此验证,首页通过了此验证也仅仅代表本站采用的架构符合规范,而且兼容各大浏览器显示。