Прийоми оформлення кордонів блоку за допомогою CSS

35

Одного разу я вже як то торкався теми форматування блоків засобами CSS у статті 5 CSS Стилів для блоку з фоном. Сьогодні розповім як завдяки CSS3 ми можемо розширити свої можливості при оформленні блочних елементів сторінки.

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

Мені хотілося б поділитися деякими прийомами стилізації кордонів, для отримання різних ефектів оформлення блоків. Експериментуючи з параметрами стилю ви завжди зможете домогтися бажаного результату, благо можливості CSS3 це нам дозволяють.

Працюючи над стилями, як і раніше, варто пам’ятати про те, що кожен браузер відображає по своєму, все що ми робимо. Наприклад те, як підтримує CSS горезвісний Internet Explorer , вже починає викликати нудоту. В інших сучасних браузерах все виглядає просто і зі смаком.

1. Легкий Прес

CSS Границы Легкий Пресс - Вдавленность

Обзовите цей ефект як хочете, я не став мудрувати і назвав так «Легкий Прес», тому що створюється ілюзія легкої вдавленности блоку з вмістом по відношенню до основного, темному фону сторінки. Схожу техніку описував Ефект Високого друку з CSS для тексту, але в даному прикладі ми працюємо з установкою кольору кордонів і тіні, маніпулюючи параметром box-shadow в стилі. Тінь для тексту, це вже кому як треба.

CSS

#press {
 background: #222;
 color: #555; text-shadow: 0px 2px 3px #171717;
 box-shadow: 0px 2px 3px #555;
 -webkit-box-shadow: 0px 2px 3px #555;
 -moz-box-shadow: 0px 2px 3px #555;
 border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

#press {
background: #222;
color: #555; text-shadow: 0px 2px 3px #171717;
box-shadow: 0px 2px 3px #555;
-webkit-box-shadow: 0px 2px 3px #555;
-moz-box-shadow: 0px 2px 3px #555;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

Додаємо трохи заокруглення кутів у пункті border-radius і чудовий блок готовий.


Легка Тінь

CSS Границы - Легкая Тень

Відображення легкій тіні, досягається встановленням кордонів з відтінками сірого кольору, тобто підбором основного кольору і безпосередньо відтінків нижньої межі блоку в параметрах border-bottom. Цей метод вже хороший тим, що підтримується практично всіма сучасними браузерами, так і в цілому не напружує око користувача.

CSS

#shadow {
 border: 1px solid #D6D3D3;
 border-bottom: 2px solid #C4C2C2;
 -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

#shadow {
border: 1px solid #D6D3D3;
border-bottom: 2px solid #C4C2C2;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}


Пресований

CSS Границы - Пресс

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

CSS

#pressed {
 color: #E6E0E0;
 background: #111;
 border: 1px solid #000;
 border-right: 1px solid #353535;
 border-bottom: 1px solid #353535;
 -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

#pressed {
color: #E6E0E0;
background: #111;
border: 1px solid #000;
border-right: 1px solid #353535;
border-bottom: 1px solid #353535;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}


Об’ємний

CSS Границы - Объемный блок

За основу цього методу стилізації кордонів, не особливо заморочуючись, взяв стиль виводу цитат плагіном «WP-Note», роботу якого можна зустріти майже в кожній статті мого блогу.
Трохи поекспериментував з параметрами стилю, закруглені кути взяли сталевий відблиск, м’яка тінь кордонів та чудовий блок для будь-якого контенту готовий.

CSS

#note {
 background-color: #EEF;
 color: #4D4B4B;
 border: 1px solid #999999;
 border-radius: 10px 10px;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
box-shadow: 2px 2px 3px #999;
 -webkit-box-shadow: 2px 2px 3px #999;
 -moz-box-shadow: 2px 2px 3px #999;
}

#note {
background-color: #EEF;
color: #4D4B4B;
border: 1px solid #999999;
border-radius: 10px 10px;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
box-shadow: 2px 2px 3px #999;
-webkit-box-shadow: 2px 2px 3px #999;
-moz-box-shadow: 2px 2px 3px #999;
}


Вдавлені Лінії

CSS Границы - Вдавленные Линии

Ідея звичайно не нова, часто використовується така техніка створення списків і вертикальних меню. Хороший приклад — блог вже знайомого нам Soh Tanaka. Досягається простим поєднанням верхньої і нижньої меж з різними відтінками кольору фону. Треба завжди мати на увазі, що first-child і last-child селектори CSS не підтримуються старими браузерами. І це в даний час є скалкою в дупі, для всіх майстрів намагаються йти в ногу з часом. Щоб обійти цей косяк, ви можете використовувати деякі плагіни JQuery, для підтримки старих браузерів. Хоча я вважаю, що пора вже припиняти підлаштовуватися під тупорилі браузери, нехай краще вони «лягають під нас» ( мріяти не шкідливо ).

CSS

#indented ul{
 margin: 20px 0; padding: 0;
list-style: none;
}
#indented ul li {
 border-top: 1px solid #333;
 border-bottom: 1px solid #111;
}
#indented ul li:first-child {border-top: none;}
#indented ul li:last-child {border-bottom: none;}
#indented ul li a {
 padding: 10px;
display: block;
color: #fff;
 text-decoration: none;
}
#indented ul li a:hover {background: #111;}

#indented ul{
margin: 0 20px; padding: 0;
list-style: none;
}
#indented ul li {
border-top: 1px solid #333;
border-bottom: 1px solid #111;
}
#indented ul li:first-child {border-top: none;}
#indented ul li:last-child {border-bottom: none;}
#indented ul li a {
padding: 10px;
display: block;
color: #fff;
text-decoration: none;
}
#indented ul li a:hover {background: #111;}


Скошені Кордону

CSS Скошенные Границы изображений

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

CSS

#beveled img {margin: 20px 20px 0 20px;}
img.light {
outline: 1px solid #ddd;
 border-top: 1px solid #fff;
 padding: 10px;
background: #f0f0f0;
}
img.dark {
outline: 1px solid #111;
 border-top: 1px solid #555;
 padding: 10px;
background: #333;
}

#beveled img {margin: 20px 20px 0 20px;}
img.light {
outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;
}
img.dark {
outline: 1px solid #111;
border-top: 1px solid #555;
padding: 10px;
background: #333;
}


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

На сьогодні мабуть і все. Сьогодні ми з вами розглянули лише кілька, відмінних на мій погляд, прикладів оформлення кордонів елементів сторінки, без яких не обходиться жоден
мало – мальськи нормальний сайт.

Іноді мені здається
Що життя на землі
Це просто перше коло пекла…

7 Paca

Програма для швидкого і зручного накладення різних ефектів на зображення, конвертації з одного формату в інший (з встановленням якості стиснення) Image Effect дозволяє накладати ефекти в реальному часі без виклику будь-яких додаткових вікон.

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

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