Оние од вас кои долго време пишувале HTML може да се сетат на елементот. Ова беше елемент, специфичен за прелистувачот, кој создаде знаме на лизгање на текст преку екранот. Овој елемент никогаш не бил додаден во спецификацијата на HTML и поддршката за тоа варира многу во прелистувачите. Луѓето честопати имале многу силни мислења за употребата на овој елемент - и позитивно и негативно. Но, дали го сакавте или го мразевте тоа, тоа им служело на целта да се создаде содржина што ги преплави границите на кутијата видливи.
Дел од причината што никогаш не била целосно имплементирана од прелистувачи, покрај силното лично мислење, е тоа што се смета за визуелен ефект и како таква, тоа не треба да биде дефинирано од HTML, кој ја дефинира структурата. Наместо тоа, визуелните или презентациските ефекти треба да бидат управувани од CSS. И CSS3 го додава маркираниот модул за контрола на тоа како прелистувачите ги додаваат елементите на marquee на елементите.
Нови CSS3 имот
CSS3 додава пет нови својства за да помогне да се контролира начинот на кој вашата содржина се прикажува во маркираната: стил на претекување, стил на марки, стил на марки-игра, марки-насока и марки-брзина.
стил на претекување
Својството на претекување во стилот (кој исто така го дискутирав во написот CSS Overflow) го дефинира преферираниот стил за содржини што го прелеваат полето за содржина. Ако ја поставите вредноста на marquee-line или блок-блок, вашата содржина ќе се лизне во и надвор од лево / десно (marquee-line) или нагоре / надолу (марки-блок).
стил на шарка
Ова својство дефинира како содржината ќе се премести во поглед (и надвор).
Опциите се движат, слајд и наизменично. Скролувајте почнува со содржината која целосно е исклучена, а потоа се движи низ видливата област сè додека целосно не е целосно исклучено. Слајд започнува со содржината целосно исклучен екран, а потоа се движи нанапред додека содржината целосно се премести на екранот и нема повеќе содржина што е оставено да се лизне на екранот.
И на крај, алтернативното отфрла содржината од страна на страна, лизгање напред и назад.
марки-игра-брои
Една од недостатоците на употребата на елементот MARQUEE е дека маркира никогаш не запира. Но, со својството на стил marquee-play-count можете да поставите маркираната страна да ја ротираат содржината и затворање за одреден број пати.
марки-насока
Можете исто така да ја одберете правецот што содржината треба да се движи на екранот. Вредностите напред и назад се засноваат на насочувањето на текстот кога стилот на прелевање е марки-линија и нагоре или надолу, кога стилот на прелевање е блок-блок.
Детали за насоки на насока
| стил на претекување | Јазична насока | напред | обратна |
|---|---|---|---|
| марки-линија | ltr | лево | право |
| rtl | право | лево | |
| блок-блок | up | надолу |
марки-брзина
Овој имот одредува колку брзо содржината се прелистува на екранот. Вредностите се бавни, нормални и брзи. Реалната брзина зависи од содржината и прегледувачот кој го прикажува, но вредностите мора да бидат бавни е побавно од нормалното што е побавно од брзо.
Поддршка на прелистувачот на својствата на марки
Можеби ќе треба да користите префикси на продавачот за да ги активирате елементите на CSS marquee. Тие се како што следува:
| CSS3 | Префикс на продавач |
|---|---|
| претекување-x: марки-линија; | overflow-x: -webkit-marquee; |
| стил на шарка | -webkit-marquee-стил |
| марки-игра-брои | -webkit-marquee-повторување |
| марки-насока: напред | обратна; | -webkit-marquee-direction: напред | наназад; |
| марки-брзина | -webkit-marquee-speed |
| без еквивалент | -webkit-marquee-increment |
Последното својство ви овозможува да дефинирате колку големи или мали треба да бидат чекорите додека содржината се прелистува на екранот во маркираната линија.
За да ги работите вашите марки, најпрво треба да поставите префиксни вредности на продавачот, а потоа да ги следите со вредностите за спецификација CSS3. На пример, тука е CSS за маркиза што го преместува текстот петпати од лево кон десно во кутијата од 200x50.
{
Ширина: 200px; висина: 50px; бело-простор: сега;
претекување: скриен;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: напред;
-webkit-marquee-стил: дојдете;
-webkit-marquee-speed: нормално;
-webkit-marquee-increment: small;
-webkit-marquee-повторување: 5;
претекување-x: марки-линија;
марки-насока: напред;
марки-стил: дојдете;
марки-брзина: нормално;
марки-игра-брои: 5;
}