І знову здрастуйте дорогі читачі блогу. Сьогодні ми спробуємо зробити красиві і прості блоки з закругленими кутами тільки за допомогою CSS. Кажу відразу, тут нічого складного немає, всього лише потрібно мінімальне знання CSS і звичайно ж знати куди і де його приліпити :-)
Дуже великий плюс цих блоків в тому, що вони зроблені тільки за допомогою CSS без використання будь-яких зображень, а це значить, що вони не несуть ніякої навантаження на сервер.
Ну а зараз давайте все таки подивимося як вони робляться.
створення блоку
Для початку нам потрібно створити самий звичайний блок, якому дамо змінну наприклад Box. її ми будемо пізніше використовувати в тезі
Ось і все, перший крок ми зробили, як бачите я задав приблизну висоту і ширину блоку, природно Ви можете поміняти ці значення за Вашими потрібним параметрам.
оформлення блоку
Тепер давайте зробимо красивий вид блоку, а саме додамо тінь і закруглити кути:
Як бачите, тут теж можна змінювати значення параметрів на свій смак, змінити фоновий колір, радіус кордонів, тінь і її колір. Головне експериментуйте.
Ну а зараз давайте застосуємо це все на практиці. наприклад:
Тепер обов'язково подивіться, що у мене вийшло в прикладі.
На жаль, а може і на щастя метод використовує CSS3, і специфікація по стандартам ще не прийнята, поки всі браузери в тому числі і всіма «улюблений» IE не підтримують, або частково підтримують за допомогою «милиць». Будемо сподіватися що в недалекому майбутньому ми зможемо повною мірою використовувати всі можливості CSS3.
Opera 11 19.45%
Chrome 16 19.15%
Microsoft Internet Explorer 8 12.8%
Firefox 9 9.52%
Firefox 8 4.84%
Microsoft Internet Explorer 9 4.72%
Firefox 3 4.49%
Microsoft Internet Explorer 7 4.37%
Chrome 12 2.1%
Спасибо большое інформація стала в нагоді)))