Wikidot Design & Development

Browser corner info triangle

corner-info-RA5.png

An infobox with a twist - using fixed positioning.

Sometimes you want to be able to quickly grab the attention of your visitors to inform them of something relating to your site. A creative way of doing this is by fixing the information in the corner of the browser window, so that even when the page is scrolled down, the element stays on top. We're going to use a triangle, because it fits nicely into the corner of the browser. (Just incase you hadn’t noticed it already, you can see this in action in the top left corner of this page).

First, we need to design the element itself. While it is possible to create triangles with CSS3, it's unlikely they'll render properly in every browser, and because we're using fixed positioning, the last thing you want is a great big box stuck in the corner of your visitor’s browser window. So instead, we're going to use a png. You can grab a blank triangle png at the bottom of this page, but it’s pretty easy to design one yourself.

Now to add it to the site. You can either put it in a live template so that every page on your site/category has the image, or you can just add it to selected pages. We’ll give the image the class corner-info and add the class to our custom CSS. If you’re promoting a page on your site, remember to add a link to your image.

Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.