Тези от вас, които пишат HTML дълго време, може да запомнят елемента. Това е елемент, специфичен за браузър, който създава банер за превъртане на текст през екрана. Този елемент никога не е бил добавян към HTML спецификацията и поддръжката му варираха широко в различните браузъри. Хората често имаха много силни мнения относно използването на този елемент - както положителни, така и отрицателни. Но независимо дали сте го обичали или мразели, той е служил за целта да направи видимо съдържание, което прелива границите на кутията.
Част от причината той никога да не е бил изпълнен изцяло от браузърите, освен силното лично мнение, е това той се счита за визуален ефект и като такъв не трябва да се дефинира от HTML, който определя структура. Вместо това визуалните или презентационни ефекти трябва да се управляват от CSS. И CSS3 добавя модула за маркиране, за да контролира как браузърите добавят ефект на шатра към елементи.
Нови CSS3 свойства
CSS3 добавя пет нови имоти за да контролирате начина, по който съдържанието ви се показва в шатрата: стил на преливане, стил на шатра, марк-игра-брой, посока на шатра и скорост на шатра.
стил на преливане
Свойството в стил overflow (което също обсъдихме в статията CSS Overflow) дефинира предпочитания стил за съдържание, което препълва полето за съдържание. Ако зададете стойността на marquee-line или marquee-block, вашето съдържание ще се плъзга навътре и навън наляво / надясно (marquee-line) или нагоре / надолу (marquee-block).
маркет стил
Това свойство определя как съдържанието ще се премести (и излезе). Вариантите са превъртане, плъзнете и редувайте. Превъртането започва със съдържанието изцяло извън екрана и след това се премества през видимата област, докато всичко отново е напълно извън екрана. Слайдът започва със съдържанието изцяло извън екрана и след това се премества, докато съдържанието не се премести напълно на екрана и не остане повече съдържание, което да се плъзга по екрана. И накрая, алтернативният отскача съдържанието от страна на страна, плъзгайки се напред-назад.
marquee-play-count
Един от недостатъците на използването на елемента MARQUEE е, че шатката никога не спира. Но със свойството стил marquee-play-count можете да настроите шара да завърта и изключва съдържанието за определен брой пъти.
шатра-посока
Можете също така да изберете посоката, в която съдържанието да се превърта на екрана. Стойностите напред и назад се основават на насочеността на текста, когато стилът на преливане е маркирана линия и нагоре или надолу, когато стилът на преливане е маркиран блок.
Marquee-Direction Details
стил на преливане |
Езикова посока | напред | обратен |
|---|---|---|---|
шатра-линия |
ltr | наляво | нали |
| rtl | нали | наляво | |
шатра-блок |
нагоре | надолу |
шатра-скорост
Това свойство определя колко бързо се превърта съдържанието на екрана. Стойностите са бавни, нормални и бързи. Действителната скорост зависи от съдържанието и браузъра, който го показва, но стойностите трябва да са бавни е по-бавно от нормалното, което е по-бавно от бързо.
Поддръжка на браузъра на Marquee Properties
Може да се наложи да използвате префикси на доставчика за да накарат CSS елементите да работят. Те са както следва:
| CSS3 | Префикс на доставчика |
|---|---|
overflow-x: marquee-line; |
overflow-x: -webkit-marquee; |
маркет стил |
-webkit-marquee-style |
marquee-play-count |
-webkit-marquee-повторение |
посока на шатра: напред | назад; |
-webkit-marquee-direction: напред | назад; |
шатра-скорост |
-webkit-marquee-speed |
| няма еквивалент | -webkit-marquee-увеличение |
Последното свойство ви позволява да определите колко големи или малки трябва да бъдат стъпките, докато съдържанието се превърта на екрана в рамката.
За да работи вашата шатра, първо трябва да поставите предварително зададените стойности на доставчика и след това да ги следвате със стойностите на спецификацията CSS3. Например, тук е CSS за шатра, която превърта текста пет пъти отляво надясно в поле 200x50.
{
ширина: 200px; височина: 50px; бяло пространство: сегарап;
преливане: скрито;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: напред;
-webkit-marquee-style: превъртане;
-webkit-marquee-speed: нормално;
-webkit-marquee-прирост: малък;
-повторение на webbit-marquee: 5;
overflow-x: marquee-line;
шатра-посока: напред;
маркет стил: превъртане;
скорост на шатра: нормална;
брой на шатрите-игра: 5;
}