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

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

тени к тексту как раз и заключается в улучшении восприятия. Поэтому мы не будем
добавлять к тексту никакие фильтры IE. Если вы желаете сделать это самостоятельно,
вы найдете описание синтаксиса на странице http://msdn.microsoft.com/en-us/library/
ms673539. Также на страницах http://kilianvalkhof.com/2008/javascript/text-shadow-in-
ie-with-jquery и http://www.hintzmann.dk/testcenter/js/jquery/textshadow вы найдете
пару встраиваемых модулей jQuery, основанных на фильтрах IE.

трансфОрмирОвание аватарОв
Мы завершили работу по стилизации самих облачков с комментариями. Но как
насчет аватаров — маленьких изображений рядом с каждым из облачков? Конечно,
можно было бы снова применить уже знакомые эффекты CSS3, такие как box-shadow,
но я предлагаю выучить что-нибудь новое и использовать трансформации CSS3.

что такое транСФормаЦии?

Трансформации представляют собой наборы эффектов, каждый из которых назы-
вается функцией трансформации. Среди функций трансформации можно пере-
числить поворот, масштабирование, скашивание
В настоящее время Firefox не полей. Раньше эти эффекты приходилось реали-
поддерживает добавление -moz- зовывать с помощью изображений, Flash и
border-radius к элементам img, JavaScript. Трансформирование объектов с ис-
поэтому, к сожалению, в этом пользованием возможностей CSS устраняет не-
брау зере скруглить углы авата- обходимость в лишних файлах, в очередной раз
ров не удастся. повышая эффективность разработки и отобра-
жения страниц.

коротко о СвойСтве tranSform
Свойство transform входит в два модуля: 3D Transforms (3D трансформации) по адресу http://
www.w3.org/TR/css3-3d-transforms и 2D Transforms (2D трансформации) по адресу http://
www.w3.org/TR/css3-2d-transforms. В спецификацию 3D входят все функции 2D, поэтому
можно сразу обращаться к спецификации 3D.
Функций трансформации слишком много, чтобы приводить здесь полный список, однако
я хотела бы показать вам примеры синтаксиса наиболее важных и хорошо поддерживаемых:
• translate перемещает объект на новое место, указанное в форме координат X и Y. По-
ложительные значения соответствуют перемещению вправо и вниз, соответственно,
а отрицательные — влево и вверх. Например: translate(20px, -10px);
• scale масштабирует объект в X раз. Отрицательные значения включают зеркальное
отображение объекта. Для уменьшения объекта используйте значения от 0 до 1. Можно
указать два значения, разделив их запятой: первое обозначает коэффициент масштаби-
рования по горизонтали, а второе — по вертикали. Например: scale(2.5) или scale(1, .5);

www.trk.kg