Довідковий матеріал з основних мов програмування і верстки сайтів.
Готова методика створення простих і складних динамічних сайтів, з використанням PHP і MySQL.
Розробка веб-сайтів під "ключ".
Розробка окремих фрагментів сайтів, консультації з питань верстки веб-сторінок і веб-програмування.
Веб-інструмент
Веб-майстерня
Веб-послуги
Веб-графіка
Веб-ресурси
Хочете бути в курсі подій, що відбуваються на сайті? Підпишіться на отримання останніх новин та статей.
Подивіться в Google
Графічні ефекти без графіки. обрізка кутів
Тепер, коли ми навчилися прийомам роботи з браузерами що не підтримують CSS3, можна перейти до питань поліпшення дизайну нашої веб-сторінки. Давайте для початку заокруглені кути блоків і розділів сторінки, щоб надати їм більш м'яку, обтічну форму і позначити візуальне розділення між ними.
Закруглені кути - це простий і поширений візуальний ефект, який раніше на подив складно було реалізовувати на веб-сторінках. Доводилося не тільки витрачати час на створення зображень заокруглених кутів в графічних додатках, але і подовгу просиджувати над додаванням коду HTML і CSS. Для визначення місця розташування кожного кута часто потрібно було створювати цілий букет вкладених блоків div, адже специфікація CSS 2.1 допускала наявність у поля не більше одного фонового зображення. Таким чином, код CSS, що відноситься до розміщення зображень, міг стати дуже і дуже складним. Зображення, на додаток до надмірно роздутого коду HTML і CSS, неабияк збільшували обсяг даних, які доводилося завантажувати кожному користувачеві, і це знижувало швидкість завантаження сторінок. Навіть якщо ви застосовували сценарії динамічного створення заокруглених кутів, не створюючи і не вставляють зображення вручну, все одно ви своїми руками збільшували число файлів для завантаження користувачами і зменшували продуктивність сторінок. І все це заради банальних заокруглених кутів!
Створення овалів і кіл за допомогою властивості border-radius
Зрозуміло, з урахуванням безперервного вдосконалення CSS3 і впровадження в браузерах підтримки нових специфікацій в реальному світі все стає трохи складніше. Однак у порівнянні з іншими підходами, це найдосконаліші дрібниці.
Давайте відредагуємо файл style.css і зробимо блок з горизонтальним меню, розділ контентом і блок з вертикальним меню, а також завершувач сторінки з округленими кутами. Для цього в код відповідних блоків впишемо border-radius.
#page_header ul margin: 5px 4px 5px 4px;
display: block;
height: 30px;
border: solid 1px # D1D1D1;
-moz-border-radius: 10px; / * Для Firefox * /
-webkit-border-radius: 10px; / * Для Safari і Chrome * /
border-radius: 8px;
>
#post width: 695px;
margin: 5px 2px 0 4px;
padding: 4px;
float: left;
border: solid 1px # D1D1D1;
-moz-border-radius: 10px; / * Для Firefox * /
-webkit-border-radius: 10px; / * Для Safari і Chrome * /
border-radius: 10px;
>
#sidebar width: 190px;
float: right;
border: solid 1px # D1D1D1;
-moz-border-radius: 10px; / * Для Firefox * /
-webkit-border-radius: 10px; / * Для Safari і Chrome * /
border-radius: 10px;
margin: 5px 4px 0 2px;
padding: 4px 2px;
>
#page_footer margin: 4px 0 0 0;
border: solid 1px # D1D1D1;
-moz-border-radius: 10px 10px 0 0; / * Для Firefox * /
-webkit-border-radius: 10px 10px 0 0; / * Для Safari і Chrome * /
border-radius: 10px 10px 0 0;
>
Протестуємо веб-сторінку. В сучасних браузерах вона буде виглядати так.
Про властивості border-radius
Всі чотири значення можна перерахувати всередині одного властивості border-radius, розділивши їх пробілами; можна також використовувати одне загальне значення для однакового заокруглення всіх кутів. У Safari 4 і Safari для iOS 3 і більш ранніх версій додавання кількох значень в одну властивість border-radius не підтримує; дозволяється вказати тільки одне значення, яке буде застосовано до всіх кутах.
З використанням властивості border-radius можна оформляти такі елементи:
Підтримка властивості border-radius в браузерах