CSS Framework: Impromptu and Effect

Cascading styles (CSS) for all its logical simplicity allow not only to create an effective design solution, but also to provide elements with a real action, to emulate the execution of real code.

Any visual tag of HTML markup is a rectangular area of a specific structure and content. The element contains the indication of coordinates, sizes, indents, colors, font, its outlines, etc. The frame of the CSS element specifies the area occupied by it, located from its border inwards to the width indicated in the description.

Description Syntax

The location of the element is specified by coordinates relative to the upper left corner of the page (left, top), the size of the horizontal and vertical (width, height). All design and animation of the element are 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 to the element.

Before making your own variations on writing styles, it does not hurt to see how it was done on popular sites, saving the page code or pressing Ctrl-U to view it directly in the browser.

Main settings

The actual CSS frame for the element is represented by the style (border-style), color (border-color), width (border-width). You can describe everything by one property - border. You can describe each border of the frame independently (border-top, border-bottom, border-left, border-right).

The CSS framework 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 side style: the top side is double, the right side is dashed, the bottom is solid, the left is the dotted one.

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 border can be rounded off:

Border: 1px green solid;
Border-radius: 0px 4px 8px 12px;
-moz-border-radius: 0px 4px 8px 12px;
-webkit-border-radius: 0px 4px 8px 12px;

From how to make a frame in CSS, the convenience of the visitor depends, since usually this style effect is used for technical purposes: when it is important to show exactly the place or size of the area on the page.

The thickness of the frame and its purpose

Choosing the thickness of the frame, you can use px, pt, em ..., but you should keep in mind that it is always inside the region of the element. It's hard to imagine that the CSS framework has a design purpose, but technically it is very convenient to use it to highlight page elements.

If the frame is locked in the main class, that is, it is missing, then, pointing it in the pseudo-class: hover, you can show the visitor the page element when the mouse cursor is on it, for example, select the menu item. Sometimes you need to select something by clicking on the picture, or drag something to somewhere. It is very convenient to use a dotted frame, and not to change the background of the element or its content.

Some applications need to select a page area or select items for later processing. In this case, you can create a div with a frame at the moment of the click and until the visitor releases the mouse button, resize it, showing visually the result of the selection.

Outside of the stipulated

CSS lessons are very interesting, it is also important to study the code pages of popular sites. However, own resource must be unique, it must have its own face.

The CSS framework provided by the syntax does not give as much variety as its own initiative. Impromptu is a great beginning, and nothing prevents the developer from forming his own framework. Especially with all the achievements of Internet technologies and the capabilities of existing 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 are to create the framework of these or other elements, it seems reasonable to do this in a comprehensive manner. By highlighting the sides and angles of a certain area in separate tags, you can get stunning effects. And by assigning appropriate handlers, you can create dynamic page elements by changing the position, shape and content.