国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > 模仿 Google 新搜索框的阴影效果

模仿 Google 新搜索框的阴影效果

来源:程序员人生   发布时间:2014-02-27 21:02:40 阅读次数:4662次
如图所示,注意搜索框的下边框右边框的简单阴影效果。一起到Google看看去!

 

模仿Google新搜索框的阴影效果

是图片吗? 不是,Google是通过3个不同颜色的边框实现的简单阴影。

(注意:Google的效果不支持IE6,但是模仿的效果支持所有浏览器。)

Google是如何实现的?

模仿Google新搜索框的阴影效果
Google的主要HTML代码:
<div class="ds">
<input class="lst" size="57">
</div>
Google的主要CSS代码:
.ds {
height:32px;
border-bottom:1px solid #e7e7e7;
border-right:1px solid #e7e7e7;
display:inline-block;
}
.lst {
height:25px;
margin:0px;
padding:5px 8px 0 6px;
border:1px solid #ccc;
border-bottom-color:#999;
border-right-color:#999;
}
查看Demo:点击这里

我的模仿效果

观察这篇文章的结尾处,或者到博客首页。
如图所示,只有下边框有阴影,与我的博客阴影方向一致。
模仿Google新搜索框的阴影效果

 我的主要HTML代码:

<div class="outer">
div_outer
<div class="inner">
div_innner
</div>
</div>

我的主要CSS代码:

.outer {
width:400px;
border:1px solid #ccc;
border-bottom:2px solid #e7e7e7;
}
.inner {
height:20px;
line-height:20px;
width:360px;
margin-bottom:0px;
border-bottom:1px solid #ccc;
padding:10px 20px 15px 20px;
}

查看Demo:点这里

留念

这个效果看起来简单,实践起来也不难。但是要想到,并且做好,并不容易。

首先,需要两个容器,两个边框,不一定每个人都能想到。

然后,那几个边框的颜色和方向是很讲究的,要看起来像阴影,而且是正确的阴影。

最后,简单的东西常常不简单。

(完 2010年6月19日 晚)

出处:http://www.haoxiaoru.info/archives/560

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------

上一篇 Prototype系列(1)初探prototype.js

下一篇 网站收录及排名降低后分析之如何补救

分享到:
------分隔线----------------------------
为码而活
积分:4237
15粉丝
7关注
栏目热点
关闭
程序员人生