Робимо блоки з закругленими кутами без використання зображень

36

Давайте розглянемо спосіб створення і виведення блоку на сторінках сайту, не вдаючись до використання жодного графічного зображення.
У цьому варіанті кожен піксель кута прорисовується за допомогою CSS.Тим самим зменшується час завантаження сторінки, так і редагувати параметри виведеного блоку досить просто.

Закругленные углы блоков

Подивіться як буде виглядати виводиться блок на прикладі:

Дивитися Демо

Тепер як завжди, розберемо, за рахунок чого досягається такий результат.
По-перше, безпосередньо на сторінці теги або у файлі ваших стилів CSS, як у демо, пропишіть наступний код:

.block_br {
max-width: 500px;
margin: 0 auto;
padding: 0 15px;
border: 1px solid #B0BCC2;
 border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.block_br h2 {
font-size: 20px;
font-weight: normal;
text-align: center;
color: #00b400
}

.block_br {
max-width: 500px;
margin: 0 auto;
padding: 0 15px;
border: 1px solid #B0BCC2;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.block_br h2 {
font-size: 20px;
font-weight: normal;
text-align: center;
color: #00b400
}

Як видно з наведеного вище коду, можна налаштувати практично будь-який параметр створюваного блоку, розміри, колірну палітру елементів блоку, ну, і звичайно ж скруглення кутів, використовуючи властивість border-radius.
Для виведення блоку безпосередньо на сторінці HTML, необхідно прописати наступне:

<div class="block_br">
<div class="block_br">
<h2>Згладжена закруглення кутів за допомогою CSS</h2>
<p>Цей спосіб не використовує жодного графічного файлу.
<p>У цьому варіанті використовується нове властивість з обойми CSS. В результаті кути виглядають плавно заокругленими.</p>
</div>

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

Цей спосіб не використовує жодного графічного файлу.

У цьому варіанті використовується нове властивість з обойми CSS. В результаті кути виглядають плавно заокругленими.

Після всіх цих нехитрих маніпуляцій, з почуттям повного задоволення, можна помилуватися на результат. Сподіваюся, все у вас вийде.

Дивитися Демо

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: