Text frame html

The information that users are looking for should arouse interest. But apart from that, the visual component is also important, in what form the content is presented. When designing a site makers are interested in what ways you can change the size, color and style of the font, how to adjust the headings. Yes, this can indeed make the text more memorable. But there is another way to draw attention to important information – the frame.

Objectives of a frame

This element has no specific functions. But the text, framed in a stylish frame, immediately catches the eye and arouses interest among site visitors. Do not miss such an effective tool to focus the readers’ attention on the important information.

Building HTML frames

You can build a frame for each html element, regardless of whether you use h1, p, img, span or another tag. But the frames of block and embedded elements are different.

If it is embedded and enclosed inside the tags, i.e. the html code which is responsible for its display is in the middle of the attribute. In this case for the html frame, located around the text, should be prescribed internal indentation. The width of block frames, on the contrary, is formed according to the width of the block, which requires entering restrictions of this parameter.

To create a block border by inscribing text into it, the border property is added to this selector. Example: If you apply a p tag to the text, you must set a specific style.

<!-- HTML -->
<p>Text frame using the style attribute with the border property</p>

/* CSS */
p {
 border: 3px solid #9932CC; 
}

Keep in mind that when the document consists of 2-3 or more paragraphs, around each will appear border. In this case, it is better to apply tag div and set a style for it, and the text is inserted into the “construction”.

To place the text in a frame in html can not do without the built-in styles. This method is suitable when the emphasis should be placed on a few individual sentences, paragraphs and images.

Frame CSS

When you want to highlight a certain section of the template frame, which is located on all pages of the site, it is practical to use style.css. This is applied in different ways. First of all, properties border or outline, they are considered the most universal and practical. Also, an interesting effect is achieved through box-shadow, in the first place it is used to create shadows.

Outline

It’s the easiest property to draw frames. Its parameters are similar to border, but the appearance has a peculiarity.

In most cases, you can be limited to using the border. But you can’t do without outline for:

• adding a border when you hover the cursor over an object;
• creating multi-colored and complex frames;
• hiding the frame, which the browser adds automatically when you get focus.

<!-- HTML -->
<div><p>Color text frame with outline and border properties</p></div>

/* CSS */
div {
 width: 300px;	height: 50px;
    outline: 2px solid #000;
    border: 5px solid #00FA9A;
    border-radius: 12px;
}

Also when using outline it’s possible to set the size of the gaps from the edge of the object to the border by applying outline-offset. This allows you to make some interesting designs.

Using the :hover

By adding an html frame and applying a border, the width of the element will visually increase. This change is particularly noticeable when combined with the :hover pseudo class. There are 2 ways to fix this.

The easiest one is to use an outline. But outline is not always suitable. After all, this attribute does not allow you to round corners or put less than four sides of the frame.

The second method is to create an invisible border (with the same color as the background) and change its parameters when you move the cursor. In this case there is no displacement as the frame initially exists. But you should take into consideration that the height of the object is a sum of border at the top, border at the bottom and height. The width of the element is defined in the same way.

<!-- HTML -->
<div><p>The text box that appears on the hover with the :hover property</p></div>

/* CSS */
div {
 width: 250px;	height: 70px;
    border: 7px solid #000;
    border-radius: 12px;
    border: 7px solid transparent;
}
div:hover {
    border: 7px solid red;
   }

Box-shadow

Box-shadow was originally only used to create shadows around objects. But with this property, you can build frames that are unrealistic using other methods. The effect is achieved through the ability to place an unlimited number of shadows. To build each subsequent “frame”, its properties are simply entered, separated by commas.

To create the desired opaque, symmetric frame, the first three parameters, which are responsible for the shadow’s position relative to the object and its blurring, are set to 0. The fourth parameter specifies the desired thickness, and the fifth – the color.

<!-- HTML -->
<div><p>Box-shadow text frame with CSS box-shadow property</p></div>

/* CSS */
div {
 width: 320px;	height: 35px;
 box-shadow: 0 0 0 5px green, 
             0 1px 0 9px #EE82EE,
             5px 0 0 7px #FF4500;
   }

Note: To display correctly by setting thickness you need to add thickness of all shadows preceding it to the desired thickness of the “box”.

Combination of these CSS properties is possible to achieve the most correct display and selection of information for more intuitive user interaction with the content.