最近,有一种新的网页布局 ——动态流体布局,很让我感到兴趣。因为用这个我就可以实现类似于WIN8触屏界面的网页设计啦!它巧妙地重排元素,并填补了网页的所有空间,而在每个浏览器上显示效果都十分出色,而且通常配以流畅的动画效果。其中有些甚至针对不同类别有不同效果.这样的网站我找到了8个,他们都有相同的特征。在文章末尾列举了3个JQuery插件, 可以很方便的帮助你达到这些效果。

展示 Gimme Bar

 

 MKSD Architects  (这个特别像metro UI) 

 

Marken Film

 

 Cascade Brewery Co 

 

Pixillion

 

Swinton 

  

(这个更像win8的触屏界面) 

 

Pinterest

 

怎么实现 好了,也许你已经迫不及待想知道怎么实现了。多亏了这三个插件,一切垂手可得。 jQuery Masonry 

一个JQuery动态布局插件,CSS侧边浮动。 Isotope 

一个可以神奇布局的JQuery精美插件。 QuickSand 

可以重排和过滤,带有滑动动画效果。

posted @ 2012-02-10 20:09 楚广明 阅读(126) 评论(0) 编辑
posted @ 2012-02-10 20:08 楚广明 阅读(38) 评论(0) 编辑

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成运动视差 3D 效果,虽然纯属视觉效果,但在内容滚动时形成的视觉体验非常出色,这是今年网页设计的热点趋势。今天这篇文章就与大家分享21个视差滚动效果的网页设计作品,一起欣赏(以拖动滚动条方式浏览效果会更佳)。

iutopi

parallax10

Guy Vernes

parallax15

Campaign Monitor is Hiring

parallax01

International Watch Co

parallax03

cultural solutions uk

parallax02

Nike Better World

parallax04

Old Pulteney Row to the Pole

parallax05

Webdesign Karlsruhe

parallax06

YEBO Creative

parallax07

Head2Heart

parallax08

Len M

parallax09

Drupalcon Denver 2012

parallax11

Ben the Body Guard

parallax12

Fingerbilliards

parallax13

Kisko Labs

parallax14

Netlash-bSeen

parallax16

Egopop Creative Studio

parallax17

Jan Ploch

parallax18

Web is Beautiful

parallax19

unfold

parallax20

manufacture d’essai

parallax21

posted @ 2012-02-10 20:08 楚广明 阅读(30) 评论(0) 编辑

使用大型背景图或插图作为装饰,能够在视觉上增强吸引力。越来越多的用户拥有了高分辨率显示器和高速网络环境,许多网站设计者也开始采用大背景图。这篇文章关于 40+ 新鲜漂亮的大背景网站设计,令人耳目一新。

1. The Pixel Blog

The Pixel Blog

2. Copimaj Interactive

Copimaj Interactive

3. Flourish Web Design

Flourish Web Design

4. Abduction Lamp

Abduction Lamp

5. Morphix Design Studio

Morphix Design Studio

6. Final Phase

Final Phase

7. Make Photoshop Faster

Make Photoshop Faster

8. WebSarga

Web Sarga

9. Suie Paparude

Suie Paparude

10. Duirwaigh Studios

Duirwaigh Studios

11. BlackMoon Design

BlackMoon Design

12. Sepitra

Sepitra

13. Le Blog de Gruny

Le Blog de Gruny

14. Piipe

Piipe

15. Mozi Design Studio

Mozi Design Studio

16. Electric Current

Electric Current

17. Lora Bay Golf

Lora Bay Golf

18. Life Style Sports

LifeStyle Sports

19. ligne triez

ligne triez

20. Oliver Kavanagh

Oliver Kavanagh

21. World of Merix Studio

Merix Studio

22. Le Web Defi

le-web-defi

23. How host

How host

24. Productive Dreams

Productive Dreams

25. Gary Birnie

Gary Birnie

26. Glocal Ventures

Glocal Ventures

27. GDR UK

GDR UK

28. Absolute Bica

Absolute Bica

29. Le Nordik

Le Nordik

30. Leaf Tea Shop & Bar

Leaf Tea Shop

31. Paul Smith

Paul Smith

32. EwingCole

EwingCole

33. Dolphins Communication Design

