Marquee в CSS - Ръководство за начинаещи
Marquee беше представен за първи път в Internet Explorer и беше много популярен през 90-те, преди W3C в крайна сметка да реши да го изключи от стандартния HTML елемент поради проблеми с използването. Уеб дизайнерите бяха насърчени да не използват етикета.
Изненадващо, шатрата сега се завръща, а не в етикет формат, както го е направил, но в CSS модул. Този модул е наличен като част от спецификацията на Webkit CSS и W3C в момента работи и по подобен модул. Въпреки това, тъй като версията на W3C все още е на етапа на препоръка за кандидат, тя все още не е приложима. Така че по това време ще покрием само тази от спецификацията Webkit.
Синтаксисът
На първо място, рамката може да бъде дефинирана с помощта на следния стенографски синтаксис.
-webkit-marquee: [посока] [увеличение] [повторение] [стил] [скорост]
Всяка от ценностите, необходими в синтаксиса по-горе, мисля, че са доста очевидни, или пък можете да ги намерите достатъчно обяснени в тази документация. Така че, ако искате да копаете по-дълбоко в начина, по който ще работи този синтаксис, винаги можете да се обърнете първо към документацията.
След това се присъединете към нас, когато пристъпим към създаването на реални примери и вижте как те действат.
Пример 1: Превъртане на текста
Добре, в първия пример ще създадем класическото движение на шатрата, при което текстът се движи от дясно на ляво.
Нека създадем нашата текстова маркировка по-долу:
Lollipop топинг лимонови капки jujubes applicake кекс кисел сладък сусам щракам.
След това определете рамката със следния синтаксис.
-webkit-marquee: автоматично средно безкрайно превъртане нормално; преливане-x: -wekkit-marquee;
Когато посоката на рамката е настроена на Автоматичен, по подразбиране ще се премести отдясно наляво; алтернативно можете да промените тази стойност на наляво. Също така забележете, че преливане-х трябва да е настроено на -WebKit-палатка така, че съдържанието винаги да действа като такова. Ако пропуснете това свойство, текстът няма да се премести.
Вижте демото.
Пример 2: Прескачане назад и напред
Във втория пример ще се опитаме да дадем различен стил на шатрата. Този път използваме заместник вместо свитък и променете стойността на посоката на прав. По този начин шатрата ще се премести от ляво на дясно, след което ще се върне назад и напред.
-webkit-marquee: автоматично средно безкрайно алтернативно нормално; преливане-x: -wekkit-marquee;
Вижте демото
Пример 3: Преместване на текста нагоре
А за последния пример ще променим посоката на шатрата, за да се движим нагоре. Има два посока стойности за това; можете да промените стойността на нагоре или напред.
Лично аз не разбирам защо Webkit е предоставил две ценности, които по същество правят същото, тъй като мисля, че това може да доведе до объркване за някои хора.
-webkit-marquee: нагоре средно безкрайно свитък нормално; преливане-x: -wekkit-marquee;
Вижте демото
Освен това съм събрал още няколко примера, но те ще бъдат огромни, ако всички те са обяснени тук.
Но можете да видите цялата демонстрация и да изтеглите източниците от връзките по-долу.
- Демонстрация
- Изтеглете Източник
Крайна мисъл и референции
Първо бях изненадан, че все още има интерес към шатрата, която според мен е свършила. Това също ме накара да попитам как CSS модул като този ще бъде полезен. Всъщност всеки браузър все още поддържа наследството на свободен край.
И така, какво мислите? Дали шатрата все още е актуална в тази възраст и би ли била полезна в съвременния уеб дизайн?
Ако все още сте любопитни за този материал, можете да посетите някои от следните препратки:
- Справка за CSS от Safari
- Webkit генератор
- Цялостна документация на старата
от Sitepoint. - И винаги има генератор за почти всичко, включително този Marquee Generator.
