Create a clickable corner ribbon for your website
Using CSS and simple HTML, easily create a promotional “ribbon” in the corner of your website that will link to another page.
Sometimes the situation may arise when a website owner wants to add a promotional ‘corner ribbon’ or ‘corner banner’ to their website. This may be to promote a special event, a charitable cause or to generate sales during a special campaign.
This tutorial will show you how to make an unobtrusive but eye-catching promotional ribbon for your website that:
- Is positioned in the top-right corner of the browser window.
- Does not disappear when the person scrolls down (ie: it floats).
- Will hyperlink to another internal or external page.
- Will display correctly in all browsers.
Step 1: Create the ribbon
Using a graphic software programme such as Adobe Photoshop, Corel PhotoImpact or Gimp, create a transparent image measuring 170×170 pixels.
Create your ribbon to a design of your choice. The ribbon would normally be tilted at a 45° angle. Your ribbon might look something like this within your graphics package:
The chequered pattern represents the transparent area and the border the edge of the image.
Important: Save your image in PNG format. This preserves the transparency around your ribbon.
Upload your ribbon to your web server via FTP.
Step 2: Create your Style Sheet
Create a new CSS file and add the following code:
#ribbon {
position: fixed;
top: 0;
right: 0;
z-index: 10000;
cursor: pointer;
}
The class identifier has been named “ribbon” and the z-index value set to 10,000 to (hopefully) ensure that the ribbon displays above all other content on the website.
Save the file as “ribbon.css” and upload to your server via FTP.
Step 3: Reference your style sheet within your <head> tags.
The following piece of HTML should be included within your <head> tags.
<link rel="stylesheet" href="/path/to/ribbon.css" type="text/css" />Simply change the href value to point to the location of your ribbon.css file. You can use a relative or absolute link.
Step 4: Include the ribbon within your <body> tags.
Include the following code anywhere within the <body> of your HTML file.
<a id="ribbon" href="http://www.example.com/" target="_blank">
<img alt="Alternative Text" src="/path/to/ribbon.png" width="170 height="170">
</a>
The ‘ribbon’ class ID ensures that the ribbon is placed at the top right-hand side of the browser window. You will need to change the URL that the ribbon points to when clicked. You should also change the img alt value to something more meaningful. If you don’t want the hyperlink to open in a new tab/window, delete target="_blank". Finally, check that the code correctly points to your ribbon PNG file from Step 1.
That’s it!
Your page should now display your ribbon in the top right-hand corner. When clicked, the browser should open a new window to a page of your choosing.
Variations
You can use a ribbon with different dimensions, but ensure you change the height and width values of the code in Step 4.
PNG Files and Internet Explorer 6
Internet Explorer 6 doesn’t display PNG files correctly (the transparent area will appear grey).
In 2012, I believe that Internet Explorer 6 is not worth concerning oneself with but if the prospect of PNG files displaying incorrectly for the few remaining IE6 users bothers you, simply use the SuperSleight jQuery script.
Comments
3 responses to “Create a clickable corner ribbon for your website”
Very good tutorial.
Loved reading it.
You have a classy style of presentation.
Thanks.
Very helpful tutorial.
Implemented it into my business application.
Thank you very much
Great!, look at http://www.conexiongrafica.net thanks!!!