Have you ever seen any animation while playing online games or using any website for information or knowledge? These animations may make the tool, game, or website more aesthetic and stylish. One of those animations is the movement of some element on the webpage screen. The CSS offset attribute let us animate some element of the HTML script. This attribute can make changes to many things for the respective element of the HTML script: its position, path, movement, and giving space between outline and border. In this guide, we will be discussing the use of offset property along with its different attributes.

Example 01: Offset-Outline

To use the outline-offset property to give transparent space among with element border and its outline, we must have to create a “div” section on the Webpage. We started this code with the HTML tag and ended it with the html closing tag. Within the body tag, we have been using the “div” tag to create a section on the HTML webpage. This “div” tag only contains a simple three-word heading or sentence and has been closed with the line break added by the break line tag “<br>”.

Within the “head” tag of this HTML code, we have been titling this Webpage to “Offset- Outline” and using the “style” tag to style the “div” section of our HTML page. We have added 10 pixels margins for the “div” section along with 5-pixel solid crimson border. The background color for this “div” section would be “aqua” and the outline would be of 4-pixel dashed violet color. We have also been using the “outline-offset” property to give a 15-pixel gap between the “div” section’s border and its outline. Let’s save this code and run it with the “Run” menu of Visual studio code.

After the successful execution of this code in the Chrome browser, we have the below output of the HTML page. Here is a clear gap between the crimson 5-pixel border of the div tag and its 4-pixel dashed violet-colored outline. You can see that the space has no color.

Example 02: Offset-Position

Here is on using the offset position property of CSS to specify the start position of any element of the HTML webpage. Let’s start with the use of html opening and closing tags. Within this tag, we have been making use of body and head tags. The body tag contains simple 2 headings of size 2 with different titles first. After that, two “div” tags have been used. The outer “div” tag has been specified with the ID “a” while its inner “div” tag has been specified with the ID “b” for differentiation in styling.

The “div” and body tags are closed here. Within the “head” tag, we have been using the title tag to title this HTML webpage and the style tag to add some styling to the body of our webpage. We have been using the “#a” to style the outer “div” tag using its ID “a”. The offset position for this “div” section has been specified with the value “relative”. Its width and height would be specified as 200px with the 5px solid crimson color border around this “div”. The position of the inner “div” tag has been set to absolute which is related to the adjacent element. The width and height for the inner “div” section are set to 75pixel with the crimson border of 5px solid.

The top and left space or padding has been defined relative to the outer section for this “div”: top: 180px, and left: 7px. Our code is now ready to be executed on the browser.

The use of the “relative” value for the offset-position property places the outer “div” section relative to the other elements of our HTML page. While the use of “absolute” position value along with setting the top and left padding has been placing the inner “div” to the middle of the outer “div” section.

Example 03: Offset-path and Offset-anchor

Let’s try using the offset-anchor and offset path property to create animation within the HTML webpage. The same title has been given to this webpage. Within the body tag, we have been using three-section tags to create different sections on the webpage followed by the “div” tags to differentiate them. All three “div” tags contain a single text within and have been specified with three different classes: a, b, and c. The main part of this HTML code is its style tag which contains many CSS properties to animate three tags. All three “div” tags contain the offset-path property to move along the path defined for it so it is not so linear motion. The width and height of all three div elements would be 100 and 30 pixels respectively. The animation has been set to move div elements along with the speed of 3000 milliseconds without stopping. Thus, the infinite attribute is used. Here comes the section element for styling. Its background image would be a linear gradient and would be 49 percent transparent from the top, 50 percent black from the left, right, and middle, and 62 percent transparent from the bottom. Also, each section would be containing 2-pixel solid border and 10 pixels margins from the bottom.

The offset-anchor property has been used to specify a point in the “div” element to travel along the path that has been set by the use of the “offset-path” property in the main “div” styling. This means that the point of a “div” element would be moving on the particular non-linear path on our Webpage screen. The different background colors for these “div” elements, text color, and text alignment for these elements have been set. Let’s save and run this code to see the changes.

All three div elements will move along the non-linear non-straight path in three different sections as shown below. These three elements are labeled as one, two, and three; moving from left to right of the screen.

We have updated the code and used the different values for offset-path property within the styling of this HTML code. This path would make our div elements move in a zig-zag movement. Also, we have updated the height and width of these div sections to 40 pixels. The movement distance is also added while the rest is unchanged.

The output of this updated code is showing us three small div elements with zig-zag movement along each of their sections.

Conclusion

This article is about the use of different offset properties to style and animate the different elements of an HTML webpage. We have provided example using the offset-outline property to add space between the border and outline of a specific element. Another example is used to demonstrate the use of the offset-position property to position the specific element relative to other elements in the body. We have tried also to animate and move the HTML elements on the browser screen on some specific path using the offset-anchor, and offset-path properties.