Better Page Corner Ads with CSS3 Transforms

Posted By admin On May 18, 2010 @ 2:53 pm In css | No Comments

The other day I came across a useful site ^[1] called ScriptSrc.net ^[2] that allows you to get up-to-date script tag links that point to your favourite JavaScript libraries.

The site ^[1] has a clickable corner ad promo to get people to “spread the word”. I thought using CSS3 there would be a better way to position such a corner advertisement (or promo, or whatever), because the clickable area for the ad on ScriptSrc.net is actually too big. In some cases, you might prefer the clickable area to be bigger, but I think it’s always best to keep the clickable area limited to the actual ad.

The Clickable Area is too Big

On the ScriptSrc.net website ^[3], the clickable area on the corner promo is naturally a square, because all page elements in HTML are square or rectangular. This is indicated in the image below:

The clickable area of the corner ad is square

Maybe they don’t care that this is the case, or maybe they prefer it that way, so it gets more clicks. I personaly feel it’s more usable if the actual corner section is the only clickable area.

CSS3 Transforms to the Rescue

If you’ve become familiar with some new CSS3 enhancements, you probably know that elements can be rotated. We can use this to make the corner promo more usable. Here is the CSS:

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

(NOTE: The syntax highlighter I’m using displays the CSS property “right” as “rightright”, so just ignore that in the code above and below).

Now the only clickable area is the actual corner, so there is no risk that a stray click near the corner triggers the corner promo.

Works in All Browsers (with Hacks for IE)

The great thing about this is that, although the method uses a CSS3 enhancement, Internet Explorer offers rotation capabilities by means of proprietary filters. In the case of my own demo page, I also had to add some IE-version-specific hacks to get the positioning of the ad correct, so there is some extra unwanted code that’s needed to get this to work properly. The following code placed below the original CSS gets it to work in all versions of IE:

#corner-ad {
top: -142px9;
right: -60px9;
*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;
}

The “transform” code is from Paul Irish’s CSS3, please ^[4] CSS3 generator, which has recently added support for IE’s matrix rotation filter. The “zoom” property isn’t needed in my example, but it is needed in cases where the element doesn’t have layout.

Check out the demo using the button below.

DEMO ^[5]

^[6]
^[7]
^[8]
^[9]
^[10]
^[11]
^[12]
^[13]
^[14]
^[15]
^[16]
^[17]
^[18]
^[19]
^[20]
^[21]

Article printed from Tikier Hosting: http://blog.tikier.com

URL to article: http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms

URLs in this post:

[1] site: http://www.tikier.com/hosting.php

[2] ScriptSrc.net: http://scriptsrc.net/

[3] website: http://www.tikier.com

[4] CSS3, please: http://css3please.com/

[5] DEMO: http://blog.tikier.com/demos/page-corner/

[6] : http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms/feed

[7] : http://www.shareaholic.com/api/share/?title=Better+Page+Corner+Ads+with+CSS3+Transforms&link=http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms&notes=The%20other%20day%20I%20came%20across%20a%20useful%20site%20called%20ScriptSrc.net%20that%20allows%20you%20to%20get%20%20up-to-date%20script%20tag%20links%20that%20point%20to%20your%20favourite%20JavaScript%20%20libraries.%0D%0A%0D%0AThe%20site%20has%20a%20clickable%20corner%20ad%20promo%20to%20get%20people%20to%20%E2%80%9Cspread%20the%20%20word%E2%80%9D.%20I%20thought%20using%20CSS3%20there%20would%20be%20a%20better%20way&short_link=&shortener=google&shortener_key=&v=1&apitype=1&apikey=8afa39428933be41f8afdb8ea21a495c&source=Shareaholic&template=&service=2&tags=&ctype=

[8] : http://www.shareaholic.com/api/share/?title=Better+Page+Corner+Ads+with+CSS3+Transforms&link=http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms&notes=The%20other%20day%20I%20came%20across%20a%20useful%20site%20called%20ScriptSrc.net%20that%20allows%20you%20to%20get%20%20up-to-date%20script%20tag%20links%20that%20point%20to%20your%20favourite%20JavaScript%20%20libraries.%0D%0A%0D%0AThe%20site%20has%20a%20clickable%20corner%20ad%20promo%20to%20get%20people%20to%20%E2%80%9Cspread%20the%20%20word%E2%80%9D.%20I%20thought%20using%20CSS3%20there%20would%20be%20a%20better%20way&short_link=&shortener=google&shortener_key=&v=1&apitype=1&apikey=8afa39428933be41f8afdb8ea21a495c&source=Shareaholic&template=&service=3&tags=&ctype=

