10 приемов CSS3, которые можно и нужно использовать

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

1. @font-face

О @font-face мы говорили совсем недавно, когда разбирались с уникальными шрифтами Google Fonts. @font-face позволяет использовать практически любой шрифт. Все, что нужно, это загрузить этот шрифт на веб-сервер и подключить его в файле css:

Code
@rule-name {
  font-family: "Fontname";
  src: url(fontfilename.ext) format('formatname');
}


Так как @font-face появился достаточно давно, практически все браузеры его поддерживают. К примеру, IE6 поддерживает @font-face, правда требует для этого файл формата eot. А IE9 на данный момент поддерживает и файлы woff.

Правда поддержка поддержкой, а баги все-таки есть. Например, IE6 даже используя файлы eot может неправильно рендерить шрифт. Чтобы избежать этого имеет смысл объявить @font-face дважды: первый — используя только eot файл, второй — все остальные типы файлов для того же шрифта.

У WebKit браузеров тоже не все в порядке — они не применяют стили bold, italic и т.д. к шрифту заданному через @font-face. Решение здесь простое — задать normal для параметров font-weight, font-style, font-variant в объявлении @font-face

Полный синтаксис
Синтаксис с учетом всех багов будет выглядеть вот так:

Code
@font-face {
font-family: 'Colaborate Light';
src: url('ColabLig.eot');
font-weight:normal;
font-style:normal;
font-variant:normal;
}
@font-face {
font-family: 'Colaborate Light';
src: local('☺'), url('ColabLig.woff') format('woff'),
url('ColabLig.ttf') format('truetype');
font-weight:normal;
font-style:normal;
font-variant:normal;
}


А итогом по @font-face будет ссылочка на прекрасный сервис fontsquirrel.com, на котором вы сможете найти огромное число шрифтов либо воспользоваться генератором для создания собственного набора.

2. Opacity

С помощью свойств opacity вы можете контролировать прозрачность элемента. Свойство opacity применяется ко всему элементу и всем его дочерним элементам. Так же если вы хотите использовать прозрачность на полную — используйте RGBa схему задания цветов, где тоже используется прозрачность. Синтаксис до ужаса прост:

Code
opacity: <value>;</value>


Значение может быть задано от 0.0 до 1.0 (непрозрачный). Так же допускается использование сотых, к примеру 0.37. Пока IE не поддерживает opacity имеет смысл использовать специальный фильтр:

Code
filter: alpha(opacity=40);


Вот так выглядит полный синтаксис для IE:

Code
filter: progid:DXImageTransform.Microsoft.
Alpha(opacity=40);


А так будет выглядеть новый фильтр для IE 8-9:

Code
-ms-filter: "progid:DXImageTransform.
Microsoft.Alpha(opacity=40)";


Обратите внимание, что сначала нужно использовать конструкцию для IE 8-9 первой, для IE 6-7-8 второй.
Полный синтаксис

Code
.opacity {
background-color: #3C4C55;
color: #fff;
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.
Alpha(opacity=20)";
/* -ms-filter только для IE8-9 */
filter: progid:DXImageTransform.Microsoft.
Alpha(opacity=20);
/* filter работает в IE6, IE7, IE8 */
filter: alpha(opacity=20);
}


3. RGBA

О RGBA я писал в цикле статей CSS3 для начинающих. RGBA — это одна из моделей задания цвета. Что делает ее особенной? Вы можете помимо задания цвета, задать так же и прозрачность. Синтаксиси RGBA таков:

Code
property: rgba(<r color value>, <g color value>, <b color value>, <opacity value>); </opacity></b></g></r>


Значение цветов указываются в пределах от 0 до 255. А значение для прозрачности указывается в районе от 0.0 до 1.0. Все современные браузеры поддерживают RGBA модель, в том числе и IE9. Что с ранними версиями IE? Все не совсем так хорошо. Есть баг в старых версиях IE: если вы задаете фоновый цвет (background-color) какого-либо элемента с помощью RGBA, то цвет не будет отображен. Решением здесь выступает использование заглушек — цвет указанный в RGB или hex формате. Это поможет отобразить цвет, но не прозрачность. Для того, чтобы отобразить прозрачность в старых IE можно использовать фильтр.

Полный синтаксис
Простой вариант:

Code
#sidebar{
background: rgb(255, 0, 0); /* заглушка в формате RGB*/
background: rgba(255, 0, 0, 0.3);
}


Более специфичный вариант:

Code
#sidebar {
background-color: #ff0000; /* fallback color in
hexidecimal */
background-color: rgba(255, 0, 0, 0.3);
}


А вот синтаксис с фильтрами для IE:

