Кроссбраузерные техники css3 которые можно использовать уже сейчас

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

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

1. Закругленные углы при помощи css3

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

Как сделать? Просто

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

1 строка — для mozilla, 2 — для хром, сафари, третья — это общее правило, но именно оно используется в опере выше 10.5

Кроме того, можно обозначать радиус для каждого отдельного угла

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;

К стати, для ie тоже есть решение использовать закругления углов

2. Границы в виде картинки

Делаем так

border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

3. Тени при помощи css3

Второе, мое любимое свойство. Позволяет сделать тень не только от текста, но и от слоев.

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

Первые 2 значения указывают расстояние тени (offset) по x и y осям. Третий атрибут указывает размытие теней (blur). Ну, и в конце, отображаем цвет тени.

Атрибут text-shadow используется для теней для текстовых элементов.

text-shadow: 2px 2px 5px #ccc;

4. Эффект прозрачности при помощи css3

Теперь не нужно делать специальные картинки в формате png с альфа прозрачностью, достаточно добавить значение

opacity: 0.5;

0.5 — это равно 50% прозрачности

5. Подключение нестандартных шрифтов при помощи css3

В своих работах я стараюсь использовать Tahoma, Arial, реже использую Verdana, Georgia, Century Gothic, но если вы все же хотите использовать нестандартные шрифты, то можете их подключить через css3

@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

в значении url нужно указать путь на сервере к файлу шрифтов, ну и не забыть положить туда этот файл, далее в стилях можете использовать уже подключенный шрифт

h1 { font-family: 'Anivers', Helvetica, Sans-Serif;}

К стати, осторожно, многие шрифты имеют авторские права.

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

• типографика для веб-дизайнера
• Хаки для ИЕ/IE
• Кастомизируемая логин панель на wordpress