CSS effects: rounding the corners of the elements

The syntax of cascading style sheets is constructed so simply that the possibility of obtaining the most unexpected design is available even to a person far from programming and developing sites. Perhaps from the fact that children's games in cubes remained in everyone's memory, to use this multi-faceted experience in HTML, CSS is not difficult.

However, modern programming is still very far from the representation of the constructions of real reality. So far, any area (occupied by any block element) in any of its meanings and formal purposes has a rectangular shape within which the desired curve of the contour is formed.

So far, any circle, radius of curvature, any curved straight line, etc. are described by complex mathematical equations or very small cubes, trapezoids, triangles or other rectilinear elements that are visible to the eye as a point on the line.

Classical direct constructions

It's no surprise that progress in programming and information technology has legitimized rectangular designs. Advanced ideas did not waste time on rounded forms, but they did not forget to provide the developer with enough features in the tags and rules of HTML, CSS and related programming languages.

Any element used on the page has a rectangular area, and several components are selected in it, from which in each specific case it is necessary to use only necessary, with the requirements of cross-browser compatibility, the features of marking specific content in available syntactic constructions.

General CSS Rules

Cascading style sheets suggest describing the elements as follows:

• Property: value.

The property is a specific name, and the value can be either a name or an enumeration of names or values.

Concerning block elements and the necessity to make a rounding of corners through CSS, it makes sense to use the border-radius property and its value in the format "38px" or "8px 16px 24px 38px".

If the value is set to one number, it will be set to be one for all angles. The record of all four values relates:

• The first number to the upper left;
• The second to the right upper;
• The third - to the right lower one;
• The latter to the lower left.

Sharing some rules

The concepts border, image and background can be used together. This is normal, and the rules do not interfere with each other, forming a general composition. The main thing is to give an account of what exactly each of them means, and how it is superimposed.

Before implementing this or that element, it is important to conduct several experiments and test the operation on several browsers. Orientation to advice, recommendations, third-party examples or CSS syntax, rounding corners, etc., is rarely better than your own fresh practice.

It is important to understand that border, image, from the point of view of the design of corners, are the same concepts. The picture can be presented not in png-format. It will be truncated by the browser, according to the rules set in CSS. Rounding corners is the developer's concern, regardless of the rectangularity of the source material.

Features of HTML, CSS from browsers

Welcome the entry of the style in bulk - for all browsers right away. In any case, classical examples on the theme "CSS: rounding corners" suggest writing like this:

Background: # FF7F00; /* background */

Border: 1px #CCCCCC solid; / * Frame * /

-moz-border-radius: 10px; / * CSS rounding corners for Mozilla Firefox * /

-webkit-border-radius: 10px; / * ... for Chrome and Safari * /

-khtml-border-radius: 10px; / * ... Konquerer * /

Border-radius: 10px; / * CSS rounding corners for all * / etc.

However, in most cases it is sufficient to indicate the last rule. Redundancy should be used only when there is a real need for it.

Classic and marvelous tables

Despite the numerous disputes of the supporters of tabular layout (tr, td) and the use of div and span tags ("marvelous" layout), objective practice prefers the option of reasonable necessity.

Divas have some virtues, others have tables. If they did not complement each other, but simply competed, the question would quickly disappear into one variant, combining the best sides of tables and divas.

Most sites are created using CMS (site management systems) and at the disposal of the developer comes not only a wide range of "giant" data arrays, hundreds of folders, objects, but also tables.

Tags [div | span], as such, are not allocated, but the only thing that exactly comes to the full buy-out of the developer is CSS styles. And any CMS clearly separates both the code included in it from the creativity of the developer, and its own styles from the added styles, and with regard to changes (for example, in css - rounding the corners of the table), you can always restore the settings and default styles.

Curves and angles not provided by the syntax

You can strictly follow all the rules of HTML, CSS, but have the result, they are not provided. By superimposing elements on top of each other, you can get any areas of any configuration. Using PHP programming on the server, you can send any style files to the visitor's browser and attach corresponding JavaScript code to them in the body of the HTML file or a separate js-file.

Any version of the outline, any form of your own element outside the CSS rules! Rounding corners is only a partial, and the real possibilities are much wider. At the same time programming your own objects, you can not pay attention to the features of individual browsers, use only those tags and constructions of hypertext languages that are perceived by all browsers without exception.

Using the ideas of object-oriented programming, you can design the appearance of an angle or curve, obviously not provided by any form browser. In this case, it is not at all necessary that it will be precisely the angle of the region, originally rectangular in shape. It is important that the components of the curve described in the form of CSS rules are combined into a single visual JavaScript object code and at the right moment, at the right place in the browser, reflect themselves in the correct form.

With this technology, nothing prevents such objects from realizing themselves in the three-dimensional plane or demonstrating the animation.