Marquee в CSS - Руководство для начинающих
Marquee впервые появился в Internet Explorer и был очень популярен в 90-х годах, прежде чем W3C в конечном итоге решил исключить его из стандартного элемента HTML из-за проблем с юзабилити. Веб-дизайнерам было рекомендовано не использовать тег.
Удивительно, но шатер сейчас возвращается, а не в теге формат, как это было, но в модуле CSS. Этот модуль доступен как часть спецификации CSS Webkit, и W3C в настоящее время также работает над аналогичным модулем. Тем не менее, поскольку версия W3C все еще находится на этапе рекомендации кандидата, она пока не применима. Итак, на данный момент мы рассмотрим только один из спецификации Webkit.
Синтаксис
Прежде всего, выделение может быть определено с использованием следующего сокращенного синтаксиса.
-webkit-marquee: [направление] [приращение] [повторение] [стиль] [скорость]
Я полагаю, что каждое из значений, необходимых в приведенном выше синтаксисе, самоочевидно, иначе вы можете найти их достаточно объясненные в этой документации. Итак, если вы хотите глубже понять, как работает этот синтаксис, вы всегда можете сначала обратиться к документации.
Тогда присоединяйтесь к нам, чтобы приступить к созданию реальных примеров и посмотреть, как это работает.
Пример 1: прокрутка текста
Хорошо, в первом примере мы создадим классическое движение выделения, в котором текст перемещается справа налево.
Давайте создадим нашу текстовую разметку, как показано ниже:
Леденец сверху лимонные капли апельсиновый пирог апельсин пирог пирог лакрица кунжут защелки.
Затем определите выделение с помощью следующего синтаксиса.
-webkit-marquee: авто средний бесконечный свиток нормальный; переполнение-x: -webkit-marquee;
Когда направление выделения установлено на авто, по умолчанию он будет перемещаться справа налево; В качестве альтернативы вы можете изменить это значение на оставил. Также обратите внимание, что Переполнение-х свойство должно быть установлено в -WebKit-шатер так что контент всегда будет действовать как единое целое. Если вы пропустите это свойство, текст не будет двигаться дальше.
Посмотреть демо.
Пример 2: отскок назад и вперед
Во втором примере мы попытаемся придать шатру другой стиль. На этот раз мы используем чередовать вместо свиток и измените значение направления на право. Таким образом, шатер будет двигаться слева направо, а затем подпрыгивать вперед и назад.
-webkit-marquee: авто средний бесконечный альтернативный нормальный; переполнение-x: -webkit-marquee;
Посмотреть демо
Пример 3: перемещение текста вверх
И в последнем примере мы изменим направление выделения, чтобы двигаться вверх. Есть два направление ценности для этого; Вы можете изменить значение на вверх или же впереди.
Лично я не понимаю, почему Webkit предоставил два значения, которые по сути делают одно и то же, так как я думаю, что это может привести к путанице для некоторых людей.
-webkit-marquee: до средней бесконечной прокрутки в норме; переполнение-x: -webkit-marquee;
Посмотреть демо
Кроме того, я собрал еще несколько примеров, но они будут ошеломляющими, если все они будут объяснены здесь..
Но вы можете просмотреть все демо и скачать источники по ссылкам ниже.
- демонстрация
- Скачать исходный код
Заключительная мысль и рекомендации
Я был сначала удивлен, что все еще есть интерес к шатру, который, я думал, достиг своего конца. Это также привело меня к вопросу, как такой модуль CSS будет полезен. На самом деле каждый браузер по-прежнему поддерживает наследие тег.
Так что ты думаешь? Шатер все еще актуален в этом возрасте и будет ли он полезен в современном веб-дизайне??
Если вам все еще интересно узнать об этом шатре, вы можете посетить некоторые из следующих ссылок:
- Safari CSS Reference
- Webkit Marquee Generator
- Комплексная документация старого
тег из Sitepoint. - И всегда есть генератор для почти всего, включая этот Marquee Generator.
