—»     —»   Что нужно знать относительно CSS
  Раздел: CSS/Style Sheets   Нет комментариев  

Что нужно знать относительно CSS

С развитием технологий Веб, не исключая тот факт, что браузеры «обучаются» воспроизведению всё более сложного кода, мир постепенно приближается к цели, которая заключена в разработке универсальных стандартов для всех платформ и компьютеров. Люди не просто станут тратить меньше времени на разработку блока, который будет нормально отображаться в IE6, но будет создана цельная зрелая атмосфера для инноваций и реализации фантазий, без применения сторонних «хаков» или без путаницы в километрах кода.

Веб – это критически адаптивная среда, которая насыщена глобальным обществом, владеющим кладезями знаний и готовым поделиться информацией с другими. Если сразу все захотят стабильной работы закругленных углов у блоков на странице – они будут стабильно работать. Если все вместе захотят использовать изображения в качестве границ – то это, несомненно, случится! Всеобщее желание может решить почти любую проблему. Если бы этого не происходило – то мир бы до сих пор применял табличную верстку и километры ненужного кода, который перегружает страницу. Все мы знаем, что в сети может быть реализовано все что угодно!

Сделано для сети Интернет

Функции CSS3 (border-radius, box-shadow и text-shadow) постепенно набирают обороты в браузерах WebKit (Safari, Chrome и т.д.) и Gecko (Firefox). Эти функции значительно облегчают страницы, не говоря уже о привлекательности внешнего вида. Но и стоит также отметить, что это всего лишь «иголка в стогу сена», говоря о возможностях CSS3.

В данной статье мы постараемся расширить знания CSS3, путем охвата различных трансформаций, переходов и анимации. Мы постараемся рассказать о коде, доступной поддержке и приведем несколько примеров того, как эти функции не просто улучшают ваш дизайн, но и вообще общий внешний вид сайта.

CSS Трансформации

Трансформации CSS – это целое событие для W3C. Это, наверное, был первый раз, когда я сел за изучение полной технической документации предмета, и после изучения ощутил, что до сих пор ничего не понимаю. В общем, документация написана на техническом жаргоне, который используется в W3C, но сфокусирована на графических (как в графическом черчении) элементах трансформации и матрицах. Не сталкиваясь с матрицами со времен первого курса обучения, мне пришлось произвести большое количество тестов в браузерах устарелых версий, а также много чего делалось «наугад».

После прочтения всей документации, которую я смог отыскать, и проведения тестов во всех браузерах, в которых только мог, я извлек некоторую информацию о CSS трансформациях, из которой можно вынести много важного материала.

transform();

Это значение задается тем же функциям, которые можно применять посредством SVG. Его можно применить как к линейным, так и к блочным элементам. Это позволяет Вам искривлять, зумировать и перемещать элементы, и все это с помощью всего лишь одной строки CSS.

Одним из самых больших недостатков современного дизайна является то, что пока еще невозможно выделение текста. Но это больше не будет проблемой, если вы используете функцию трансформации для того чтобы управлять текстом. Действие подразумевает под собой немного CSS, и любой текст в пределах элемента останется доступным для выделения. Это огромное преимущество CSS перед изображениями (или фоновыми изображениями).

Некоторые интересные и полезные функции трансформации (с поддержкой):

* rotate – функция позволяет вам вращать объекты, меняя значения градуса.
* scale – возможность увеличения и уменьшения объекта за счет указания значений.
* translate – перемещение элемента посредством координат X и Y.

Давайте подробнее рассмотрим каждую функцию.

Rotate

Значение трансформации имеет много функций, одно из которых – вращение. Посредством вращения вы можете вращать объект посредством указания значения градуса, а применять функцию можно как в линейных, так и в блочных элементах, получая отличный эффект как результат.

Что нужно знать относительно CSS

#nav {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

Не забывайте, что в для IE8 (если в не стандартном режиме) вам потребуется использовать «ms-filter» вместо «filter» в коде CSS.

Поддержка

Поддержка для трансформации: вообще, функция rotate довольно широко распространена. В CSS-сниппете, представленном выше, мы ориентируется на -webkit- и -moz-, и вращаем элемент #nav на -90 градусов.

Достаточно доступно, не правда ли? Но главная проблема заключается в том, что вращение – это достаточно важный элемент дизайна. И многие дизайнеры вряд ли станут использовать его, если IE его не воспринимает.

К счастью, даже у IE есть специальный фильтр: фильтр трансформации изображений. Он распознает 4 значения вращения: 0, 1, 2 и 3. Вряд ли вы сможете добиться такого же контроля, как в WebKit или Gecko, но ваш дизайн сохранит свою консистенцию в старых браузерах (даже в IE6).

Scale

Это именно то, о чем вы и подумали из названия функции: увеличение и уменьшение элементов. Применяются значения ширины и высоты (они могут быть положительными, отрицательными или десятичными).

Положительные значения, соответственно, увеличивают объект.
Отрицательные значения, однако, не уменьшают его, а разворачивают вспять, а затем уменьшают соответствующим образом. Также Вы можете использовать десятичные значения (т.е. *.01, *.5) для уменьшения или увеличения элемента.

