网站设计趋势:立体盒子
2 分钟读完

网站设计趋势:立体盒子

这是一个正在逐渐流行的创意的趋势。事实上它非常容易实现,只需要增加了一个额外的元素和独特的设计。

让我们看一下该如何实现立体盒子的效果吧,然后,我们将会给大家展示一些很好的例子。

准备

先准备好你的页面和图片,我们使用这张图片:

![Logo](//www.qianduan.net/img/2009/04/154924cr6.png)
我们简单的将HTML写成这样:
![Lee Munroe](logo.png)

CSS样式可能会是这个样子的:

body{background:#999;} #container{ width:960px; background:#fff; margin:20px auto; padding:10px; }

下面是一个效果预览:

![Inside box](//www.qianduan.net/img/2009/04/154924t8r.jpg)
#### 设置为相对定位

当我们定位logo的时候,我们希望它的位置是相对于容器的,因此使用相对定位:

container{ width:960px; background:#fff; margin:20px auto; padding:10px; position:relative; }

将它定位到盒子的外面

现在你需要做的就仅仅是定位logo,将其水平定位,让它从容器中突出出来。

logo{ position:absolute; left:-15px; }

现在,我们就可以看到,logo已经显示在盒子之外了。

![Outside box](//www.qianduan.net/img/2009/04/154924ev6.jpg)
### 15使用立体盒子的创意网站欣赏
Change in Command
[![Change in Command](//www.qianduan.net/img/2009/04/154924jtb.jpg)](http://www.changeincommand.com/)
##### [Icon Designer](http://www.icondesigner.net/)
[![Icon Designer](//www.qianduan.net/img/2009/04/154924i34.jpg)](http://www.icondesigner.net/)
##### [Yoast](http://yoast.com/)
[![Yoast](//www.qianduan.net/img/2009/04/1549244b8.jpg)](http://yoast.com/)
##### [Twiistup](http://www.twiistup.com/)
[![Twiistup](//www.qianduan.net/img/2009/04/154924te6.jpg)](http://www.twiistup.com/)
##### [The Design Superhero](http://thedesignsuperhero.com/)
[![The Design Superhero](//www.qianduan.net/img/2009/04/154925lwy.jpg)](http://thedesignsuperhero.com/)
##### [Eric Ryan Anderson](http://www.ericryananderson.com/)
[![Eric Ryan Anderson](//www.qianduan.net/img/2009/04/1549250h7.jpg)](http://www.ericryananderson.com/)
##### [Rock Werchter](http://www.rockwerchter.be/en/home/)
[![Rock Werchter](//www.qianduan.net/img/2009/04/154925i6h.jpg)](http://www.rockwerchter.be/en/home/)
##### [Freelance Suite](http://www.freelancesuite.com/demo/)
[![Freelance Suite](//www.qianduan.net/img/2009/04/154925w5b.jpg)](http://www.freelancesuite.com/demo/)
##### [Hipsterist](http://hipsterist.com/)
[![Hipsterist](//www.qianduan.net/img/2009/04/1549256nx.jpg)](http://hipsterist.com/)
##### [CreamScoop](http://creamscoop.com/)
[![CreamScoop](//www.qianduan.net/img/2009/04/154925tci.jpg)](http://creamscoop.com/)
##### [Bright Kite](http://brightkite.com/)
[![Bright Kite](//www.qianduan.net/img/2009/04/154925b63.jpg)](http://brightkite.com/)
##### [From The Couch](http://www.from-the-couch.com/)
[![From The Couch](//www.qianduan.net/img/2009/04/154926oob.jpg)](http://www.from-the-couch.com/)
##### [DesignM.ag](http://designm.ag/)
[![DesignM.ag](//www.qianduan.net/img/2009/04/154926von.jpg)](http://designm.ag/)
##### [Matt Mullenweg](http://ma.tt/)
[![Matt Mullenweg](//www.qianduan.net/img/2009/04/1549267m8.jpg)](http://ma.tt/)
原文:[](http://www.qianduan.net/web-design-trend-out-of-the-box.html) 译自:[Leemunroe](http://www.leemunroe.com/designing-out-of-the-box/) 版权所有,转载请注明出处。多谢。