How I Did It: How to create a sticker-ribbon in 3 steps
Tuesday, December 2, 2008 The sticker (or ribbon) are those images that are positioned in the upper right or upper left, and they commonly form an angled fascia. There are various types, from simple static images to the most spectacular Flash movies. Sometimes they are constructed so as to remain in their position even when you scroll the contents of the browser window.
If you do not want to rely on services like QuickRibbon.com, but want to build a ribbon around you, here's 3 simple steps to follow.
1. We create the image
First of all we create the image that we want to place in one of the right or left. The picture below, of 163x163 pixels, ecostruita the upper left corner.
To make the effect of overlapping track must choose, when you save, a format that supports transparency, like GIF or PNG.
2. HTML
Saved our image we can insert in our pages, wrapping the tag img in a div container, which you'll use to position the image in the corner:
- "ribbon" ><img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" >< / div> <div "ribbon" class => <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0"> </ div>
If our sticker must have a link, we can use the tag map to define a hot spot that is not rectangular. The sticker in this example, in fact, have a slanted shape and transparency highlights perfectly the contours. It would therefore be improper to allow you to click on a blank area by simply adding a tag a central axis of the image. Then we use this syntax:
- "ribbon" ><img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" usemap = "#ribbonlink" >< / div> <div "ribbon" class => <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" usemap = "#ribbonlink"> </ div>
- "ribbonlink" ><area shape = "poly" coords = "163,0,0,163,0,129,129,0" href = "http://undolog.com" >< / map> <map "ribbonlink" name => shape = <area "poly" coords = "163,0,0,163,0,129,129,0" href = "http://undolog.com"> </ map>
The attribute coords of the tag area defines the coordinates of our ribbon.
3. the CSS
Now add the definitions of the styles that will enable our stickers positioned on the page correctly:
- div.ribbon (
- absolute ; position: absolute;
- 0px ; left : 0px ; top: 0px; left: 0px;
- 163px ; width : 163px ; height: 163px; width: 163px;
- 0 ; padding : 0 ; margin: 0; padding: 0;
- visible ; overflow: visible;
- none ; float: none;
- 10000 } z-index: 10000)
- div.ribbonimg (
- 0 ; padding : 0 ; margin : 0 ; border: 0; padding: 0; padding: 0;
- none } background-image: none)
If we want the ribbon remain "stuck" to the video, even if scrolling, just change the absolute style position in fixed
- div.ribbon (
- fixed ; position: fixed;
- 0px ; left : 0px ; top: 0px; left: 0px;
- 163px ; width : 163px ; height: 163px; width: 163px;
- 0 ; padding : 0 ; margin: 0; padding: 0;
- visible ; overflow: visible;
- none ; float: none;
- 10000 } z-index: 10000)
Note: The type
fixedin the stylepositionuntil recently, was not supported by all browsers. To make the effect, in fact, was forced to use a JavaScript function that, at regular intervals, controlled the flow of any window's contents and replace the ribbon in a way that gave the impression of being essentially immobile. Fortunately, today, with some outdated version of Explorer, all browsers support the typefixed
Related Post
Loading ... 
[...] How I Did It: How to create a sticker-ribbon in 3 steps posted under Graphics Related Post: Create the interface of an operating system with jQuery [...]
[...] Would like to make a ribbon with the custom graphics you can do so using div and css. In this excellent post on Undolog will be explained step by step how to do it. If you use an image format. Png with [...]