芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
5

Google Adsense 广告投影效果

作者 芒果/分类 代码/发布于 2010-04-30 10:27

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

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

<div class="google">
    <div class="shadow"><!-- 300x250 --></div>
<div class="adsense"><!-- Google Adsense --></div>
</div>

这三个 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 下无效。不过没有用到任何图片,目前已经在芒果上应用。少一些体积省一些流量,可以尝试一下。

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/google-adsense-advertisement-shadow-effect/" title="Google Adsense 广告投影效果" rel="bookmark">Google Adsense 广告投影效果 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 5 条群众意见

  1. Don /2010-04-30 13:41

    确实用 CSS 比背景图片实现省流量,免去加载图片,但不能渐变。鱼与熊掌,还是不可兼得的。 回应

    #1
  2. Jutoy /2010-04-30 14:26

    我还真以为是图片做的呢。 回应

    #2
  3. 皓辰 /2010-05-01 16:18

    要是有个图片演示一下就好了。 回应

    #3
  4. 乌蝇网 /2010-05-16 18:27

    主题不错,测试回复。 回应

    #4
  5. 塵清枫 /2012-08-24 15:50

    好看,自己用上试试效果 回应

    #5

下面我简单说几句