Easy Top Corner Banners with CSS
- Posted at: 1:02 pm
- Filed in: Design
Corner banners have been a popular web trend for a long while now. Last year you could not visit anyone’s website without seeing some type of banner stripe. I recently received quite a bit of heat concerning an anti-IE banner that I was displaying on my site, but even more questions on how I actually created the banner. The CSS needed to accomplish these corner banners is fairly simple and can be modified to accommodate any size image banner you choose. Below is a simple example of both left and right top corner banners.
That’s nifty! I have an IE warning banner on my blog as well. I will consider to use this instead. Thanks!
Thanks for the link, and nice examples Chris
What exactly does:
text-indent: -999em;do?Daniel: The text indent style indents the actual link text — “Top Right Link Text” or “Top Left Link Text” outside of the browser window, but when styles are turned off it will display your link text.
The thing I find great in this case is that these corner stripes often carry a strong message (e.g. ‘Too cool for IE’ or ‘Make poverty history’) and aren’t used solely for decoration like most trends.
Andy.
P.S. Thanks for the linkage.
This website is excellent, thank you very much for sharing such usefull codes!!!
not even paysites offer such good content, also the blog feature with people posting comments are very well done, very well tought, knowledge defenitely comes from heaven!
G-d bless you all. thanks to the site owners and all people participating!
This site is inspiring me alot!! thank you
Indeed! You’re a great help, Chris.
I have not changed the IE warning banner on my site and it will stay there forever!
thanks for this tip. I’ll definately be implementing it once K2 goes final.
The nice thing about the javascript versions of the banners you’d see all over was that only the actual diagonal banner was a clickable link, whereas with CSS you have to use a big square block for the link.
Nice little article here. My only issue with methods of indenting text off the screen is that it causes the link outline to extend all the way to the left and can have adverse affects. In your case, the top right banner causes a horizontal scrollbar to appear.
Rafif Yalda: Which browser are you having horizontal scrollbars appear?? I don’t have any scrollbars in Safari, Firefox or IE.
The style could be added to a basic div instead of a link and the text-indent would no longer be necessary and you wouldn’t have the square block link as Erik mentioned.
I’m getting a horizontal scrollbar while clicking the right corner banner in Firefox, but not in IE.
I rearranged things a little bit on my site to accomodate semi-transparent PNG’s in IE, and I think it led to some additional IE weirdness: only the actual banner graphic is clickable (similar to javascript versions I’ve seen), but the cursor doesn’t change to indicate a clickable link on mouseover (clicking the link still works, though).
/shrug
Phil: Add the following style to get a hand cursor on anything ya like:
cursor: hand;
Tolle Ideen für SEO-freundliche Menüs…
Bei exploding-boy gibt es einige interessante Menüs die alle super SEO geeignet sind, da sie nur mit CSS gestyled sind.
http://exploding-boy.com/images/EBmenus/menus.html
VIA: csshilfe
Technorati Tags: css, seo, suchmaschinenoptimierung, webdesign
…
THis only works in FF for me. It seems like other css on my site is interfering with it on IE
thank you ,
i’ve searched on google for more than 1 hour for this example and couldn’t find a good way on doing this.
thank you once again
I’m curious, I have implemented it half way down the side of my page to look like it’s sticking out of the background. However, I would really like it to stay where it is in relation to the table with the content in it.
Is there a way to tie it’s position to a table?