BlogsDope image BlogsDope

CSS marquee-direction

Jan. 19, 2018 HTML CSS 418

Marquee is an effect which is used to scroll some content of an HTML element horizontally or vertically. The content can be anything like some text or an image.

The marquee-direction property is used to specify the direction of a marquee (moving content).

CSS

marquee-direction: value;

While using marquee, sometimes the moving content of an element cannot be fit inside the element. In that case, the overflow property is used to hide the overflowing content. Also, the overflow-style property can be used to specify that the content will be displayed as a marquee by taking one of the two values - marquee-line (creates horizontal marquees) and marquee-block(creates vertical marquees).

This property is not fully supported by W3C.

Values

forward : This scrolls the content in the forward direction i.e. from right to left.

reverse : This scrolls the content in the reverse direction i.e. from left to right.

initial : Sets the default value.

inherit : Inherits the value of the parent element.

The marquee direction can be affected by the overflow-style and the direction properties which are given to the element as shown in the following table.

overflow-style direction forward direction reverse direction
marquee-line ltr right to left left to right
marquee-line rtl left ot right right to left
marquee-block   bottom to top top to bottom

In order to get support from Webkit-based browsers, you need to add the prefix -webkit- before the property. The prefixed values may be somewhat different from the ones listed above. The -webkit-marquee-directionproperty can take one of the follwoing values.

auto : This moves the content in the default direction. This is the defualt value.

forwards : This scrolls the content from left to right. This is the reverse of marquee-direction: reverse.

backwards : This scrolls the content from right to left. This is the reverse of marquee-direction: forward.

right : This scrolls the content from left to right.

left : This scrolls the content from right to left.

up : This scrolls the content from bottom to top.

down : This scrolls the content from top to bottom.

initial : Sets the default value.

inherit : Inherits the value of the parent element.

Example

In the following example, the second paragraph is given marquee-direction: backward which will make the text flow from left to right.

HTML

<p>This text moves in forward direction.</p>
<p id="marquee1">This text moves in backward direction.</p>

CSS

/* for all browsers */
#marquee1 {
	overflow-x: marquee-line;
	marquee-style: scroll;
	marquee-direction: backward;
}

In the above code, writing overflow-x: marquee-line is equivalent to writing overflow-style: marquee.

Browser Support

The marquee module is excluded by the W3C from the CSS3 specification. Since this property is not fully supported by W3C, therefore it is recommended not to use this property.

Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).