Page 96 - Сила CSS3 Освой новейший стандарт

96 • Глава 2. Облачка с текстом

Таблица 2.7. Поддержка 2D-трансформаций в браузерах
IE Firefox Opera Safari Chrome

Нет Да, с префиксом Да, с префиксом Да, с префиксом Да,
-moz-, начиная -o-, начиная -webkit- с префиксом
с версии 3.5 с версии 10.5 -webkit-

Таблица 2.8. Поддержка 3D-трансформаций в браузерах

IE Firefox Opera Safari Chrome
Нет Нет Нет Да, с префиксом -webkit-, начиная Нет
с версии 5

Как и свойство text-shadow, трансформации иногда позволяют повысить удобство
в использовании и доступность содержимого путем замены изображения текста
реальным текстом. Например, на странице может быть специальное поле или объ-
явление с текстом, который должен выводиться под небольшим углом. До появления
трансформаций в CSS3 разработчикам приходилось создавать изображения таких
наклонных полей — с текстом внутри и всеми остальными украшениями, — а затем
выводить это изображение на странице. Текст на изображениях труднее считывать
программными средствами, его не распознают поисковые машины, к тому же его
сложнее создавать и редактировать.
Очевидно, необходимости поворачивать и искажать весь текст на странице нет, это
было бы неразумно. И, разумеется, это только ухудшило бы его восприятие. Однако
в небольших дозах — в ситуациях, когда вместо текста пришлось бы использовать
изображения или Flash-ролики, — трансформации могут упростить доступ к тексту,
поскольку вы добиваетесь нужного эффекта с помощью реальных символов, а не
их изображений.

поворот аватаров
Давайте взглянем на синтаксис функции трансформации, которая позволит нам
немного повернуть аватары. Добавьте в таблицу стилей новое правило:

.comment-meta img {
Удобный генератор трансфор- -moz-transform: rotate(-5deg);
маций CSS, расположенный по -o-transform: rotate(-5deg);
адресу http://westciv.com/tools/ -webkit-transform: rotate(-5deg);
transforms, умеет создавать код transform: rotate(-5deg);
для самых разных трансформа- }
ций. Это может здорово помочь
в ежедневной работе.

www.trk.kg