点击这里给我发消息 点击这里给我发消息

CSS实例:GG Adsense广告投影效果

添加时间:2011-8-5
    相关阅读: CSS google

一直觉得帕兰的 Google Adsense 广告修饰得很漂亮。使用背景图片可以很方便地实现这个投影效果,不过使用 CSS 就足以实现。

 

以创建一个 300×250 尺寸的广告投影为例:  


这三个 div 容器中,其中第一个子容器用于投影效果,第二个用于 Google Adsense 代码。附加样式如下:
.google{position:relative;width:440px;height:260px;}.adsense{width:300px;height:250px;border:5px solid #d2d2d2;margin-left:130px;position:absolute;z-index:1;}.adsense:hover{border-color:#565656;}.shadow{border-color:#e9e9e9 #fff #fff;border-style:solid;border-width:130px 0 0 130px;height:0;width:0;position:absolute;left:0;top:130px;}
主要利用了定位和边框,利用边框,可以轻松实现三角形。有两个遗憾是:投影的渐变无法实现,广告 hover 效果在 IE6 下无效。不过没有用到任何图片,目前已经在芒果上应用。少一些体积省一些流量,可以尝试一下。

本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册