加拿大预测网-在线预测

信息动态

网站设计是技术与创意的完美融合!

技术资讯

网站设计趋势:立体盒子

2009-04-14 11:20:00

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

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

准备

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

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

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

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已经显示在盒子之外了。

#p#

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

Change in Command

Icon Designer

Yoast

Twiistup

The Design Superhero

#p#

Eric Ryan Anderson

Rock Werchter

Freelance Suite

Hipsterist

CreamScoop

0532-85810878 473587358 扫码添加微信

加拿大预测网-在线预测:扫码添加微信

 扫码关注公众号

加拿大预测网-在线预测:官方公众号

 2054585360