Undolog.com

Because of the different rendering across browsers, Microsoft Internet Explorer definitely see that in mind, we must always resort to tricks to apply special effects that now should be a standard. The award-discussed rounded edges are a classic example of "disaster" produced by the complete inability to make a serious standards on page rendering HTML / CSS. , etc… There are many solutions that allow the network to obtain the "effects" (effects of exempting existing HTML as rounded edges, shadow effects, reflections, etc ...) with patches on the leaves of styles, special tricks with the use of div grafted, libraries JavaScript, use of canvas , etc ...
On a purely technical teaching I would like to explain further (cross-browser) to apply the rounded edges of the images:

Demo and source

• Complete project on Google Code
• Demo
• jquery.roundborders.js
• image in Photoshop format
• image in PNG format

CSS

We know that, apart from IE, you can create the rounded corners using just CSS some of their individual browsers, such as:

Note: I would here point out how absurd is this state of things. If every browser begins to define its CSS styles coax the most total is at hand. In addition, a standard is that when it is "identical" for all, otherwise what standard? It's really not possible to accept this state of things, find that to set a border of 4px we want to 8 lines of CSS code.

This procedure, however, despite the issue resolved "edge" does not work on images. A possible solution is to apply to one of the corners of an image has any or all four, un'alra image constructed to "simulate" a rounded edge. In practice we're going to superimpose the images of the border to our image "target", the result of the ability GIF and PNG files to be rendered with transparency.

> Pro

• works on all browsers (FireFox, Opera, Safari, Chrome, Flock, IE 7)
• useful when an intervention is rapid and targeted
• Full customization of the image that represents the edges, with the ability to customize each board
• Javascript compact and configurable: you can choose to act on what corners of the image
• does not require style sheets (CSS)

> Cons

• the border size and color depend from the image edges and backgrounds different images require different
• You will need Javascript active

The technique

contenitore. To apply the four edges at the corners of an image we will use jQuery to "wrap" the tag img in a div container. , posizionati in modalità assoluta, che corrisponderanno ai nostri angoli. Immediately under the tag img insert four div , placed in absolute mode, which correspond to our corners. The script jQuery jquery.roundborders.js is built as an extension, plugin, and the method roundBorders() accepts a number of options from which to which the corners of the soft edge. It follows that a maximum of five will be added div : container plus the four corners.

in absolute . The four div shown in the image above you will go to superimpose the image when setting the style position in the absolute . Then, through the use of margin , will be placed one by one to the four corners of the image. Here is the code jquery.roundborders.js :

Picture of the edges

As mentioned previously, one of the "cons" of this technique is the need to create an image that represents our borders. This disadvantage, however, can turn into an advantage if we need to create complex edges and not simply "rounding" classics. Anyway let's see how the image must be made for the simple edges. In our example we want to create a rounded edge of 16px. Then exploit a feature of the styles in order to "merge" our four borders in one image. In this way we will have a single image of 64 × 16 pixels, as shown below:

(Download PSD or PNG )

Each box represents a corner and has dimensions of 16 × 16 pixels. The background is black the transparent color while white is the color of the background which is our image. If your site has a different background, just replace the white with the color of your site. The image will then:

The order of the angles is required: top left (upper left), top right (upper right), bottom left (lower left corner) and bottom right (bottom right corner).

This article was useful to you?:

Loading ...

• 

• Tweet