CSS Advanced tips: rounded rectangles

The so-called CSS advanced techniques ... In fact, some of the basic skills of the creative mix, any means and skills are the way to solve the problem. As long as you learn this way of thinking, you can also have your own CSS cheats.

CSS2 There is no way to create a curved border, obviously, only the box is not able to meet our designers. So the CSS fillet technology is still so hot now.

1. Fixed-width solid-color Rounded Rectangle

. Com

In many rounded corners, fixed-width rounded rectangles should be the easiest to implement, requiring only 2 pictures and a simple HTML code.

The HTML code is as follows: . Com

title

content

The picture is roughly as follows:

Top.gif Bottom.gif

CSS code is roughly as follows: Web page teaching Network

. Wrapper{width:181px;background: #8cc355 url (.. /images/bottom.gif) no-repeat left bottom;}
. Wrapper h1{padding:10px 20px 0 20px;background:url (. /images/top.gif) no-repeat left top;}
. Wrapper p{padding:0 20px 10px 20px;}

Tips: WEB-page Teaching Network

The width in the wrapper is the true width of the picture, and the background color in the background is the same color as a solid color picture.

H1 and P are set up in the corresponding patches, for the content does not overlap or touch the outer frame.

. Com

The picture needs to have a background color, which is the same background color as the parent container that contains the current container (div class= "wrapper") in addition to the color of the rounded rectangle's solid color section. . Com

This method is suitable for a solid-color rounded rectangle with a fixed width and a highly adaptive angle.

. Com

2. Fixed-width non-solid rounded corners Rectangle

This method is an extension of the previous method, this time we do not define the background color on the container, but define the duplicate background picture.

The HTML code is as follows:

title

content

The picture is roughly as follows: Web teaching Network

Top.gif Bottom.gif Tile.gif

The CSS code is roughly as follows:

. Com

. Wrapper{width:183px;background:url (. /images/tile.gif) Repeat-y Center;
. Wrapper h1{padding:20px 20px 0 20px;background:url (. /images/top.gif) no-repeat left top;}
. Wrapper p{padding:0 20px 20px 20px;background:url (... /images/bottom.gif) no-repeat left bottom;} . Com

Tips: WEB-page Teaching Network

The characteristic is similar to the first method;

cannot be applied to background images that are not vertically altered.

PS. Fixed-height rounded rectangles can also be similar to complete, without repeating the

3. Sliding door Technology (sliding Doors)

The first two rounded rectangles are fixed-width and can only be adapted vertically to grow (or horizontally), and if you need to adapt the size of your growth vertically and horizontally, it is clear that neither of these methods works. Then we can use the so-called sliding door technology.

Principle:

Web Teaching Network

Top-left.gif and Bottom-left.gif are both large images, top-right.gif and bottom-right.gif are small images, and small images are automatically slid to fit the content according to their size on large images.

The method uses 2 groups of 4 pictures: The top of the 1 group is made up of rounded corners, and 1 groups of bottom pictures form the bottom fillet and the main body. Note the maximum height and width of the container cannot exceed the maximum height and width of the picture.

Web Teaching Network

Structure position of the Picture: Web page Teaching Network

The HTML code is roughly as follows:

title

content

. Com

The CSS code is roughly as follows:

. Wrapper{width:20em;background: #ccc url (.. /images/bottom-left.gif) no-repeat left bottom;}
. Box-outer{background:url (. /images/bottom-right.gif) No-repeat right Bottom;}
. Box-inner{background:url (. /images/top-left.gif) no-repeat left top;}
. Wrapper H1{padding:2%;background:url (... /images/top-right.gif) No-repeat right top;}
. wrapper p{padding:2%;} Web Teaching Network

Tips:

This method solves the problem of container expansion well, but it should be noted that the maximum size of the container should not exceed the maximum size of the background picture.

This method requires 2 sets of additional tags without any semantics and is not structurally ideal, we can use JavaScript and DOM to dynamically add additional elements to avoid this problem, JavaScript is not discussed.

Web Teaching Network

Sliding doors are so widely used that they can be seen everywhere. . Com

4. Peak angle (Mountaintop)

The invention of the Web master Dan Cederholm is similar to his small chameleon icon in the Web Standard solutions. Web Teaching Network

If you use the technique of 3 sliding doors to create rounded rectangles of multiple colors, is that a different set of colors? Is that going to be a lot of trouble? Luckily, Dan brought us the crest of the mountain. Instead of a variety of colors, he created a set of rounded-corner masks. Using a mask to cover the background color and generate rounded rectangles, this reverse thinking is admirable.

Fillet Mask

The basic HTML code and CSS code are the same as the previous example and require 4 different rounded masks. The code does not repeat.

Web Teaching Network

Tips:

you can use. png to create a sleek transparent mask, however, the IE6 and the following version do not support the png-24 transparent effect, you need to use the hacks, so it is not recommended. Therefore, for the mask of a GIF picture, a rounded rectangle with a small radian has a better effect, and a large radian fillet rectangle may appear jagged. The same need to add extra non semantic tags, semantic enthusiasts can use JavaScript to do this work.

5. CSS Sprites Rounded corners

CSS Sprites is not a specially crafted rounded rectangle, but it provides a scheme for making rounded rectangles.

Structure composition diagram. Com

A small figure of the rounded corners actually used

Web Teaching Network

Only use the background position to specify the background positioning of the fillet picture, but there will be a lot of extra tags, not recommended here. . Com

Next CSS Tutorial article: CSS Advanced skills: CSS Sprites. . Com