There are three common ways used by the designer if you want to form a rounded background (ellipse) or something that clearly is a cool name Rounded Corner. Nilanya expressed by radius. And because it uses basic CSS selector ranging from property to, this trick can be used on all templates and themes.
1. Stating Background As Direct Images
The percentage of usage can be up to 40%. This is the easiest stage of the three stages which I will explain. There are three extensions that are often used:
* PNG: Usually used if the background behind it but not the color images. Storing images with this extension can be made transparent effect on the rounded part. All the major browsers already support PNG transparency except IE6.
* GIF: Almost similar to the extension of PNG, only produced poor-quality image even with a smaller size so that the loading pretty quickly.
* JPG: Used if the designer already knows the background color of the target. Since this extension does not support transparency, so if the images created in photoshop (* transparent background) and saved with this extension, the background will become white.
There are interesting from the third party tools that provide manufacturing services for free Corners rounded. Just try to visit http://www.roundedcornr.com
Examples of its application can be seen in the quote ID CSS below ==>
#menubottom{
width:100%;
margin:0 0 0px;
height:46px;
background:#40534a url(http://img706.imageshack.us/img706/8813/navmenu2radius7.png) no-repeat;
}
2. Property
In addition to step one above, this is the second easiest. Even easier to say, if for those who can not use Photoshop. From some of my surgical templates, presentation of the use of this property could achieve the 35%. Some of the major browsers (Mozilla, Chrome, Safari and Opera) are supported except for the IE family.
The following properties are:
- moz-border-radius:7px; /* untuk mozilla FF & Universal*/
- webkit-border-radius:7px; /* untuk Safari */
Examples of its application can be seen on CSS excerpts below ==>
#header1{
background: #8a9c8e;
margin: 10px 0;
text-align: center;
color:$pagetitlecolor;
width:490px;
height:90px;
float:right;
overflow:hidden;
-moz-border-radius:7px;
-webkit-border-radius:7px;
3. CSS Selector
How pretty complicated. Perhaps because of that, how is rarely used in personal-based template design. Though complicated, but works well on all browsers. Stages still utilize the saved images with a certain extension (* note Step 1 above). The position is governed by the CSS peletakannya hereinafter called an HTML section. There is one blog that has never explained the application of this method. I've forgotten who the author, a clear link is here. Sorry, I can not explain here because it's too long ...
Setting margins / padding is very influential. My advice, better air-margin value "0" (zero).
0 Comments:
Post a Comment