CSS Tutorial

This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

offset
The CSS shorthand property offset makes it easier for an element to animate along a certain path.
It has many characteristics that together comprise an offset transform.
With this transform, a specified point inside the element (offset-anchor) is aligned to a certain path position (offset-position) at various points along the route (offset-distance).
It also allows the element to be optionally rotated (offset-rotate) to follow the path's direction.
Constituent Properties
The offset property is a shorthand for the following CSS properties:
﻿offset-anchor﻿
﻿offset-distance﻿
﻿offset-path﻿
﻿offset-position﻿
﻿offset-rotate﻿
Possible Values
The following list of values is accepted by offset shorthand property.
offset-anchor - Defines a point within the element that aligns with an offset position on the path.
offset-path - Defines the path along which the element is animated.
offset-distance - Defines how far along the path the element is placed.
offset-rotate - Optionally rotates the element to align with the direction of the path.
auto - All properties are reset to their default values.
Applies to
Transformable elements
Syntax
offset = [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?    
CSS offset - path value
The following example demonstrates the usage of offset shorthand property with path value.
       
<html>
<head>
<style>
    @keyframes slide {
        0% {
            offset-distance: 0%;
        }
        100% {
            offset-distance: 100%;
        }
    }
    .container {
        width: 400px;
        height: 200px;
        border: 2px solid #3498db;
        border-radius: 10px;
        position: relative;
        overflow: hidden;
        background-color: #f0f0f0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    }
    .text {
        position: absolute;
        font-size: 28px;
        color: #3954cc;
        animation: slide 6s ease-in-out infinite alternate;
        offset: path('M 10 100 Q 50 50 90 100 T 170 100 T 250 100');
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    }
</style>
</head>
<body>
<div class="container">
    <div class="text">This is Sliding Text</div>
</div>
</body>
</html>
CSS offset - path and auto value
The following example demonstrates the usage of offset shorthand property with path and auto value.
<html>
<head>
<style>
    @keyframes orbit {
        0% {
            offset-distance: 0%;
            offset-rotate: 0deg;
        }
        100% {
            offset-distance: 100%;
            offset-rotate: 360deg;
        }
    }
    #planet {
        width: 60px;
        height: 60px;
        background-color: #0000A0;
        border-radius: 50%;
        position: absolute;
        animation: orbit 6s linear infinite;
        offset: path('M 200 200 m -100, 0 a 100,100 0 1,0 200,0 a 100,100 0 1,0 -200,0') auto;
    }
    #sun {
        width: 100px;
        height: 100px;
        background-color: #ffd700;
        border-radius: 50%;
        position: absolute;
        left: 28%;
        top: 33%;
        transform: translate(-50%, -50%);
    }
</style>
</head>
<body>
<div id="sun"></div>
<div id="planet"></div>
</body>
</html>
CSS Offset - Related Properties
Following table lists related properties to offset property:
Property
Description
﻿offset-anchor﻿
Specifies the position inside an element's box that acts as the offset path.
﻿offset-distance﻿
Specifies where element should be positioned.
﻿offset-path﻿
Specifies element's path inside its parent container.
﻿offset-rotate﻿
Specifies the orientation or direction of an element as it moves along the specified offset-path.
﻿offset-position﻿
Provide an element's starting location along a route.
﻿
﻿
﻿
﻿
﻿
﻿
﻿

Property	Description
offset-anchor	Specifies the position inside an element's box that acts as the offset path.
offset-distance	Specifies where element should be positioned.
offset-path	Specifies element's path inside its parent container.
offset-rotate	Specifies the orientation or direction of an element as it moves along the specified offset-path.
offset-position	Provide an element's starting location along a route.

CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

CSS Tutorial

offset

Constituent Properties

Possible Values

Applies to

Syntax

CSS offset - path value

CSS offset - path and auto value

CSS Offset - Related Properties