Cascading styles (CSS) with all their logical simplicity allow not only to create an effective design solution, but also to provide elements with a real action, emulate the execution of real code.
Any visual HTML markup tag is a rectangular area of a specific structure and content. The element contains an indication of coordinates, sizes, indents, colors, font, its style, etc. The CSS element frame specifies the area occupied by it, located from its border inward to the width indicated in the description.
Description Syntax
The element placement area is set by coordinates relative to the upper left corner of the page (left, top), horizontal and vertical size (width, height). All design and animation of an element is performed in pairs: "property: value".
The description is executed directly in the page code, on the style insert or in a separate file, pointing to it with the LINK link. Syntax:
#name {property: value; property: value; property: value; ...}
or
.name {property: value; property: value; property: value; ...}
The name can also be p, body, html, table, td ..., that is, the name of the HTML markup tag. It is allowed to connect the style description directly on the element.
Before you make your own style writing options, it’s good to see how it is done on popular sites by saving the page code or pressing Ctrl-U to view it directly in the browser.
main parameters
Actually, the CSS frame for the element is represented by style (border-style), color (border-color), width (border-width). You can describe everything with one property - border. You can describe each border of the frame independently (border-top, border-bottom, border-left, border-right).
The CSS frame is described by the general rules of cascading style sheets:
border: 3px;
border-color: red;
border-style: double dashed solid dotted.
This description sets the frame width to 3 pixels, the color is red, the style of the sides: the upper side is double, the right side is dashed, the bottom is solid, and the left is point.
border-width: 1px 2px 4px 8px;
border-color: blue;
border-style: dotted.
Here, the dimensions of each side are also shown sequentially, starting from the top, clockwise, the color is blue, and the style is dotted.
border-color: blue red green black;
in this description, the color of each side is separately indicated. The border property can include several parameters at once, and the corners of the frame can be rounded:
border: 1px green solid;
border-radius: 0px 4px 8px 12px;
-moz-border-radius: 0px 4px 8px 12px;
-webkit-border-radius: 0px 4px 8px 12px;
The convenience of the visitor depends on how to draw a frame in CSS, since this style effect is usually used for technical purposes: when it is important to show exactly the place or size of an area on a page.
The thickness of the frame and its purpose
Choosing the thickness of the frame, you can use px, pt, em ..., but keep in mind that it is always inside the element area. It's hard to imagine that the CSS frame has a design purpose, but from the technical side it is very convenient to use it to highlight page elements.
If the frame is locked in the main class, that is, missing, then specifying it in the: hover pseudo-class, you can show the visitor a page element when the mouse cursor is on it, for example, highlight a menu item. Sometimes you need to select something by clicking on the picture, or drag something somewhere. It is very convenient to use a dotted frame here, rather than changing the background of the element or its content.
Some applications need to select a page area or select items for further processing. In this case, you can create a div with a frame at the time of the click, and until the visitor releases the mouse button, resize it, visually showing the result of the selection.
Beyond
CSS lessons are very interesting, also the study of page codes of popular sites is also important. However, its own resource must be unique, it must have its own face.
The CSS frame provided by the syntax does not provide such diversity as its own initiative. Impromptu is a great beginning, and nothing prevents the developer from forming his own framework. Moreover, with all the advances in Internet technology and the capabilities of current standards, there are many promising ideas based on real flaws in the existing syntax, which (by definition) has always been strictly formal.
In particular, if we already create the framework of certain elements, it seems appropriate to do this comprehensively. By highlighting the sides and angles of a certain area in separate tags, you can get amazing effects. By assigning appropriate handlers, you can create dynamic page elements by changing position, shape and content.