CSS: 突破框框的设计

你是否已经对现在的柱形和框框布局感到厌烦? 是时候学一下如何冲出盒子的束缚, 做一些有创造性的东西出来了. 以前, 我收集了一些几乎完美的设计都是盒式的. 这次我将会提供一些带演示文件速成的 CSS 技巧, 让大家知道如何突破框框设计, 发挥创意, 使用图片和 CSS 位置属性.

英文原文: CSS: Design Out Of The Box

案例 1: Huge Inc

真正迷住我的是 Huge 网站的顶部设计. 注意看这是如何将页面元素扩展到框框之外的.

案例 2: Jason Santa Maria

从 Jason 在他网站上放置的作品数量和页面细节来看, 毫无疑问地他是网站设计领域最好的设计师之一. 点击进入文章, 你会发现几乎所有的文章页面都是独一无二的, 它们拥有与众不同的式样表. 一些视觉图像在栏栅和框框之内, 有些在其之外.

案例 3: A Brief Message

和 Jason Santa Maria 相似, ABriefMessage.com 上的所有文章都拥有独特的图片和 CSS 样式表. 不想其他传统的博客, 网站正文被完美的放置, 文字环绕着图片 (就像在阅读出版物一样).

案例 4: Trent Walton

TrentWalton.com 专注于网站顶部的设计, 所有文章里都显示不一样的背景和标题排版.

案例 5: Wonderbra Ultimate Strapless

虽然可以在 Wonderbra 网站是一个令人喜爱的设计. 它的内容和图片恰当地放置在一起. 咋一看以为是 Flash 网站. 然后我查看页面代码才发现它是用 CSS 和 JavaScript 来实现的. (感谢 #26 楼朋友的更正)

案例 6: Fox

Fox - Fringe 网站打破了边框布局, 使用展开的背景图片将顶部和底部连接在一起. 而且框框之间的倾斜切入的分割看起来很有意思. 请不要忘记也去看一下其他的 Fox TV 秀网站.

案例 7: Mezzoblue

Mezzoblue 将图片延伸至网格之外. 这种效果可以通过使用负值的 margin-left 属性轻易地获得.

速成 CSS 教程

使用 CSS 绝对位置 (演示)
下面的教程将使用 position 属性模仿 Huge 网站. 使用 position:absolute 来放置每一个元素. 然后为 logo, 导航和内容部分较高层次的 z-index 属性 (这样它们就可以显示在图片上方).

使用背景图片 (演示)
在本例中, logo 和正文将被嵌入图片里面. 为使 logo 的文字可以被点, 首先得为 H1 标签定义绝对位置, 然后用文本缩进的方法将 H1 a 的文字隐藏起来 (这里也可以看一下 NeoEase 以前介绍的例子).

使用绝对位置将 Click Here 按钮放置于精确的位置. 为之定义背景图片并使用文本缩进将文字隐藏起来. 当鼠标移动到按钮上方则切换一个背景图片.

使用 margin-left 属性 (演示)
这个技巧极其简单. 只是定义一个为负值的 margin-left 属性并使用 float:left.

译者的话

以上案例中, 案例 7 的 Mezzoblue 是我最喜欢的一个. 美观是美观, 实用始终第一, 制作网页的时候使用大量图片会带来一定的副作用, 如产生大量流量费用, 打开图片耗时等等, 所以在仿效以上案例时应懂得取舍.

制作网页时, 在可选的情况下不建议使用 position 属性, 大量的使用 position 属性会令网页难以维护.

可能有人会问, 如果做成这样的效果, 为什么不干脆做成 Flash 网站呢? 因为 Flash 的封闭性, 令搜索引擎不能抓取信息, 用户也不能对其使用浏览器的页面文字搜索, 无论是 SEO 还是 UED 优化都不是好的选择. 所以, 请尽量使用文字和图片, 而非 Flash.