Напевно вже всі чули про введення нової версії мови розмітки веб-сторінок 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?