Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
|
353 ной оси, а scaleY — по вертикальной. Например, чтобы элемент стал вдвое выше без изменения его ширины, можно воспользоваться следующим объявлением: transform: scaleY(2); ПРИМЕЧАНИЕ Для экономии пространства в этом примере опять показана только лишь версия свойства transform, в которой префикс не используется. Чтобы объявление работало во всех браузерах, нужно добавить соответствующие префиксы: -webkit, -moz- и т. д. Однако чтобы элемент стал в три с половиной раза шире, а не выше или ниже, следует воспользоваться объявлением: transform: scaleX(3.5); Есть еще один визуальный трюк, предлагаемый функцией масштабирования: возможность перевернуть элемент вокруг его вертикальной или горизонтальной центральной оси. Никто не знает достоверно, какой из разделов математики был использован консорциумом W3C, чтобы придумать эту систему, но если для мас- штабирования применить отрицательное значение, то элемент будет перевернут. Например, чтобы перевернуть элемент вокруг его обеих центральных осей, нужно применить следующее объявление: transform: scale(-1); Получится изображение, показанное на рис. 10.4, слева. Можно также перевер- нуть элемент вокруг одной центральной оси. На правом изображении на рис. 10.4 изображение перевернуто только вокруг его горизонтальной центральной оси. Среднее изображение получено за счет переворота изображения вокруг его вер- тикальной оси: transform: scale(-1,1); Рис. 10.4. Чтобы запутать или обескуражить посетителей вашего сайта, в CSS есть масса разных способов. Левый квадрат перевернут вокруг горизонтальной центральной оси, средний — вокруг вертикальной, а правый — вокруг обеих осей Похоже на эффект зеркального бокового отображения элемента или на про- смотр элемента на просвет сзади после его переворота. Весьма забавно! Конечно, если нужно создать сайт как дань памяти Леонардо да Винчи ( www.mos.org/sln/ Leonardo/LeonardoRighttoLeft.html ), то вполне может подойти зеркальное отображе- ние всего имеющегося на странице текста! 354 Часть 2. Применение CSS Перемещение Функция translate свойства transform просто перемещает элемент из его текущей позиции на некоторое расстояние вправо или влево и вверх или вниз. Пользы от этой функции как таковой немного. Как выяснится далее, когда веб-браузер пере- мещает элемент, он не перестраивает содержимое страницы, а раскладывает его так, как будто элемент никуда не перемещался. Соответственно, когда с использо- ванием функции translate перемещается div или другой тег, браузер оставляет пустое пространство там, где этот тег появился бы при обычных обстоятельствах, а затем рисует элемент в его новой позиции (рис. 10.5). Зачастую в результате перемещения элемента таким образом остается пустое место: незаполненное про- странство между двумя заголовками является тем местом, где должен был появить- ся обрамленный тег при обычных обстоятельствах. Если нужно лишь разместить элемент на странице, можно просто воспользовать- ся абсолютным или относительным позиционированием, рассматриваемым в гл. 15. Но перемещение пригодится, когда нужно изобразить небольшое движение в ответ на проход указателя мыши или на щелчок кнопкой. Например, во многих конструкциях пользовательского интерфейса при щелчке на кнопке эта кнопка смещается немного вниз и влево, имитируя внешний вид реальной трехмерной кнопки, нажатой на клавиатуре. Применительно к ссылке этот эффект можно имитировать с помощью функции translate и состояния :active : .button:active { -webkit-translate(1px,2px); -moz-translate(1px,2px); -o-translate(1px,2px); -ms-translate(1px,2px); translate(1px,2px); } Рис. 10.5. Функция translate перемещает элемент на указанное количество пикселов, em или процентов от его обычного места на странице Функции translate передаются два значения: первое определяет величину го- ризонтального, а второе — вертикального перемещения. В данном примере щелчок на элементе с классом .button вызывает перемещение этого элемента на 1 пиксел вправо и на 2 пиксела вниз. Чтобы элемент переместился влево, нужно для перво- го значения использовать отрицательное число, применение отрицательного числа в качестве второго значения приведет к перемещению элемента вверх. Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS 355 Но можно применять не только пиксельные значения. Будут работать любые значения, указывающие длину в CSS, — px , em , % и т. д. В CSS3 предоставляются также две дополнительные функции для перемеще- ния элемента только влево или вправо — translateX и только вверх или вниз — translateY . Например, для перемещения элемента вверх на .5em используется функция translateY : transform: translateY(-.5em); Очень интересный эффект от функции translate можно получить при ее сов- местном использовании с CSS-переходами. Это сочетание позволяет анимировать перемещение элемента, показав его путешествующим по экрану. Вскоре вы увиди- те, как это делается. Наклон Наклон элемента можно осуществить по его горизонтальной и вертикальной осям: это придает элементу трехмерное представление (рис. 10.6). Например, для накло- на всех вертикальных линий влево на 45° (как в первом изображении на рис. 10.6), нужно написать следующий код: transform: skew(45deg, 0); Чтобы придать элементу такой же наклон, но по оси Y (среднее изображение на рис. 10.6), нужно написать следующий код: transform: skew(0,45deg); Рис. 10.6. Функция skew является одним из способов имитации трехмерного отображения Можно наклонить элемент по двум осям одновременно. Например, следующий код приводит к появлению третьего изображения, показанного на рис. 10.6: transform: skew(25deg,10deg); Первое значение задает угол от 0deg до 360deg , действующий в направлении про- тив часовой стрелки от верхней части элемента. Например, в первом изображении 356 Часть 2. Применение CSS на рис. 10.6 45° представлены линией, нарисованной из центра элемента и повер- нутой на 45° против часовой стрелки (вниз и влево). ПРИМЕЧАНИЕ Не забудьте в окончательном виде кода CSS добавить префиксные версии свойства transform для различных браузеров: -webkit-transform, -moz-transform и т. д. Вторым значением является угол от 0deg до 360deg . Но этот угол действует в направ- лении по часовой стрелке с правой стороны элемента. Среднее изображение на рис. 10.6 является примером 45-градусного наклона по всем горизонтальным линиям. ПРИМЕЧАНИЕ Чтобы получить визуальное представление о CSS-преобразованиях, зайдите на сайт с интерактив- ным средством визуализации по адресу http://westciv.com/tools/transforms/index.html. Как и в случае с translate и scale , в CSS3 предлагаются отдельные функции для осей X и Y: skewX и skewY ПРИМЕЧАНИЕ В CSS3 есть еще один метод перемещения под названием matrix. Он представляет собой числовой массив. Этот метод не всегда понятен интуитивно. Наиболее понятное объяснение можно найти на веб-сайте http://dev.opera.com/articles/view/understanding-the-css-transforms-matrix/. Множественные преобразования Однако вы не ограничены только одним преобразованием. Изображение можно од- новременно масштабировать и наклонять, вращать и перемещать или использовать любые из четырех различных преобразований. Нужно просто добавить через запя- тую к свойству transform дополнительные функции. Например, повернуть элемент на 45° и увеличить его размер вдвое можно с помощью следующего объявления: transform: rotate(45deg) scale(2); А вот пример всех четырех преобразований, применяемых одновременно: transform: skew(45deg,0deg) scale(.5) translate(400px,500px) rotate(90deg); Браузер будет применять все эффекты в порядке следования функций. Например, во втором примере элемент сначала будет наклонен, затем масштабирован, после чего будет перемещен и, наконец, подвергнется вращению. Порядок не играет роли, если только не используется перемещение. Поскольку при перемещении изменяется мес- тоположение элемента, то, если, например, поместить перемещение перед вращением, браузер сначала переместит элемент, а затем применит к нему вращение. Так как сначала элемент перемещается, точка, вокруг которой он будет вращаться, изменится. С другой стороны, если сначала будет применено вращение, то затем элемент, уже подвергшийся вращению, будет перемещен на определенное расстояние относитель- но его центра (который теперь будет находиться в новом месте). Исходная точка Обычно, когда к элементу применяется преобразование, в качестве точки начала преобразования браузер использует центр элемента. Например, при вращении элемента браузер поворачивает его вокруг центральной точки (рис. 10.7, слева). Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS 357 Но в CSS3 разрешается изменять точку преобразования, используя свойство transform-origin . Это свойство работает точно так же, как и ранее рассмотренное свойство background-position . Для него можно указывать ключевые слова, абсолют- ные значения и относительные значения в em и процентах. Например, чтобы повернуть div -контейнер вокруг его левой верхней точки (см. рис. 10.7, посередине), можно воспользоваться ключевыми словами left и top : transform-origin: left top; Можно также использовать пиксельные значения: transform-origin: 0 0; или проценты: transform-origin: 0% 0%; Точно так же для вращения элемента вокруг его нижнего правого угла (см. рис. 10.7, справа), используются ключевые слова right и bottom : transform-origin: right bottom; Что эквивалентно следующему объявлению: transform-origin: 100% 100%; При использовании пикселов, em или процентных значений, первое число означа- ет горизонтальную, а второе — вертикальную позицию. Рис. 10.7. Установка значения для свойства transform-origin изменяет точку элемента, в которой будет применено преобразование. Пунктиром обозначен элемент, каким бы он был без вращения (его обычная позиция на странице) ПРИМЕЧАНИЕ Свойство transform-origin не влияет на элементы, которые подвергаются только перемещению с по- мощью функции translate. 358 Часть 2. Применение CSS ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ Трехмерные преобразования В CSS3 имеется также более сложный тип преобразо вания. Трехмерные преобразования (3D transforms) позволяют имитировать трехмерное пространство на плоском экране монитора, планшетного компьютера или телефона. Краткое введение в трехмерные преобразования дано на сайтах http://coding.smashingmagazine.com/2012/01/06/ adventuresinthethirddimensioncss3dtransforms/ и http://blogs.msdn.com/b/ie/archive/2012/02/02/css33d transformsinie10.aspx. Посмотреть удачные примеры трехмерных преобразований в действии можно на сле дующих сайтах. • Один из первых примеров демонстрации возможно стей трехмерных преобразований — страница Apple's Morphing Power Cubes ( www.webkit.org/blog- files/3d-transforms/morphing-cubes.html ) — по казывает вращающийся куб, который может превра щаться во вращающийся набор плиток. • Еще одна впечатляющая демонстрация от Apple — галерея картинок Horizontal 3D ( https://developer. apple.com/safaridemos/showcase/gallery/ ) — позволяет бегло просматривать похожую на карусель серию фотографий. • Snow Stack: используйте клавиши управления курсором (с левой и правой стрелками), чтобы пе ремещаться по бесконечной галерее фотографий с возможностью выбора: http://www.satine.org/ research/webkit/snowleopard/snowstack.html • Вебсайт 2011 BeerCamp (http://2011.beercamp.com ) предоставляет новаторский способ навигации путем перемещения страниц в пространстве вперед и назад. Переходы Преобразованиями, конечно, можно позабавить посетителей (особенно функцией rotate ), но в сочетании с переходами CSS3 они по-настоящему оживят вашу страни- цу. Переход является простой анимацией от одного набора CSS-свойств к другому через определенный промежуток времени. Например, можно задать вращение бан- нера на 360° в течение двух секунд. Чтобы переход заработал, нужно следу ющее. Два стиля. Один стиль должен представлять начальный вид элемента, например красную кнопку перехода, а второй — его конечный вид: синюю кнопку перехода. О процессе анимации изменения между двумя состояниями позаботится веб- браузер (например, об изменении цвета кнопки с красного на синий). Свойство transition. В CSS3 добавляется свойство transition — секретный ин- гредиент, позволяющий осуществить анимацию. Обычно свойство transition применяется к исходному стилю, который определяет внешний вид элемента до начала анимации. Инициатор. Инициатор представляет собой действие, вызывающее изменение от одного стиля к другому. В CSS для запуска анимации можно использовать несколько псевдоклассов. Наиболее часто применяется псевдокласс :hover С его помощью можно анимировать изменение, происходящее от обычного появления элемента и до его внешнего вида, который появляется, когда посе- титель проводит над ним указатель мыши. Как это делается, вы увидите совсем скоро. Кроме того, у вас в активе такие псевдоклассы, как :active (связанный Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS 359 со щелчком кнопкой мыши на элементе), :target (связанный с элементом, став- шим целью перехода по ссылке) и :focus (связанный с переходом на ссылку с помощью клавиши табуляции, или со щелчком по полю формы, или с пере- ходом на это поле с помощью клавиши табуляции). Кроме того, для динами- ческой смены стиля любого тега можно воспользоваться JavaScript (см. врезку «Информация для опытных пользователей. Использование JavaScript для за- пуска переходов» в подразделе «Распределение скорости выполнения перехо- да по времени» данного раздела). Когда инициатор больше не применяется, то есть когда, например, посетитель убирает указатель мыши с кнопки навигации, браузер возвращает тег обратно к его прежнему стилю и анимирует весь этот процесс. Иными словами, вам нужно лишь установить переход для элемента один раз, а анимацию от одного стиля к другому и обратно к исходному стилю браузер возьмет на себя. Веб-браузер не может анимировать каждое отдельно взятое свойство CSS, но у вас в распоряжении остается все же весьма длинный список свойств, на которых можно остановить свой выбор. Кроме таких преобразований, как rotate , scale , translate и skew , о которых только что шла речь, можно также анимировать такие свойства, как color , background-color , border-color , border-width , font-size , height , width , letter-spacing , line-height , margin , opacity , padding , word-spacing , свойства по- зиционирования top , left , right и bottom , которые будут рассмотрены в гл. 15, а также многие другие свойства. Их полный список можно найти по адресу www.w3.org/TR/ css3-transitions/#animatable-properties ПРИМЕЧАНИЕ Появившиеся в CSS3 переходы работают в большинстве браузеров. Но когда речь заходит об Internet Explorer, с сожалением приходится заметить, что переходы этот браузер понимает, только начиная с версии 10. Поэтому лучше использовать переходы только как средство придания выразительности. При этом в большинстве случаев все будет выглядеть вполне приемлемо: Internet Explorer 9 и более ранние версии смогут обеспечить переключение между двумя стилями (например, показать стиль для hove) без анимации данного изменения. Добавление перехода В основе CSS-переходов лежат четыре свойства, который управляют тем, какие свойства анимировать, сколько времени займет анимация, какой тип анимации будет использован и какой будет необязательная задержка перед началом анима- ции. Рассмотрим простой пример. Предположим, что нужно анимировать измене- ние фонового цвета кнопки навигации с оранжевого на синий при проходе над кнопкой указателя мыши посетителя. Начать нужно с двух стилей, необходимых для переключения между этими двумя цветами. Можно, например, применить к ссылке класс .navButton , а затем создать следующие два стиля: .navButton { background-color: orange; } .navButton:hover { background-color: blue; } 360 Часть 2. Применение CSS Эти стили будут работать в любом браузере, при проходе указателя мыши над кнопкой навигации фоновый цвет этой кнопки изменится с оранжевого на синий. Но это изменение произойдет мгновенно. Чтобы цвет изменился в режиме анима- ции за одну секунду, нужно к стилю .navButton добавить два новых свойства: .navButton { background-color: orange; transition-property: background-color; transition-duration: 1s; } .navButton:hover { background-color: blue; } Первое свойство — transition-property — указывает на анимируемое свойство. Можно указать одно свойство (как в показанном выше примере), воспользоваться ключевым словом all для анимирования всех изменяемых CSS-свойств или при- менить списком с запятой в качестве разделителя для указания более чем одно- го свойства (но не всех свойств). Предположим, например, что вы создаете стиль :hover , чтобы изменялись сразу цвет текста, фоновый цвет и цвет границы. Все эти три свойства указываются в виде следующего списка: transition-property: color, background-color, border-color; или, чтобы упростить код, указывается ключевое слово all : transition-property: all; Во многих случаях при анимировании каждого CSS-изменения лучше исполь- зовать ключевое слово all , в результате чего создается привлекательный визуаль- ный эффект. Чтобы указать продолжительность анимации, используется свойство transition- duration . Ему передается или значение в секундах, или значение в миллисекундах (тысячных долях секунды). Например, чтобы переход занимал полсекунды, можно использовать либо: transition-duration: .5s; либо transition-duration: 500ms; Можно даже указать отдельную продолжительность для каждого анимиру- емого свойства. Например, когда посетитель проводит указатель мыши над кноп- кой, может потребоваться, чтобы цвет текста изменялся быстрее, цвет фона из- менялся немного медленнее, а цвет границы изменялся заметно медленнее. Для этого нужно перечислить анимируемые свойства, используя свойство transition , а затем перечислить показатели продолжительности с помощью свойства transi- tion-duration : transition-property: color, background-color, border-color; Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS |