Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
|
386 Часть 2. Применение CSS transform: rotate(-720deg) scale(.5); left: 0; } to { transform: rotate(0) scale(1); } } Код имеет довольно большой объем, но, к сожалению, пока для использования CSS-анимации без этого не обойтись. Когда-нибудь в прекрасном будущем все браузеры станут применять единое правило @keyframes без всяких префиксов и такое же не имеющее префиксов свойство transform . Но пока придется наби- рать весь этот код. К счастью, добавления к правилу @keyframes являются самой тяжелой частью работы. Добавление анимации к стилю .logo потребует чуть меньшего объема работы. 10. Отредактируйте стиль .logo , добавив к нему три дополнительных строки: .logo { -webkit-animation: logo 3s; -moz-animation: logo 3s; -o-animation: logo 3s; animation: logo 3s; } 11. Сохраните страницу и проверьте ее работу в Firefox, Chrome, Safari и Opera. Логотип должен прокатываться по странице и увеличиваться во всех браузерах (рис. 10.11). Разумеется, в Internet Explorer 9 и более ранних версиях никакой анимации не будет. Но логотип все же будет помещен в нужное место на стра- нице, не нарушая ее внешнего вида. Окончательную версию урока можно найти в папке 10_finished Чтобы продолжить усовершенствование страницы, добавьте анимацию, застав- ляющую одну из кнопок, над которой установлен указатель мыши, светиться. (Подсказка: создайте анимацию, осуществляющую циклический переход через различные тени блока. Для добавления тени, размещающейся внутри блока, воспользуйтесь значением inset . Затем добавьте анимацию к стилю nav a:hover , чтобы она проигрывалась только при проходе указателя мыши над кнопкой.) Рис. 10.11. Книги способны на многое, но, к сожалению, они не могут показать ту впечатляющую анимацию, которая только что была создана. Так должна выглядеть страница в ходе воспроизведения анимации и при проходе указателя мыши над кнопкой Home (Домой) 11 Форматирование таблиц и форм Возможности CSS не ограничиваются форматированием текста, изображений и ссылок. Вы можете создавать информационные таблицы с расписаниями, резуль- татами спортивных мероприятий и списки воспроизведения с музыкой, которые становятся намного более читабельными, если к ним добавить границы, фоновые рисунки и другие визуальные улучшения. Ко всему прочему вы можете использо- вать CSS для разработки соответствующих элементов форм, которые помогут ва- шим посетителям сделать заказ, подписаться на новости или воспользоваться ва- шими самыми новыми интернет-приложениями. В этой главе вы узнаете, как вывести на экран таблицы и формы с помощью HTML, а также как их скомпоно- вать и применить к ним соответствующие стили посредством CSS. В уроке в конце главы вы создадите таблицу и форму, применяя приемы, которым попутно обучи- тесь. Правильное использование таблиц За короткую историю существования Интернета HTML-таблицы получили очень широкое распространение. Изначально созданные для отображения данных в та- бличном виде, они стали очень популярным инструментом для создания разметки. Столкнувшись с некоторыми ограничениями в HTML, дизайнеры творчески по- дошли к решению этой проблемы и начали применять столбцы и строки таблиц для размещения в них таких элементов страниц, как заголовки и боковые поля. Как вы увидите в части 3 книги, CSS намного лучше справляется с компоновкой веб- страниц. Вы можете сконцентрировать все ваше внимание на использовании та- блиц по их прямому назначению — для отображения данных (рис. 11.1). HTML и XHTML имеют в своем распоряжении внушительное количество те- гов, предназначенных для создания страниц. С помощью этого фрагмента кода на HTML создается очень простая таблица, которую вы можете видеть на рис. 11.2.
|