CSS Properties Explained: offset, opacity, order, outline, and overflow

Let us understand each CSS property- offset, opacity, order, outline, and overflow with explanations and examples.

1. offset (CSS Motion Path & Animations)

The Offset property is used to animate elements along a motion path.

Key Properties

offset-path → Defines the motion path.
offset-distance → Specifies how far the element moves along the path.
offset-anchor → Defines the element's anchor point.

Example: Moving an element on a path

@keyframes move {
   from { offset-distance: 0%; }
   to { offset-distance: 100%; }
}
.moving-box {
   width: 50px;
   height: 50px;
   background: red;
   position: absolute;
   offset-path: path("M10,80 C40,10 65,10 95,80 S150,150 180,80");
   animation: move 3s linear infinite;
}

Note:

offset-path defines a curved motion path.
offset-distance moves the element along the path.

2. opacity (Transparency Control)

The opacity property in CSS controls the transparency of an element.

Syntax

opacity: value; /* Ranges from 0 (fully transparent) to 1 (fully visible) */

Example: Fading Effect

.transparent-box {
   width: 150px;
   height: 100px;
   background: blue;
   opacity: 0.5; /* 50% transparent */
}

Note:

opacity: 1; → It will be fully visible.
opacity: 0; → It will be fully transparent.
This affects child elements as well.

3. order (CSS Flexbox Ordering)

The CSS order property changes the order of items in a flexbox container.

Example: changing the Order of Items

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Order Items Example</title>
   <style>
       .container {
     display: flex;
 }
 .item1 { order: 2; } /* Will appear second */
 .item2 { order: 1; } /* Will appear first */
 .item3 { order: 3; } /* Will appear last */
   </style>
</head>
<body>
   <div class="container">
    <p class="item1">Item 1</p>
    <p class="item2">Item 2</p>
    <p class="item3">Item 3</p>
</div>
</body>
</html>

Output

Item 2Item 1Item3

Notes:

The default value is order: 0;
Higher values appear later in the order.

4. outline (Border-like Effect)

The outline property adds a line outside the border of an element.

Unlike theborder, it does not take up space.

Example: Adding an Outline

.outlined-box {
   width: 200px;
   height: 100px;
   background: lightgray;
   outline: 5px solid red;
   outline-offset: 5px;
}

Note:

outline-offset moves the outline away from the element.

5. overflow (Handling Overflowing Content)

The overflow property controls how an element behaves when content exceeds its dimensions.

Values

Values	Behavior
`visible`	Content overflows the box.
`hidden`	Content is clipped (not visible).
`scroll`	Scrollbars appear.
`auto`	Scrollbars appear only if needed.

Example: Scrollable Content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrollable Content Example</title>
    <style>
        .overflow-box {
		    width: 150px;
		    height: 100px;
		    border: 1px solid black;
		    overflow: auto;
		}

    </style>
</head>
<body>
	<div class="overflow-box">
	    This is a long text that will overflow the box and a scrollbar will appear if necessary. This is a long text that will overflow the box and a scrollbar will appear if necessary. 
	</div>

</body>
</html>

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CSS Properties Example</title>
   <style>
       /* Offset Animation */
       @keyframes move {
           from { offset-distance: 0%; }
           to { offset-distance: 100%; }
       }
       .moving-box {
           width: 50px;
           height: 50px;
           background: red;
           position: absolute;
           offset-path: path("M10,80 C40,10 65,10 95,80 S150,150 180,80");
           animation: move 3s linear infinite;
       }
       /* Opacity */
       .transparent-box {
           width: 150px;
           height: 100px;
           background: blue;
           opacity: 0.5;
           text-align: center;
           color: white;
           line-height: 100px;
       }
       /* Flex Order */
       .container {
           display: flex;
           gap: 10px;
       }
       .item1 { order: 2; background: lightblue; padding: 10px; }
       .item2 { order: 1; background: lightgreen; padding: 10px; }
       .item3 { order: 3; background: lightcoral; padding: 10px; }
       /* Outline */
       .outlined-box {
           width: 200px;
           height: 100px;
           background: lightgray;
           outline: 5px solid red;
           outline-offset: 5px;
           text-align: center;
           line-height: 100px;
       }
       /* Overflow */
       .overflow-box {
           width: 150px;
           height: 100px;
           border: 1px solid black;
           overflow: auto;
           padding: 10px;
       }
   </style>
</head>
<body>
   <h2>CSS Offset Animation</h2>
   <div class="moving-box"></div>
   <h2>CSS Opacity</h2>
   <div class="transparent-box">50% Transparent</div>
   <h2>CSS Order (Flexbox)</h2>
   <div class="container">
       <div class="item1">Item 1</div>
       <div class="item2">Item 2</div>
       <div class="item3">Item 3</div>
   </div>
   <h2>CSS Outline</h2>
   <div class="outlined-box">Outlined Box</div>
   <h2>CSS Overflow</h2>
   <div class="overflow-box">
       This is a long text that will overflow the box and a scrollbar will appear if necessary. This is a long text that will overflow the box and a scrollbar will appear if necessary.
   </div>
</body>
</html>

Output

CSS Properties Explained: offset, opacity, order, outline, and overflow

Also, Read: CSS Properties Explained: backdrop-filter, box-reflect, box-shadow, box-sizing, and caption-side

articles

CSS Properties Explained: offset, opacity, order, outline, and overflow

Ashutosh Kumar Verma

Leave Comment

Comments

Liked By