当前位置：首页 > 视觉设计 > 设计教程 >

网页设计教程与欣赏：立体包边设计

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

发表于：2009-04-13 22:26 分类：首页 > 视觉设计 > 设计教程 > , 标签: 页面设计

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

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

准备

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

Logo

我们简单的将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;
}

下面是一个效果预览：

Inside box

设置为相对定位

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

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

将它定位到盒子的外面

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

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

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

使用立体包边的创意网站欣赏

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

顶一下
(1)
100%
踩一下
(0)
0%
上一篇：优秀的选项卡式导航菜单设计 下一篇：使用Photoshop制作蒙太奇插画 收藏 | 挑错 | 推荐 | 打印

相关阅读

网友评论

  • 发表评论 (请自觉遵守互联网相关政策法规，作者管理后台可以删除恶意评论、广告和违禁词语。)

    称： ( 默认为“匿名营员” )