seoweb.in.ua

personal blog about seo & web

11.10.11

Как сделать закругленные углы и градиент с помощью 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?

© 2015, Seoweb.in.ua.

Share in Livejournal

"Как сделать закругленные углы и градиент с помощью CSS3 HTML5" published in Blog, Internet, Sites, marked as CSS3 HTML HTML5 .

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

  1. Форма комментариев wordpress: используем HTML5 и микроформаты -

    […] для нашей формы закругленные углы. […]

Leave a Reply

Копирование разрешено только с прямой индексируемой гиперссылкой!

© 2009-2015 seoweb.in.ua. All Rights Reserved.

navigation