ПІДПИСАТИСЯ НА НОВИНИ
Підписка по Email - новини

Відмінити підписку
112

Закруглення кутів за допомогою CSS

2015
2
Лютий
lenmon
viewsПереглядів: 481         commentsКоментарів: 0

Веб-розробники завжди шукають можливості зробити інтерфейс користувача більш привабливим. CSS3 предоставляет для цього багато нових можливостей. Ви можете використовувати власні шрифти на сторінках; створювати елементи із закругленими кутами і тінями; використовувати градієнти в якості фону і навіть повертати елементи, щоб вони не здавалися такими одноманітними і геометрично правильними. Все це робиться без застосування Photoshop та інших графіческіх програм. Для початку ви дізнаєтеся, як закруглити гострі кути на формі.

У цій статті розглядаються наступні можливості CSS3:
border-radius [border-radius: 10pxj] Закруглення кутів елементів.

Закруглення прямих кутів

У Web всі елементи за замовчуванням имеють прямокутну форму. Поля форм, таблиці і навіть розділи веб-сторінок — всі вони мають строгий, геометрично правильний вид. За минулі роки багато веб-дизайнери використовували різні способи заокруглення кутів елементів, щоб трохи пом'якшити інтерфейс.

В CSS3 з'явилася підтримка простого і зручного заокруглення кутів, яка уж досить давно підтримується в Chrome, Firefox і Safari. В Internet Explorer 9 ця підтримка теж з'явилася, так що тепер проблема вирішується без особливих турбот. Давайте подивимося, як це робиться.

Закруглені кути   на   формі   входаВам потрібно створити нову форму входу для сайту. Поля форм повинні бути з закругленими углами. Почнемо з реалізації цього ефекту виключно засобами.

Index.html
Log   in
Email  
Password    

Застосування до форми стилів трохи поліпшить її зовнішній вигляд:

stylesheets / style.css

. login {
    width: 250рх;
}

. login fieldset {
    background-color: #ddd;
    border: none;
}

. login legend {
    background-color: #ddd;
    padding: 0 64px 0 2px;
}

. login ol {
    list-style: none;
    margin: 2px;
    padding: 0;
}

. login li {
    margin: 0 0 9px 0;
    padding: 0;
}

. login input {
    background-color: #fff;
    border: lpx solid #bbb;
    display: block;     width: 200px;
}

. login input [type = "submit"] {
    background-color: #bbb;
    padding: 0;   width: 202рх;
}


Ці стилі видаляють зі списку маркери і забезпечують рівність розмірів текстових полів. Також можна внести зміни в теги і форми для угруповання полів. Коли базове оформлення буде завершено, можна переходити до застосування ефектів закруглення.

Для заокруглення кутів всіх текстових полів форми знадобиться правило CSS виду:

stylesheets / style.css

. login inputл. login fieldset,. login legend {
    border-radius: 5px;
}


Увімкніть його в файл style.css, — і кути текстових полів будуть плавно закруглятися.

Наведене рішення працює в Firefox, Safari, Chrome і Internet Explorer 9 і 10, але не в Internet Explorer 8, а отже, потрібно реалізувати якомога ближчий аналог. Проблема зовсім тривіально вирішується за допомогою бібліотеки PIE, яка забезпечує моментальну поддерку border-radius і ряду інших функцій. Завантажте PIE, розпакуйте архів і помістіть файл   PIE.htc в папку stylesheets.

Перш ніж ми доберемося до заокруглення, необхідно позбутися від однієї стильової помилки. Internet Explorer обробляє тег   особливим чином, так що при перегляді форми в IE ми не побачимо заголовок групи на « корінці & raquo ;; він повністю розміщується всередині набору полів. Ми додамо невелику « латочку » для IE, яка зрушує заголовок групи на кілька пікселів вгору — туди, де він виводиться в Firefox і Chrome. Створіть новий файл з ім'ям stylesfieets / ie.css і включіть посилання на нього в умовний коментар, щоб вона загружалась тільки в IE 8 і нижче:

index.html

Потім внесіть в stylesheets / ie.css поправки для   legend   і fieldset:

stylesheets / ie.css

. login {
    margin-top: 20рх;
}

. login fieldset legend {
    margin-top: -10px;
    margin-left: 10px;
}

. login   fieldset {
    padding-left: 10px;
}


Група полів зміщується на 20 пікселів вниз, а заголовок групи — на 10 пікселів вгору. Також заголовок зміщується вправо, але через особливості стильового оформлення за замовчуванням в Internet Explorer необхідно додати невеликий відступ в саму групу полів. Тепер форма виглядає так само, як в інших браузерах.

Нарешті, ми завантажуємо PIE за допомогою   behavior — спеціального правила CSS, підтримуваного Internet Explorer:

stylesheets / ie.css

. Login fieldset,. Login input,. Login legend {
    behavior:   urL (stylesheets / PIE.htc);
}

Зверніть увагу: файл PIE.htc зберігається в папці     stylesheets. Посилання на PIE.htc в нашій таблиці стилів повинна задаватися щодо сторінки HTML, завантажування таблицю стилів, а не щодо самеї табліци.Теперь у всіх основних браузерах результат виглядає однаково.

У нашому прикладі потрібно, щоб у всіх браузерах кути були закруглені. Однак такі можливості завжди слід залишати на розсуд користувача. Хоча хтось скаже, що « пом'якшення » зовнішнього вигляду форми приносить реальну користь, для початку необхіднийпро прикинути, скільки користувачів працює в браузерах без підтримки заокруглення засобами   CSS. Якщо ваші відвідувачі використовують Internet Explorer 9 і вище, можливо, вам просто не варто витрачати час на написання і супровід обхідного рішення.

Закруглені кути візуально « пом'якшують » інтерфейс, а використовувати їх чрезвичайно легко. Разом з тим, дуже важливо послідовно підходити до їх застосування і не зловживати цим аспектом дизайну (як, втім, і будь-яким іншим).

Автор:
ОЦІНИТИ НОВИНУ
0   (голосів: 0)
Читайте також:
Як відновити Windows за допомогою Acronis True Image
Як відновити Windows за допомогою Acronis True Image
Щоб спростити процес переустановки Windows можна створити резервну копію...
2012
15
Вер
Admin
Переглядів: 1703 Коментарів: 4
Розгін відеокарт за допомогою софту
Розгін відеокарт за допомогою софту
Відомо, що не кожна модель відеокарти піддається розгону. Ще дуже багато...
2012
11
Жовт
Admin
Переглядів: 1654 Коментарів: 2
Окуляри для роботи за комп'ютером
Окуляри для роботи за комп'ютером
Сьогодні людини також важко уявити собі без комп'ютера, як і без мобільного...
2015
4
Берез
Роман Шлапак
Переглядів: 480 Коментарів: 0
 1   2  

ЩОб додати коментар потрібно авторизуватися.
Авторизуйтесь використовуючи Yandex Google Вконтакте Mail.ru Twitter