在网页的右上角放置一个三角形广告区域,是不影响页面整体效果,但又引人注意的一种静态广告方式。但通常这么做都会用一个图片来做,其结果是点击区域变得过宽,甚至还对浏览器有所挑剔。可能这样的结果恰好增大了可供点击的区域,但它实际上并不反映事实。

幸运的是,CSS3能够帮你的忙。

本文所有代码均来自http://www.impressivewebs.com/page-corner-ads-css3/,如果您对其中的任何技术细节存在疑问,请以原文为准。

问题回顾

传统的页角广告做法是这样的,放置一个z-index值非常高的图片,通过设定其定位方式position为absolute,将其放置在右上角的位置。

这样的效果从视觉上来说没什么问题,但它实际上让用户的实际操作和视觉效果脱离了,本来并不属于页角的部分变成了页角的一部分。可能这无伤大雅,但它终究不是我们所希望的。

CSS3 的策略

非常幸运,CSS3当中有一项新特性,那就是能够将元素旋转。

#corner-ad {  
    display: block;  
    width: 200px;  
    height: 200px;  
    position: absolute;  
    top: -100px;  
    right: -100px;  
    -webkit-transform: rotate(45deg);  
    -moz-transform: rotate(45deg);  
    -o-transform: rotate(45deg);  
}  

上面的代码能够将一个普通的块级元素旋转45度,而这就是我们真正想要做的。现在,页角的点击区域已经和视觉范围相吻合了。

IE怎么办

IE总是这么讨厌。CSS3的旋转在IE9当中才开始支持,6、7、8都对这个方案不感冒。因此,我们需要增加一些IE专有的代码来保证视觉效果的一致:

#corner-ad {  
    top: -142px\9;  
    right: -60px\9;  
    *right: -140px;  
    filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);  
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";  
    zoom: 1;  
}  

好在这些代码对IE通吃。

查看DEMO
下载DEMO

About liuyanghejerry

富有激情的前端工程师,专注GUI开发。

Comments are closed.

Post Navigation