Placed in: Home
Create valid CSS floating corners

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.

Floating Corner

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;
  }
And in your HTML, put the following code:
<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.


Tags:  CSS how to webdesign internet

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

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

Spread the word and submit to:
Digg!Reddit!Del.icio.us!Facebook!Technorati!StumbleUpon!Newsvine!Furl!Ma.gnolia!
Comments
Add NewSearchRSS
Lars   2007-07-06 19:17:15
Gravatar image Plain and simple :)

I would like a small review on how to make a floating corner on images.
pavansut - seems to break on ie 7   2008-01-14 05:52:44
Gravatar image 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.
Marco - Works fine   2008-01-15 11:02:55
Gravatar image Works fine in IE7 over here :confused: ?
José Jorge - suggestion...   2008-04-02 08:05:00
Gravatar image 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 ! :)
Marco   2008-04-02 11:48:07
Gravatar image 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!
Ares download   2009-10-19 19:56:19
Gravatar image This is cool, but what would you use it for?
Read more...
Name:
Email:
  Gravatar enabled.
Website:
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Unsubscribe from e-mail notifications.
 
< Prev   Next >
Subscribe

About 3513 others will follow everything on Marcofolio.net.