[9] : http://www.shareaholic.com/api/share/?title=Better+Page+Corner+Ads+with+CSS3+Transforms&link=http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms&notes=The%20other%20day%20I%20came%20across%20a%20useful%20site%20called%20ScriptSrc.net%20that%20allows%20you%20to%20get%20%20up-to-date%20script%20tag%20links%20that%20point%20to%20your%20favourite%20JavaScript%20%20libraries.%0D%0A%0D%0AThe%20site%20has%20a%20clickable%20corner%20ad%20promo%20to%20get%20people%20to%20%E2%80%9Cspread%20the%20%20word%E2%80%9D.%20I%20thought%20using%20CSS3%20there%20would%20be%20a%20better%20way&short_link=&shortener=google&shortener_key=&v=1&apitype=1&apikey=8afa39428933be41f8afdb8ea21a495c&source=Shareaholic&template=&service=5&tags=&ctype=

[10] : http://www.shareaholic.com/api/share/?title=Better+Page+Corner+Ads+with+CSS3+Transforms&link=http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms&notes=The%20other%20day%20I%20came%20across%20a%20useful%20site%20called%20ScriptSrc.net%20that%20allows%20you%20to%20get%20%20up-to-date%20script%20tag%20links%20that%20point%20to%20your%20favourite%20JavaScript%20%20libraries.%0D%0A%0D%0AThe%20site%20has%20a%20clickable%20corner%20ad%20promo%20to%20get%20people%20to%20%E2%80%9Cspread%20the%20%20word%E2%80%9D.%20I%20thought%20using%20CSS3%20there%20would%20be%20a%20better%20way&short_link=&shortener=google&shortener_key=&v=1&apitype=1&apikey=8afa39428933be41f8afdb8ea21a495c&source=Shareaholic&template=&service=52&tags=&ctype=

[11] : http://www.shareaholic.com/api/share/?title=Better+Page+Corner+Ads+with+CSS3+Transforms&link=http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms&notes=The%20other%20day%20I%20came%20across%20a%20useful%20site%20called%20ScriptSrc.net%20that%20allows%20you%20to%20get%20%20up-to-date%20script%20tag%20links%20that%20point%20to%20your%20favourite%20JavaScript%20%20libraries.%0D%0A%0D%0AThe%20site%20has%20a%20clickable%20corner%20ad%20promo%20to%20get%20people%20to%20%E2%80%9Cspread%20the%20%20word%E2%80%9D.%20I%20thought%20using%20CSS3%20there%20would%20be%20a%20better%20way&short_link=&shortener=google&shortener_key=&v=1&apitype=1&apikey=8afa39428933be41f8afdb8ea21a495c&source=Shareaholic&template=&service=74&tags=&ctype=

[12] : http://www.shareaholic.com/api/share/?title=Better+Page+Corner+Ads+with+CSS3+Transforms&link=http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms&notes=The%20other%20day%20I%20came%20across%20a%20useful%20site%20called%20ScriptSrc.net%20that%20allows%20you%20to%20get%20%20up-to-date%20script%20tag%20links%20that%20point%20to%20your%20favourite%20JavaScript%20%20libraries.%0D%0A%0D%0AThe%20site%20has%20a%20clickable%20corner%20ad%20promo%20to%20get%20people%20to%20%E2%80%9Cspread%20the%20%20word%E2%80%9D.%20I%20thought%20using%20CSS3%20there%20would%20be%20a%20better%20way&short_link=&shortener=google&shortener_key=&v=1&apitype=1&apikey=8afa39428933be41f8afdb8ea21a495c&source=Shareaholic&template=&service=257&tags=&ctype=

