Закруглені кути на css3.
Привіт всім і сьогодні ми розберемо властивість border-radius, яке дозволяє зробити закруглені куточки для будь-яких блокових елементів на сторінці.
Для початку створимо простеньку html розмітку
border-radius
charset="Utf-8"gt;
class="Block"gt;
Тепер поставимо базові стилі для нашого блоку.
.block {
width:200px-
height:200px-
margin:20px-
background:# 777-
}
Ось, що ми маємо зараз
Давайте заокруглені кути блоку на 10px
Відео: CSS CSS3 Урок 8 Закруглені кути border radius
.block {
width:200px-
height:200px-
margin:20px-
background:# 777-
border-radius:10px-
}
Щоб скруглить всі кути, ми додали властивість border-radius з єдиним значенням 10px, але ми можемо поставити для кожного кута своє скругление. Для цього просто перерахуємо 4 значення для верхнього лівого, верхнього правого, нижнього правого і нижнього лівого кута.
.block {
width:200px-
height:200px-
margin:20px-
background:# 777-
border-radius:10px20px30px40px-
}
Як видно з скріншоту, всі кути у нас тепер з різним скруглением. Ми можемо також расспісать властивості для кожного кута окремо
.block {
width:200px-
height:200px-
margin:20px-
background:# 777-
border-top-left-radius:10px-// верхній лівий кут
border-top-right-radius:20px-// верхній правий вугол
border-bottom-right-radius:30px-// нижній правий кут
border-bottom-left-radius:40px-// нижній лівий кут
}
"Навіщо це потрібно, якщо у нас є скорочена форма?" - Щоб відповісти на це питання, давайте розглянемо приклад
Відео: Уроки по CSS3. Частина 5. Закруглені кути border-radius
.block {
width:200px-
height:200px-
margin:20px-
background:# 777-
border-bottom-right-radius:20px40px-
}
Як видно з скріншоту, наш правий нижній кут закруглений нерівномірно. Тобто по вертикалі кут закруглився на 40px, а по горизонталі на 20px. Даний спосіб використовується, коли вам потрібно зробити якусь дуже складну фігуру на CSS, в інших випадках цілком вистачає скороченою форми.
І останнє: ви можете вказувати радіус заокруглення не тільки в пікселях, але і в відсотках. Наприклад, давайте зробимо ідеальний коло. Для цього поставимо всіх кутках радіус заокруглення 50%
Відео: Закруглені кути меню CSS
.block {
width:200px-
height:200px-
margin:20px-
background:# 777-
border-radius:50% -
}
- Як зробити анімацію завантаження на чистому css3.
- Як зробити прелоадер на чистому css3.
- Як зробити слайдер на чистому css3 без використання jаvascript.
- Як зробити тінь на css
- Як зробити вигнуту тінь на чистому css3.
- Як задавати градієнти в css3.
- Як зробити прогрес бар на чистому css3.
- Як зробити ефект вдавленого тексту на css3.
- Вивчаємо sass. Міксини.
- Css3 трансформації.
- Стилізація select на jаvascript
- Плавні переходи в css3.
- Множинні фони в css3.
- Тіні для тексту і блоків.
- Закруглені кути через css
- Коментарі у вигляді бульбашки.
- Верстаємо круглі кнопки на css3.
- Властивість css3 - box-sizing.
- Приклади тіней на css.
- Анімація на jquery
- Dog ear effect, або ефект загнутого куточка на css.