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