Как сделать закругленные углы и градиент с помощью CSS3 HTML5

Наверное, уже все слышали о введении новой версии языка разметки веб-страниц HTML под номером 5. Вместе с ним вводиться и новая версия каскадных таблиц стилей CSS – CSS3.

Эти нововведения позволяют сделать достаточно много интересных вещей без использования всяких java-скриптов или каких-то других технологий. В частности они позволяют сделать у любого блока <div> красивые закругленные углы (края) в стиле веб 2.0, причем для этого не нужны фотошоп (Adobe Photoshop), corel, jquery, и т.п., так как все делается внутри вашего кода. Аналогично можно достигнуть и эффект градиента.

Я немного поэкспериментировал с шапкой моего блога, и получилось то, что вы сейчас видите: и градиент и закругленные углы. Расскажу, как нечто похожее сделать и вам.

Как сделать закругленные углы (края) с помощью CSS3 HTML5

Для начала выберите элемент, который хотите заокруглить. Обычно это div в виде какого-то прямоугольника, квадрата, рамки, таблицы и т.п. Для закругления пропишите ему такой атрибут в каскадных таблицах стилей:

.rounded-corners-div {border-radius: 15px;}

Насколько круглым будет край вы можете отрегулировать, выбрав нужное вам количество пикселей.

Как сделать градиент с помощью CSS3 HTML5

Аналогично, выберите элемент для использования градиента, а так же цвета и его направление. Здесь придеться использовать 2 строчки, так как пока не все браузеры одинаково понимают новые директивы. В моем случае я использовал серый и белый цвет:

.gradient-div {background: -moz-linear-gradient(top, grey, white);
background: -o-linear-gradient(top, grey, white);}

Такие конструкции градиента и круглых углов проверены и работают во всех последних версиях браузеров Opera, Mozilla Firefox, Google Chrome, кроме Internet Explorer (даже IE9).

А вы используете на своих сайтах возможности HTML5?