My Jalis - Digital magazine about trends
Marseille edit
My Jalis - Digital magazine about trends My Jalis - Digital magazine about trends
Lifestyle magazine and events in Marseille : CSS tip, rounded edges in image without cutting
BACK
News

CSS tip, rounded edges in image without cutting

09/09/2011

It is a custom to Web designers who want to join into their Web sites of blocks or buttons in the rounded edges. At first, two solutions are offered to them: the image cut or CSS 3. However, there is a very simple method to realize stretchable blocks vertically or horizontally by using that single image and CSS 2.

 
In our early stages when Web designers, the rounded edges were made with the use of several images (left edge, repeated center and right edge). The technique is boring because it asked for a cut of three images. It is involved in the code of a rather disturbing mess. We generally found out HTML of this kind there:

 

Title of the button (Intitulé du bouton )


But the problem is that, the browser has to interpret 3 blocks called every different image involving 3 round-trips customer/waiter and thus loading longer. Of course, this load is unimportant on a button, but let imagine this processing on the scale of a complex page with several blocks and different buttons.


Furthermore, CSS and HTML to realize this kind of style is rather laborious, and I do not even tell you about CSS engendered to manage the rollover. And if you analyze the code, you will notice that div surrounding the link is not clickable, which offers the reduced accessibility.

 

There is naturally a solution of CSS 3 with the famous effective border-radius and background-gradient but not enough democratized on the browsers at the moment.


The method which I offer you allows to mitigate all these problems by the simple following HTML code:


Title of the link (Intitulé du lien )


By means of the inheritance, it is sufficient to create an image and a corresponding CSS now. For the example, here is the image which I have chosen.

It is a question, in fact, quite simply to do the design of the button so as to be able to insert the biggest possible text there (usually the length is near 300px).


We thus have the image and HTML, but what about CSS?

a.submit{ 
       background: url('image/img.jpg') top left white;
       padding-left: 5px;
}
a.submit span{
       background: url('image/img.jpg') top right white;
       padding-right: 5px;
       display: inline-block;
       line-height: 25px;
}


Simple code, a single image, basic CSS… and it's done! Know that this tip works on all the browsers (from IE8). For IE 7, it is necessary to replace the display: inline-block; by position: relative; float: left; display: block;

A lire aussi

You too,
Share the news of your business