Как мы продвигаемся вперед с веб-браузерами и становятся способными к оказанию более продвинутый код, мы постепенно приближаемся к цели всеобщего стандарты для всех платформ и компьютеров.
Мало того, что мы должны тратить меньше времени убедившись, что наше окно модель смотрит прямо в IE6, но мы создаем атмосферу созрели для инноваций и бесплатно хаки и тяжелых интерфейсных scripting.
Web является чрезвычайно адаптивную среду и окружен совместной сообщество с богатыми знаниями поделиться.Если мы все вместе хотим быть в состоянии иметь округлая corners, то сделать это.Если мы хотим иметь нескольких фоне images, то сделать это.Если мы хотим границы images, то, чтобы это произошло, тоже.Так что желание это не проблема.Если бы это было, мы бы все еще использовать таблицы для расположения наших страницах и с использованием тяжелой более-топ кода.Мы все знаем, что все может быть сделано на Web.
Сделано для Web
CSS 3 свойства, такие как границы radius бокс-shadow, и текст-shadow начинает набирать обороты в WebKit (Safari, Chrome и т.д.), Gecko (Firefox) браузерами.Они уже создает более легкий страниц и богаче опытом для пользователей, не говоря уже о том, что они ухудшают довольно изящно, но они являются лишь верхушкой айсберга из того, что мы можем сделать с CSS 3.
В этой статье мы будем принимать эти свойства на шаг дальше и исследовать преобразований, переходы и animations.We’ пойдем на сам код, доступный поддержку и некоторые примеры, чтобы показать, как именно эти новые свойства не только улучшить свои проекты, но общая пользователя experience.
CSS Transformations
CSS преобразования W3C странность.Это первый раз, когда я сел читать полный specifications на что-то и didn’ т чувствую, как у меня была ручка на эту тему позже.Функции написаны с уровнем технического жаргона можно ожидать от W3C, но он фокусируется на графической (как в графе рисунок) элемент преобразования и матрицы.Будучи не рассматриваются матрицы, так как первокурсник-летний исчисление, я должен был сделать много хорошего старомодного браузера тестирование и гадать и checking для этого section.
После прохождения каждого урока я мог найти, и слишком много тестов браузер рассчитывать, я вышел с некоторой полезной информацией о CSS transformations, что я думаю, мы все можем выиграть from.
Преобразование ();
transform свойство позволяетвид функции также разрешено SVG.Он может применяться как для встроенные и блочные elements.Это позволяет нам крутить, увеличивать и перемещать элементы, все с одной линии CSS.
Одна из самых больших жалоб на передовой дизайн, что текст не выбирается.Это больше не проблема, когда вы используете transform собственность для работы с текстом, потому что это чистая CSS и поэтому любой текст внутри элемента остается выбора.Это огромное преимущество по сравнению с использованием CSS изображение (или фоновое изображение)
Некоторые интересные и полезные функции преобразования (которые поддерживаются):
- rotateПоверните позволяют превратить объект, передавая степень стоимости через function.
- scaleШкала функции масштабирования и может сделать любой элемент больше.Он принимает положительные и отрицательные значения, а также decimals.
- translateПеревести существенно перемещает элемент на основе X и Y coordinates.
Let’ посмотрим на каждый из этих более detail.
Rotate
Собственность преобразование имеет множество применений, одним из которых является rotate.Вращение поворачивает объект на основе степени ценности и может быть применен как для встроенных и элементы уровня блока, оно делает для довольно прохладно effect.
#nav {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Пожалуйста, обратите внимание, что в IE 8 (если не в стандартном режиме), это необходимо, чтобы вы типа “МС-фильтр”, а не просто “фильтр” в CSS.
SupportПоддержка transform: rotate удивительно широкое распространение.В фрагмент CSS и выше, мы нацелены непосредственно на -webkit- и -moz- и вращать #nav элемента на -90 degrees.
Довольно просто, не так ли?Проблема только в том, что вращение для очень важный элемент дизайна, и многие дизайнеры будут неохотно использовать его, если Internet Explorer не признает it.
К счастью, IE есть фильтр для this: образ преобразования фильтра.Это может занять четыре вращение значения: 0, 1, 2 и 3.Вы won’ т получить тот же точного управления, который поставляется с Webkit и Gecko, но ваш дизайн будет остаются неизменными в старых браузерах (даже IE6)
? Можно ли использовать Да, но убедитесь, что он полностью tested.
Scale
Масштабирование делает именно то, что вы думаете, он будет делать: увеличивать и уменьшать на элемент.Функция принимает масштабы и значения ширины и высоты, и эти значения могут быть положительными, отрицательными или decimals.
Положительные значения масштабов элемент, как можно было бы ожидать, исходя из ширины и высоты specified.
Отрицательные значения не дают усадки элемента, а обратить его вспять (например, текст включен в обратном направлении), а затем масштабируются соответственно.Можно, однако, использовать десятичные значения нижечем за 1 (например, .5) для уменьшения или увеличения из element.
#nav {
/* The nav element width and height will double in size */
-webkit-transform: scale(2);
-moz-transform: scale(2);
}
#nav {
/* The nav element width will double in size, but the height will remain unchanged*/
-webkit-transform: scale(2, 1);
-moz-transform: scale(2, 1);
}
#nav {
/* The nav element width will double in size and flip horizontally,
but the height will remain unchanged */
-webkit-transform: scale(-2, 1);
-moz-transform: scale(-2, 1);
}
SupportМасштабное преобразование поддерживается in Firefox, Safari и Chrome, но не любой версии Internet Explorer (пока), насколько я мог сказать.Масштабирование объекта является довольно значительным выбор дизайна, но он может быть применен с использованием прогрессивного улучшения :hover, который можно добавить немного поп-музыки до навигационной especially.
#nav li a:hover{
/* This should make your navigation links zoom slightly on hover */
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
? Можно ли использовать Время от времени, да.Но не с критическим дизайн elements.