Что нужно знать относительно CSS

#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);
}

Поддержка

Масштабирование поддерживается в Firefox, Safari и Chrome, но при этом, ни в одной версии IE. Вообще, масштабирование – это сугубо личный выбор каждого. Но его можно применять с дополнениями, типа :hover, что может значительно улучшить внешний вид.

#nav li a:hover{
/* This should make your navigation links zoom slightly on hover */
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}

Translate

Название данной функции, вероятно, вводит вас в заблуждение. В общем, это позиционирование элементов с указанием значений X и Y.

Выглядит это так же, как и остальные формы трансформации, но добавляет некоторую глубину вашему веб-сайту.

Что нужно знать относительно CSS

#nav{
/* This will move the #nav element left 10 pixels and down 20 pixels. */
-moz-transform: translate(10px, 20px);
-webkit-transform: translate(10px, 20px);
}

Поддержка

Функция поддерживается в Firefox, Safari и Chrome, когда Вы применяете расширения -moz- и -webkit-.

Цепочка трансформаций

Вообще, трансформации очень индивидуальны, но если вы хотите скомбинировать их, то количество кода может быстро и значительно увеличиться, особенно если применять расширения производителей. К счастью, у нас есть некоторые наброски:

#nav{
-moz-transform: translate(10, 25);
-webkit-transform: translate(10, 25);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: scale(2, 1);
-webkit-transform: scale(2, 1);
}

Эти трансформации можно использовать вместе, что повысит эффективность Вашего кода CSS:

#nav{
-moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
-webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1);
}

Настоящая мощь этих трансформаций скрыта, как раз, в комбинировании и составлении цепочек. Вы можете перемещать, вращать, увеличивать и уменьшать как линейные, так и блочные элементы без применения javascript. Как только будет разработана стабильная поддержка этих функций, люди смогут создавать насыщенные, привлекательные, и облегченные простенькие интерфейсы и приложения.

Переходы

Основа перехода представляет собой обращение к значению CSS, которое определяет и перемещает элемент с его неактивного положения (например, темно-синий фон) в его активное положение при наведении (например, светло-синий фон).

Переходы можно скомпоновать с трансформациями (и прикрутить события типа :hover или :focus) для создания иллюзии анимации. С переходами CSS также можно добиться эффекта затемнения фона, скольжения блока или вращения объекта.

#nav a{
background-color:red;
}

#nav a:hover,
#nav a:focus{
background-color:blue;

/* tell the transition to apply to background-color (looks like a CSS variable, doesn't it? #foreshadowing)*/
-webkit-transition-property:background-color;

/* make it 2 seconds long */
-webkit-transition-duration:2s;
}

Поддержка

Так как эта функция очень крутая, она поддерживается только в браузерах семейства WebKit. -moz-transition уже поддерживается в последней версии Firefox 3.7. К тому же, вы можете добавить -moz-transition в код CSS просто для дальнейшей перспективы усовершенствования.

Анимация

Анимация – это, пожалуй, тот момент, когда CSS3 на самом деле работает! Вы можете совместить все описанные выше функции со значениями animation-duration, animation-name и animation-timing-function для того чтобы с помощью CSS реализовать анимацию, похожую на Flash.


#rotate {
margin: 0 auto;
width: 600px;
height: 400px;

/* Ensures we're in 3-D space */
-webkit-transform-style: preserve-3d;

/*
Make the whole set of rows use the x-axis spin animation
for a duration of 7 seconds, running infinitely and linearly.
*/

-webkit-animation-name: x-spin;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

/* Defining the animation to be called. */
@-webkit-keyframes x-spin {
   0%    { -webkit-transform: rotateX(0deg); }
   50%   { -webkit-transform: rotateX(180deg); }
   100%  { -webkit-transform: rotateX(360deg); }
}

Весь этот фантастический код и живые примеры Вы можете найти на демо-сайте CSS3.info. Демо-версия работает в любом браузере, но сама анимация только в последних версиях браузеров семейства WebKit. Там все точно так же, как показано на видео, но чтоб увидеть это своими глазами, вам следует поставить что-то из свежих браузеров.

Поддержка

К сожалению, пока что поддержка анимации на CSS крайне ограничена. Двухмерная анимация CSS работает в Safari 4 (Leopard), Chrome 3, Safari Mobile, Shira и других браузерах семейства Webkit. Safari 4 (Snow Leopard) поддерживает трехмерную анимацию.

Заключение

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

Согласно заявленной информации об IE9, можно и не удивляться, что команда разработчиков наконец-то включит поддержку некоторых из этих функций, особенно после того, как стремительно набирают обороты разговоры об интеграции CSS3.

Стоит верить, что будущее Веб достаточно светлое и перспективное! Особенно, если брать во внимание такие функции, как например – анимация. По сути, многие из новшеств вовсе не востребованы конечным пользователем, но это может доставить радости и ощущение комфорта. В общем, конечно стоит ждать того дня, когда будет доступна кросс-платформенная поддержка данных функций для всех браузеров.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, javascript
Опубликовал Mysterious Master   Прочитано (раз): 7317   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Декабрь 2020    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031