Many websites have eye-catching CSS floating corners. These can be used for many purposes, such as advertations. In this post I'll explain how to create those CSS floating corners.

If you're viewing this page, you'll see one floating corner in your browser. Even when you resize your browser, the corner will stick to his position.

To accomplish this, use the following CSS code. In this example I'll only explain the "upperLeft" corner.

#upperLeftCorner {
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    overflow: visible;
    width: 300px;
    height: 300px;
    margin: 0 0 0 0;
    padding: 0;
    z-index: 9999;
    border: none;
    float: none;
  }

<div id="upperLeftCorner">
  <img src="upperleftcorner.gif" border="0">
</div>

That's it. To make the corners look a little bit see trough, the DIV will be:

<div id="upperLeftCorner">
  <img src="upperleftcorner.gif" border="0" 
style="filter:alpha(opacity=60);opacity: 0.60;-moz-opacity:0.60;">
</div>

For the code of the four corners, go to the floating CSS corners and check out the source code.

Enjoy this knowledge and use it wisely.

Interested in this topic? You might enjoy another article I've written called

• Recreating the IBM Lotusphere logo in CSS3
• The Apple.com navigation menu created using only CSS3
• Experimenting with the element() CSS function
• Why you want to use the :any() CSS selector
• Rotating billboard using only CSS3

Did you like this article? Subscribe to my feed or email to keep updated on new articles.

Spread the word and submit to:

Comments

Add New Search RSS

Lars   2007-07-06 19:17:15 Plain and simple I would like a small review on how to make a floating corner on images. Reply | Quote

pavansut - seems to break on ie 7   2008-01-14 05:52:44 I used it on my site, but it seems to break in ie7. please check the site www.zermattgarments.com. Have to yet find a fix for it. Reply | Quote

Marco - Works fine   2008-01-15 11:02:55 Works fine in IE7 over here ? Reply | Quote

José Jorge - suggestion...   2008-04-02 08:05:00 Hello !! Very nice, thank you for the tutorial. By the way, is there a way to make the floating corner follow the page as you scroll down it ??? It would be great, bue thank you again!!! Keep up the good work, and best wishes from Mexico ! Reply | Quote

Marco   2008-04-02 11:48:07 You could try to create a sticky sidebar or box and combine it with this technique. Another solution is adding the position:absolute to the CSS code. Good luck! Reply | Quote

Ares download   2009-10-19 19:56:19 This is cool, but what would you use it for? Reply | Quote

domain names - Adverts   2010-01-19 17:39:54 This is brilliant for use with adverts. Used it on a few sites. Reply | Quote

not Jay Zeus! - How to keep the images on same position when on fu   2010-05-11 12:53:36 How do I keep the images on same position when on full screen (F11) - Im struggling with this, would you be able to help me out please?! regards, Reply | Quote

UK Web Hositng - Look Nice :)   2011-05-20 11:48:00 Hello, really A nice explanation will help lots of uses online. Reply | Quote

Read more...
Name:
Email:	do not notifynotify Gravatar enabled.
Website:
Title:
UBBCode:	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge
	Please input the anti-spam code that you can read in the image.

Unsubscribe from e-mail notifications.