Code
.rgba {
background-color: #ff0000; /* заглушка в hex формате */
background-color: transparent; /* transparent используется для того, чтобы фильтр работал в IE8. лучше делать через условные комментарии */
background-color: rgba(255, 0, 0, 0.3);
-ms-filter: "progid:DXImageTransform.
Microsoft.gradient(startColorstr=#4CFF0000,
endColorstr=#4CFF0000)";
/* фильтр для IE8 */
filter: progid:DXImageTransform.Microsoft.
gradient(startColorstr=#4CFF0000,
endColorstr=#4CFF0000);
/* фильтр для старых IE */
}


4. Border-radius

border-radius позволяет нам делать углы закругленными и создавать интересные формы. border-radius одно из самых простых и частоиспользуемых свойств CSS3. Постарайтесь использовать сокращенные формы если вы задаете одинаковые параметры для всех 4х углов. Вот сокращенный синтаксис:

Code
border-radius: <top value>, <right value>, <bottom value>, <left value>;</left></bottom></right></top>


Есть так же различные варианты синтаксиса для разных браузеров. Например, при указании префикса -moz- для Mozilla Firefox, вы можете задать несколько разных значений для каждой позиции в сокращенной форме. -webkit- префикс требует наличия отдельных свойств для каждой позиции. Поддержка border-radius хорошая. Исключение как всегда составляют старые версии браузера IE. Есть два пути решения проблемы. Первый — использовать для старых версий IE основанную на изображениях схему создания закругленных углов. Второй — показывать пользователям старых браузеров квадратные углы, а закругленные углы будут стимулом обновить браузер.

Полный синтаксис
Пример с одинаковыми значениями для всех 4х углов:

Code
.roundcorners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}


Различные значения для углов:

Code
.roundcorners {
border: 5px solid #aaa;
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;
}


Хорошим инструментом автоматизации для создания закругленных углов будет сервис http://border-radius.com/. Сервис генерирует кроссбраузерный код для border-radius.

5. Box-shadow

Еще одно из долгожданных свойств CSS3 box-shadow позволяет создавать тень для элемента без использования изображений. Синтаксис:

Code
box-shadow: <position> <x -offset>, <y -offset>,
<blur radius>;</blur></y></x></position>


* position (позиция): стандартное значение outset и оно не требует определения. Другое значение inset и должно быть задано.
* x-offset (горизонтальное смещение): положительное значение позиционирует тень справа от элемента; отрицательное значение позиционирует тень слева от элемента.
* y-offset (вертикальное смещение): положительное значение даст тень снизу элемента, отрицательное — сверху. Если третий параметр опущен, то размытие будут установлено в 0.
* blur radius (радиус размытия): 0 — без размытия; числа больше нуля — увеличивают размытие.

box-shadow имеет достаточно неплохую поддержку современными браузерами, в том числе и IE9. В Firefox 4 на данный момент не требуется указывать префикс -moz-, но он все еще нужен для версий 3.5 и ниже. Вне зависимости от префиксов вендоров синтаксис идентичен. Допускается так же использование нескольких теней для одного элемента. Для возможно использование и специальных фильтров для создания теней. По словам Роберта Ньюмана фильтры IE создают более приятную тень.
Полный синтаксис

Code
.boxshadow {
-moz-box-shadow: 3px 3px 10px #333;
-webkit-box-shadow: 3px 3px 10px #333;
box-shadow: 3px 3px 10px #333;
/* для IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135,Color='#333333')";
/* для IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135,Color='#333333');
}


Различные примеры с использованием box-shadow я описал в статье Drop-shadow – простые примеры

6. Text-shadow

text-shadow позволяет добавлять тень к тексту и создавать различные эффекты. Например, в статье 6 эффектов с использованием text-shadow я показывал некоторые из них. Синтаксис у text-shadow примерно такой же как и box-shadow. Так же как и старший брат, text-shadow имеет хорошую поддержку современными браузерами, возможность задавать несколько теней для одного элемента, что дает возможность создавать действительно красивые эффекты.

К вопросу о кроссбраузерности: есть специальный фильтр для IE, который позволит отбросить изображения вовсе. Имеет смысл использовать условные комментарии для Internet Explorer.

Полный синтаксис

Code
.textshadow h2 {
text-shadow:1px 1px 2px rgba(48,80,82,0.8);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=135, Color='#305052')";
/* Для IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135,Color='#305052');
}


Существует так же огромное количество сервисов для автоматического создания теней. К примеру, http://westciv.com/tools/shadows/.

7. Градиент

Градиент по сути не является свойством CSS. Это скорее набор значений, которые можно использовать в свойствах background, border-image, list-style-image. Градиент генерируется браузером, который, по сути, создает изображение, которое потом применяется в определенном свойстве. Градиент имеет множество различных вариантов синтаксиса для разных браузеров. Вот несколько советов по линейному градиенту:

* Синтаксис с префиксом -moz- и стандартный синтаксис содержит тип градиента перед списком параметров
* Синтаксис с префиксом -moz- позволяет задавать значения в градусах
* Названия позиций отличаются в разных браузерах
* Синтаксис для webkit браузеров позволяет использовать color stop — промежутки для цветов.

На данный момент ни Opera ни Internet Explorer (даже девятый) не поддерживают градиент. Для Opera имеет смысл использовать изображение для реализации градиента. Для IE есть специальный фильтр, который создает линейный градиент. К сожалению, не существует фильтра для создания радиального градиента для IE.

Полный синтаксис

Code
.gradient {
color: #fff;
background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*цвет фона - один из цветов использующихся в градиенте. gradient_slice.jpg изображение шириной 1px */
background-image: -moz-linear-gradient(top, #07407c, #aaaaaa);
background-image: -webkit-gradient(linear, lefttop, left bottom, color-stop(0, #07407c), color-stop (1, #aaaaaa));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c',EndColorStr='#aaaaaa')";
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa');
}


Более подробно о градиентах в CSS в статьях Градиенты в CSS и Градиентная заливка с помощью CSS3.

Фон из нескольких изображений

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

Code
background:
<image> <position> <size> <repeat> <attachment> <box>,
<image> <position> <size> <repeat> <attachment> <box>,
<image> <position> <size> <repeat> <attachment> <box>,
<image> <position> <size> <repeat> <attachment> <box> <color>;</color></box></attachment></repeat></size></position></image></box></attachment></repeat></size></position></image></box></attachment></repeat></size></position></image></box></attachment></repeat></size></position></image>


Как вариант, вы можете разнести различные свойства:

Code
background-image: <image>, </image><image>, </image><image>, </image><image>;
background-repeat: <repeat>, </repeat><repeat>, </repeat><repeat>,</repeat><repeat>;
background-position: <position>, </position><position>, </position><position>,</position><position>;
</position></repeat></image>


Все современные браузеры на данный момент поддерживают создание фона из нескольких изображений, кроме, угадайте кого? Правильно — старых версий IE. Имеет смысл делать заглушку с нужным изображением и поместите ее перед заданием фона из нескольких изображений. Браузеры, которые не поддерживают эту возможность, покажут только первую, единственную картинку. Современные же браузеры покажут фон из нескольких картинок.

Полный синтаксис

Code
#wrap {
background: url(body-full.gif) top left no-repeat;
background:
url(body-top.gif) top left no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' body-top.gif',sizingMethod='scale')";
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='body-top.gif', sizingMethod='scale');
zoom: 1;
}


А это альтернатива:

Code
body {
background: url(all_layers.jpg) no-repeat 0 0;
background-image:
url(first_layer.png),
url(second_layer.png),
url(third_layer.png),
url(fourth_layer.png);
background-repeat: no-repeat, no-repeat,no-repeat, no-repeat;
background-position: 0 0, 0 50, 0 100, 0 200;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' body-top.gif',sizingMethod='scale')";
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='body-top.gif', sizingMethod='scale');
zoom: 1;
}


