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

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

准备

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

我们简单的将HTML写成这样:

 <p id="container">	<img id="logo" src="logo.png" alt="Lee Munroe" />
</p>

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

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

下面是一个效果预览：

设置为相对定位

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

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

将它定位到盒子的外面

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

#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
版权所有，转载请注明出处。多谢。

评论 (0) All

登陆 还没注册？