CSS实例:Google Adsense代码广告投影效果. |
一直觉得帕兰的 Google Adsense 广告修饰得很漂亮。使用背景图片可以很方便地实现这个投影效果,不过使用 CSS 就足以实现。
以创建一个 300×250 尺寸的广告投影为例:
<p class="google">
|
这三个 p 容器中,其中第一个子容器用于投影效果,第二个用于 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 下无效。不过没有用到任何图片,目前已经在芒果上应用。少一些体积省一些流量,可以尝试一下。