最近,有一种新的网页布局 ——动态流体布局,很让我感到兴趣。因为用这个我就可以实现类似于WIN8触屏界面的网页设计啦!它巧妙地重排元素,并填补了网页的所有空间,而在每个浏览器上显示效果都十分出色,而且通常配以流畅的动画效果。其中有些甚至针对不同类别有不同效果.这样的网站我找到了8个,他们都有相同的特征。在文章末尾列举了3个JQuery插件, 可以很方便的帮助你达到这些效果。
展示 Gimme Bar
MKSD Architects (这个特别像metro UI)
Marken Film
Cascade Brewery Co
Pixillion
Swinton
(这个更像win8的触屏界面)
怎么实现 好了,也许你已经迫不及待想知道怎么实现了。多亏了这三个插件,一切垂手可得。 jQuery Masonry
一个JQuery动态布局插件,CSS侧边浮动。 Isotope
一个可以神奇布局的JQuery精美插件。 QuickSand
可以重排和过滤,带有滑动动画效果。
这篇文章向大家推荐35个缩略图在网页设计中应用的优秀案例,希望下面这些网页设计实例能够帮助大家制作出更加优秀的网页作品。
Shropshire Screen
Arnaud Beelen
Two Fish Illustration & Design
twoto
Kokokaka
Brave Nu Digital
F O U N D E D
Idea Exhibit
astronaut design
Marc Kremers
Purpose
Tastespotting
Amate
Rejane Dal Bello
James De Angelis
Harpoon
Baubauhaus
Viktoria Klein
Uniform
typetoken
Blank
Craig and Karl
Franklin Gaw
Komplex 457
Dust + Mold
Dan Mall
Sisu
Adam
Marc Kremers
Airwalk
Victoria Klein
Major Tom
Blinkart
Sparrow Songs
Pentagram
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成运动视差 3D 效果,虽然纯属视觉效果,但在内容滚动时形成的视觉体验非常出色,这是今年网页设计的热点趋势。今天这篇文章就与大家分享21个视差滚动效果的网页设计作品,一起欣赏(以拖动滚动条方式浏览效果会更佳)。
iutopi
Guy Vernes
Campaign Monitor is Hiring
International Watch Co
cultural solutions uk
Nike Better World
Old Pulteney Row to the Pole
Webdesign Karlsruhe
YEBO Creative
Head2Heart
Len M
Drupalcon Denver 2012
Ben the Body Guard
Fingerbilliards
Kisko Labs
Netlash-bSeen
Egopop Creative Studio
Jan Ploch
Web is Beautiful
unfold
manufacture d’essai
使用大型背景图或插图作为装饰,能够在视觉上增强吸引力。越来越多的用户拥有了高分辨率显示器和高速网络环境,许多网站设计者也开始采用大背景图。这篇文章关于 40+ 新鲜漂亮的大背景网站设计,令人耳目一新。
1. The Pixel Blog
![]()
2. Copimaj Interactive
![]()
3. Flourish Web Design
![]()
4. Abduction Lamp
![]()
5. Morphix Design Studio
![]()
6. Final Phase
![]()
7. Make Photoshop Faster
![]()
8. WebSarga
![]()
9. Suie Paparude
![]()
10. Duirwaigh Studios
![]()
11. BlackMoon Design
![]()
12. Sepitra
![]()
13. Le Blog de Gruny
![]()
14. Piipe
![]()
15. Mozi Design Studio
![]()
16. Electric Current
![]()
17. Lora Bay Golf
![]()
18. Life Style Sports
![]()
19. ligne triez
![]()
20. Oliver Kavanagh
![]()
21. World of Merix Studio
![]()
22. Le Web Defi

23. How host
![]()
24. Productive Dreams
![]()
25. Gary Birnie
![]()
26. Glocal Ventures
![]()
27. GDR UK
![]()
28. Absolute Bica
![]()
29. Le Nordik
![]()
30. Leaf Tea Shop & Bar
![]()
31. Paul Smith
![]()
32. EwingCole
![]()
33. Dolphins Communication Design
![]()
34. Danny Diablo
![]()
35. Inner Metro Green
![]()
36. Matt Salik
![]()
37. Revyer
![]()
38. Yodaa
![]()
39. Dripping in Sunshine
![]()
40. Big Break ’09
![]()
英文原稿:40 Fresh & Beautiful Examples of Websites With Large Backgrounds | Web Developer Plus
在过去的两年里,触屏设备飞速增长。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是一个移动一个用创建工具,可以让你快速创建移动应用。你不需要写代码就能创建丰富的移动应用。