Dolphins Design

34. Danny Diablo

Danny Diablo

35. Inner Metro Green

Inner Metro Green

36. Matt Salik

Matt Salik

37. Revyer

Revyer

38. Yodaa

Yodaa

39. Dripping in Sunshine

Dripping in Sunshine

40. Big Break ’09

Big Break '09

英文原稿:40 Fresh & Beautiful Examples of Websites With Large Backgrounds | Web Developer Plus

posted @ 2012-02-10 20:05 楚广明 阅读(29) 评论(0) 编辑
    该文被密码保护。
posted @ 2012-02-10 20:03 楚广明 阅读(0) 评论(0) 编辑

在过去的两年里,触屏设备飞速增长。iOS和Android设备让开发者和设计师开始重新思考他们的网页应用,以提供更好的触屏体验。


移动Web应用相对于本地的App有很多优势,虽然也有很多设计和开发上的挑战。这里列出了一系列有用的框架来帮助基于HTML的webapp开发。他们支持大部分流行的智能手机和平板。

1. Lungo.js:HTML5 移动开发框架

Lungo.js 是第一个应用HTML5和CSS3特性的移动开发框架。它可以帮助开发者创建iOS,Android,Blackberry和WebOS平台的应用。

Lungo.js 不需要任何web服务器的支持就能帮助用户实现HTML5的功能,例如WebSQL, Geolocation,History,Device orientation等等。

2. JO:一个简单的HTML5 App框架


JO可以帮助你创建类似本地应用的Web App。JO是一个开源的免费框架,可以和PhoneGap一起使用。

3. Joshfire:跨设备的开发框架


Joshfire是一个开源的跨设备开发框架,帮助开发者创建可以在多种设备上运行的web app。它使用HTML5和JavaScript,并且允许开发者快速整合本地应用和特定的web应用。

Joshfire可以让你的应用接受键盘,鼠标,触摸屏,遥控器等设备的输入。Joshfire支持Node.JS。

4. Sencha Touch:基于HTML5的移动网页开发框架


Sencha touch可以让开发者创建类似本地应用体验的web app。Shencha是第一个使用HTML5,CSS和JavaScript并且支持音频/视频,本地存储,圆角,渐变背景以及阴影的开发框架。

5. Baker:HTML5 电子书框架


Baker是用来在iPad或者iPhone平台上发布交互式的电子书或者电子杂志的HTML5电子书框架。.

6. Touchy Boilerplate


Touchy Boilerplate 是一个用来创建移动web app,包括HTML模板,Meta tag等的工具。Touchy可以支持动态页面导航,固定页头,滚动内容,浏览历史记录等功能。Touchy使用jQuery或者 Zepto.JS。

7. Ripple:让移动开发测试更容易


在不同的平台上测试移动应用是一件令人头疼的事情。Ripple可以帮助你在不同的平台商测试并且调试你的HTML5移动应用。Ripple是一个chrome的扩展。它可以模拟每个设备的详细信息,例如user_Agent,Geolocation等等。

8. RestKit


Restkit是一个objective-c的开发框架,目的是简化并加快与Restful的web service交互。它提供了一个简洁的HTTP request/response API和一个强大的对象映射系统。

9. HTML5 兼容性表格


Mobile HTML5是一个表格,显示了不同设备/平台对HTML5特性的支持情况。包括Safari, Android, Blackberry, IE,Opera,Firefox,webOS和Symbian。

10. MobileESP:检测你的移动网页访问者


MobileESP项目提供了一套简单、轻量级的API让网站的开发者检测访客是不是使用移动设备,或者使用的是哪种移动设备。

11. Tiggr


Tiggr是一个移动一个用创建工具,可以让你快速创建移动应用。你不需要写代码就能创建丰富的移动应用。

 

posted @ 2012-02-10 20:03 楚广明 阅读(73) 评论(0) 编辑
    该文被密码保护。
posted @ 2012-02-10 20:01 楚广明 阅读(0) 评论(0) 编辑
    该文被密码保护。
posted @ 2012-02-10 19:59 楚广明 阅读(0) 评论(0) 编辑
    该文被密码保护。
posted @ 2012-02-10 16:39 楚广明 阅读(0) 评论(0) 编辑