[13] : http://www.shareaholic.com/api/share/?title=Better+Page+Corner+Ads+with+CSS3+Transforms&link=http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms&notes=The%20other%20day%20I%20came%20across%20a%20useful%20site%20called%20ScriptSrc.net%20that%20allows%20you%20to%20get%20%20up-to-date%20script%20tag%20links%20that%20point%20to%20your%20favourite%20JavaScript%20%20libraries.%0D%0A%0D%0AThe%20site%20has%20a%20clickable%20corner%20ad%20promo%20to%20get%20people%20to%20%E2%80%9Cspread%20the%20%20word%E2%80%9D.%20I%20thought%20using%20CSS3%20there%20would%20be%20a%20better%20way&short_link=&shortener=google&shortener_key=&v=1&apitype=1&apikey=8afa39428933be41f8afdb8ea21a495c&source=Shareaholic&template=&service=207&tags=&ctype=

[14] : http://www.shareaholic.com/api/share/?title=Better+Page+Corner+Ads+with+CSS3+Transforms&link=http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms&notes=The%20other%20day%20I%20came%20across%20a%20useful%20site%20called%20ScriptSrc.net%20that%20allows%20you%20to%20get%20%20up-to-date%20script%20tag%20links%20that%20point%20to%20your%20favourite%20JavaScript%20%20libraries.%0D%0A%0D%0AThe%20site%20has%20a%20clickable%20corner%20ad%20promo%20to%20get%20people%20to%20%E2%80%9Cspread%20the%20%20word%E2%80%9D.%20I%20thought%20using%20CSS3%20there%20would%20be%20a%20better%20way&short_link=&shortener=google&shortener_key=&v=1&apitype=1&apikey=8afa39428933be41f8afdb8ea21a495c&source=Shareaholic&template=&service=53&tags=&ctype=

[15] : http://www.shareaholic.com/api/share/?title=Better+Page+Corner+Ads+with+CSS3+Transforms&link=http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms&notes=The%20other%20day%20I%20came%20across%20a%20useful%20site%20called%20ScriptSrc.net%20that%20allows%20you%20to%20get%20%20up-to-date%20script%20tag%20links%20that%20point%20to%20your%20favourite%20JavaScript%20%20libraries.%0D%0A%0D%0AThe%20site%20has%20a%20clickable%20corner%20ad%20promo%20to%20get%20people%20to%20%E2%80%9Cspread%20the%20%20word%E2%80%9D.%20I%20thought%20using%20CSS3%20there%20would%20be%20a%20better%20way&short_link=&shortener=google&shortener_key=&v=1&apitype=1&apikey=8afa39428933be41f8afdb8ea21a495c&source=Shareaholic&template=&service=39&tags=&ctype=

[16] : http://www.shareaholic.com/api/share/?title=Better+Page+Corner+Ads+with+CSS3+Transforms&link=http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms&notes=The%20other%20day%20I%20came%20across%20a%20useful%20site%20called%20ScriptSrc.net%20that%20allows%20you%20to%20get%20%20up-to-date%20script%20tag%20links%20that%20point%20to%20your%20favourite%20JavaScript%20%20libraries.%0D%0A%0D%0AThe%20site%20has%20a%20clickable%20corner%20ad%20promo%20to%20get%20people%20to%20%E2%80%9Cspread%20the%20%20word%E2%80%9D.%20I%20thought%20using%20CSS3%20there%20would%20be%20a%20better%20way&short_link=&shortener=google&shortener_key=&v=1&apitype=1&apikey=8afa39428933be41f8afdb8ea21a495c&source=Shareaholic&template=&service=40&tags=&ctype=

[17] : http://www.shareaholic.com/api/share/?title=Better+Page+Corner+Ads+with+CSS3+Transforms&link=http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms&notes=The%20other%20day%20I%20came%20across%20a%20useful%20site%20called%20ScriptSrc.net%20that%20allows%20you%20to%20get%20%20up-to-date%20script%20tag%20links%20that%20point%20to%20your%20favourite%20JavaScript%20%20libraries.%0D%0A%0D%0AThe%20site%20has%20a%20clickable%20corner%20ad%20promo%20to%20get%20people%20to%20%E2%80%9Cspread%20the%20%20word%E2%80%9D.%20I%20thought%20using%20CSS3%20there%20would%20be%20a%20better%20way&short_link=&shortener=google&shortener_key=&v=1&apitype=1&apikey=8afa39428933be41f8afdb8ea21a495c&source=Shareaholic&template=&service=38&tags=&ctype=

