网站设计趋势：立体盒子
这是一个正在逐渐流行的创意的趋势。事实上它非常容易实现，只需要增加了一个额外的元素和独特的设计。
让我们看一下该如何实现立体盒子的效果吧，然后，我们将会给大家展示一些很好的例子。
准备
先准备好你的页面和图片，我们使用这张图片：
我们简单的将HTML写成这样:
1 2 3 | <div id="container"> <img id="logo" src="logo.png" alt="Lee Munroe" /> </div> |
CSS样式可能会是这个样子的:
1 2 3 4 5 6 7 8 | body{background:#999;} #container{ width:960px; background:#fff; margin:20px auto; padding:10px; } |
下面是一个效果预览：
设置为相对定位
当我们定位logo的时候，我们希望它的位置是相对于容器的，因此使用相对定位：
1 2 3 4 5 6 7 | #container{ width:960px; background:#fff; margin:20px auto; padding:10px; position:relative; } |
将它定位到盒子的外面
现在你需要做的就仅仅是定位logo，将其水平定位，让它从容器中突出出来。
1 2 3 4 | #logo{ position:absolute; left:-15px; } |
现在，我们就可以看到，logo已经显示在盒子之外了。
15使用立体盒子的创意网站欣赏
Change in Command
Icon Designer
Yoast
Twiistup
The Design Superhero
Eric Ryan Anderson
Rock Werchter
Freelance Suite
Hipsterist
CreamScoop
Bright Kite
From The Couch
DesignM.ag
Matt Mullenweg
原文：
译自：Leemunroe
版权所有，转载请注明出处。多谢。
如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。