网站设计趋势:立体盒子

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

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

准备

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

![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
#### 设置为相对定位

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

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

将它定位到盒子的外面

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

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

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

Outside box
### 15使用立体盒子的创意网站欣赏

Change in Command

Change in Command
##### Icon Designer

Icon Designer
##### Yoast

Yoast
##### Twiistup

Twiistup
##### The Design Superhero

The Design Superhero
##### Eric Ryan Anderson

Eric Ryan Anderson
##### Rock Werchter

Rock Werchter
##### Freelance Suite

Freelance Suite
##### Hipsterist

Hipsterist
##### CreamScoop

CreamScoop
##### Bright Kite

Bright Kite
##### From The Couch

From The Couch
##### DesignM.ag

DesignM.ag
##### Matt Mullenweg

Matt Mullenweg
原文:
译自:Leemunroe
版权所有,转载请注明出处。多谢。