[18] : http://www.shareaholic.com/api/share/?title=Better+Page+Corner+Ads+with+CSS3+Transforms&link=http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms&notes=The%20other%20day%20I%20came%20across%20a%20useful%20site%20called%20ScriptSrc.net%20that%20allows%20you%20to%20get%20%20up-to-date%20script%20tag%20links%20that%20point%20to%20your%20favourite%20JavaScript%20%20libraries.%0D%0A%0D%0AThe%20site%20has%20a%20clickable%20corner%20ad%20promo%20to%20get%20people%20to%20%E2%80%9Cspread%20the%20%20word%E2%80%9D.%20I%20thought%20using%20CSS3%20there%20would%20be%20a%20better%20way&short_link=&shortener=google&shortener_key=&v=1&apitype=1&apikey=8afa39428933be41f8afdb8ea21a495c&source=Shareaholic&template=&service=10&tags=&ctype=

[19] : http://www.shareaholic.com/api/share/?title=Better+Page+Corner+Ads+with+CSS3+Transforms&link=http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms&notes=The%20other%20day%20I%20came%20across%20a%20useful%20site%20called%20ScriptSrc.net%20that%20allows%20you%20to%20get%20%20up-to-date%20script%20tag%20links%20that%20point%20to%20your%20favourite%20JavaScript%20%20libraries.%0D%0A%0D%0AThe%20site%20has%20a%20clickable%20corner%20ad%20promo%20to%20get%20people%20to%20%E2%80%9Cspread%20the%20%20word%E2%80%9D.%20I%20thought%20using%20CSS3%20there%20would%20be%20a%20better%20way&short_link=&shortener=google&shortener_key=&v=1&apitype=1&apikey=8afa39428933be41f8afdb8ea21a495c&source=Shareaholic&template=%24%7Btitle%7D+-+%24%7Bshort_link%7D&service=7&tags=&ctype=

[20] : http://www.shareaholic.com/api/share/?title=Better+Page+Corner+Ads+with+CSS3+Transforms&link=http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms&notes=The%20other%20day%20I%20came%20across%20a%20useful%20site%20called%20ScriptSrc.net%20that%20allows%20you%20to%20get%20%20up-to-date%20script%20tag%20links%20that%20point%20to%20your%20favourite%20JavaScript%20%20libraries.%0D%0A%0D%0AThe%20site%20has%20a%20clickable%20corner%20ad%20promo%20to%20get%20people%20to%20%E2%80%9Cspread%20the%20%20word%E2%80%9D.%20I%20thought%20using%20CSS3%20there%20would%20be%20a%20better%20way&short_link=&shortener=google&shortener_key=&v=1&apitype=1&apikey=8afa39428933be41f8afdb8ea21a495c&source=Shareaholic&template=&service=24&tags=&ctype=

[21] : http://www.shareaholic.com/api/share/?title=Better+Page+Corner+Ads+with+CSS3+Transforms&link=http://blog.tikier.com/tutorials/css/better-page-corner-ads-with-css3-transforms&notes=The%20other%20day%20I%20came%20across%20a%20useful%20site%20called%20ScriptSrc.net%20that%20allows%20you%20to%20get%20%20up-to-date%20script%20tag%20links%20that%20point%20to%20your%20favourite%20JavaScript%20%20libraries.%0D%0A%0D%0AThe%20site%20has%20a%20clickable%20corner%20ad%20promo%20to%20get%20people%20to%20%E2%80%9Cspread%20the%20%20word%E2%80%9D.%20I%20thought%20using%20CSS3%20there%20would%20be%20a%20better%20way&short_link=&shortener=google&shortener_key=&v=1&apitype=1&apikey=8afa39428933be41f8afdb8ea21a495c&source=Shareaholic&template=&service=43&tags=&ctype=

[22] CSS Tutorial – Generated Content: http://blog.tikier.com/tutorials/css/css-tutorial-generated-content

[23] 3 Key Off-Page Search Engine Optimization Methods: http://blog.tikier.com/seo-tips/3-key-off-page-search-engine-optimization-methods

Click here to print.

The Clickable Area is too Big

CSS3 Transforms to the Rescue

Works in All Browsers (with Hacks for IE)

DEMO [5]

DEMO ^[5]