9. Transform

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

Code
< -prefix->transform: type(<value>) type(</value><value>)
type(</value><value>) type(</value><value>);</value>


Конкретно для поворота синтаксис такой:

Code
< -prefix->transform: rotate(<value>)</value>


Положительное значение повернет элемент вправо по часовой стрелке. Отрицательное — влево, против часовой стрелки. Существует так же фильтр для IE, который позволяет поворачивать элементы — matrix.

Полный синтаксис

Code
.rotate {
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455,M12=0.08715574274765817, M21=-sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.9961946980917455,M12=0.08715574274765817,M21=-0.08715574274765817,M22=0.9961946980917455);
zoom: 1;


Сервис позволяющий генерировать синтаксис для IE http://css3please.com/

10. Transition

Свойство transition позволяет создавать динамическую анимацию для элементов. Синтаксис таков:

Code
< -prefix->transition:<property> <duration>
<timing -function> <delay>;</delay></timing></duration></property>


* property: вы можете задать имя определенного CSS свойства, к которому будет применено transition. Либо вы можете использовать значение all.
* duration: определяет время, в течении которого будет происходит анимация.
* timing-function: описывает функцию, которая рассчитывает промежуточные значения для анимации.
* delay: определяет время, по прошествии которого будет работать transition. Вы можете задать несколько наборов параметров для одного свойства transition.

Хотя свойство и поддерживает во всех современных браузерах, но рендеринг в разных браузерах может отличаться. Переходы в Mozille немного резкие по сравнению с webkit браузерами Chrome и Safari, где они очень плавные. Фильтры IE… Тут тот самый момент, когда мы можем использовать несколько разных фильтров IE. Различие в том, к какому свойству у нас применяется свойство transition. Какой именно использовать фильтр вы можете определиться прочитав документацию от Microsoft.

Полный синтаксис

Code
#photos > img:hover {
-moz-transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
-o-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}


Заключение

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

  • FalleN

  • 2139

  • 1

  • 0
Теги: приемов, 10, css3

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!