The stickers (or ribbon) are those images that are placed in the upper right or upper left, and commonly have a form angular range. There are various types, from simple static images to the most spectacular Flash movies. Sometimes they are constructed so as to stay in position even when scroll the browser window.
If you do not want to rely on services such as QuickRibbon.com , but you want to build a ribbon around you, here are 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 image below, of 163 × 163 pixels, ecostruita to the upper left corner.
To make the effect complete overlap must choose, when you save, a format that supports transparency, like GIF or PNG.
2. HTML code
contenitore, che useremo puoi per posizionare l'immagine nell'angolo: Saved our image we can put it in our pages, tags by wrapping the img in a div container, which you'll use to position the image to the:
1 |
If our stickers must have a link, we can make use of tags map to define a sensitive area that is not rectangular. The stickers shown in this sample, in fact, have an oblique form and transparency highlights the contours perfectly. It would therefore be inappropriate can click an empty area by simply adding a tag a flow around the image. Then we use this syntax:
1 2 |
definisce le coordinate del nostro ribbon. The attribute coords of the tag area defines the coordinates of our ribbons.
3. CSS
Let's add the definitions of the styles that will allow our stickers positioned on the page properly:
1 2 3 4 5 6 7 8 9 10 11 | {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; margin: 0; none } background-image: none} |
in fixed : If we want the ribbon to remain "stuck" to the video, even if we scroll down the window, just change the absolute style position in fixed :
1 2 3 4 5 6 7 8 | {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} |
, fino a poco tempo fa non era supportato da tutti i browser. Note: the type
fixed, in the styleposition, until 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 the contents of any window and replace the ribbon so that it gave the impression to remain substantially motionless. Fortunately, today, apart from some outdated version of Internet Explorer, all browsers support the typefixed.
[...] How I Did It: How to Create a sticker-ribbon in 3 steps posted under Graphics Related Post: Creating the interface of an operating system with jQuery [...]
[...] You'd like to make a ribbon with the custom graphics you can do this using divs 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 [...]