10
Жов
0

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

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

Привет, посетитель. Мой блог будет интересен прежде всего тем, кто интересуется wordpress, продвижением и заработке на сайтах, а также веб-дизайном. Подпишись на RSS ленту или на e-mail подписку и сможешь получить продолжение этой статьи, а также много другого полезного.

Многие верстальщики хаят 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;

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

К стати, для 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). Ну, и в конце, отображаем цвет тени.

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

Атрибут 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;}

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

Неимоверно новая корпусная мебель в Москве. http://www.kuznets.ru/ – у нас без сомнения всегда становятся постоянными покупателями.

feedproxy.google.com

Випадкові записи

Залиште свій коментар