如何用CSS制作广告投影,CSS实例:Google Adsense代码广告投影效果
flypeng 发布时间:08-29 来源:鹏鹏编程网 浏览:39次
CSS实例:Google Adsense代码广告投影效果.

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

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

 

<p class="google">
    <p class="shadow">300x250</p>
    <p class="adsense">Google Adsense</p>
</p>

 

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

如果你有好的win10资讯或者win10教程,以及win10相关的问题想要获得win10系统下载的关注与报道。
欢迎加入发送邮件到657025171#qq.com(#替换为@)。期待你的好消息!