在许多网站中我们可以看到网站主将Google adsense或是百度推广修饰成投影效果,很漂亮,给人的视觉效果非常不错。不过大多数都是基于背景图片的方式来实现的,但实际上通过CSS 同样能实现这种效果。如下:
以Google adsense 336*280为例:
1.html代码如下:
<div class="google">
<div class="shadow"><!-- 336x280 --></div>
<div class="adsense"><!-- Google Adsense --></div>
</div>
其中第一个子容器用于投影效果,第二个用于 Google Adsense 代码。
2.css 代码如下:
.google{position:relative;width:475px;height:280px;}
.adsense{width:336px;height:280px;border:5px solid #d2d2d2;margin-left:135px;position:absolute;z-index:1;}
.adsense:hover{border-color:#565656;}
.shadow{border-color:#e9e9e9 #fff #fff;border-style:solid;border-width:130px 0 0 135px;height:0;width:0;position:absolute;left:0;top:160px;}
主要利用了定位和边框,利用边框,可以轻松实现三角形。
综合而言,有两个小缺点:
1.投影的渐变效果无法实现。
2.广告 hover 效果在 IE6 下无效。
但也有其优点:没有用到图片,这样显示速度加快。