Рамки і межі

Влад Мержевич

За допомогою CSS можна додати рамку до елементу кількома способами. Головним чином використовується властивість border, як найбільш універсальна, а також outline і, здивовано, box-shadow, основне завдання якого – створення тіні. Далі розглянемо ці методи та їх відмінності один від одного.

Властивість outline

Найпростіша властивість для створення рамок. Має ті ж параметри, що й border, але суттєво відрізняється від нього деякими деталями:

  • outline виводиться навколо елемента (border всередині);
  • outline не впливає на розміри елемента (border додається до ширини та висоти елемента);
  • outline можна встановити тільки навколо елемента цілком, але ні в якому разі не на окремих сторонах (border можна використовувати для будь-якої сторони або всіх одразу);
  • на outline не діє радіус закруглення, заданий властивістю border-radius (на border діє).

Виникає питання – у яких випадках потрібен outline, коли його роль, незважаючи на перераховані відмінності, повністю бере на себе border? Ситуацій не так і багато, але вони зустрічаються:

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

Різнокольорові рамки

Треба розуміти, що outline ні в якому разі не замінює border і може існувати разом з ним, як показано в прикладі 1.

Приклад 1. Створення рамки 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border і outline</title>
  <style>
   div {
    width: 100px;	height: 100px; /* Розміри */
    background: #fc0; /* Колір фону */
    outline: 2px solid #000; /* Чорна рамка */
    border: 3px solid #fff; /* Біла рамка */
    border-radius: 10px; /* Радіус закруглення */
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

У цьому прикладі навколо елемента додається чорна рамка, яка відокремлена від фону білою каймою (рис. 1).

Рис. 1. Рамка навколо елемента

Рамка при використанні :hover

При додаванні рамки через border відбувається збільшення ширини елемента, що досить помітно при поєднанні border та псевдокласу :hover. Є два способи, як це «перемогти». Найпростіше – замінити border на outline, яке, як ми знаємо, не впливає на розміри елемента (приклад 2).

Приклад 2. Рамка при наведенні

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>outline</title>
  <style>
   div {
    width: 100px; height: 100px; /* Розміри */
    background: #fc0; /* Колір фону */
    border: 3px solid #fff; /* Біла рамка */
    border-radius: 10px; /* Радіус закруглення */
    display: inline-block;
   }
   div:hover {
    outline: 2px solid #000; /* Чорна рамка */
   }
  </style>
 </head>
 <body>
  <div></div>
  <div></div>
 </body>
</html>

outline не завжди підходить, принаймні тому, що на нього закруглення кутів не діє. Тут підійде другий метод – додаємо невидиму рамку або рамку, що співпадає з кольором фону, а потім змінюємо її параметри при наведенні (приклад 3). Тоді жодного зміщення елемента відбуватися не буде, оскільки рамка відразу є. Але завжди пам'ятайте, що ширина елемента при цьому складається із значень width, border зліва та border справа. Аналогічно із висотою.

Приклад 3. Рамка при наведенні

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border</title>
  <style>
   div {
    width: 100px; height: 100px; /* Розміри */
    background: #fc0; /* Колір фону */
    border: 3px solid #fff; /* Біла рамка */
    border-radius: 10px; /* Радіус закруглення */
    display: inline-block;
    border: 2px solid transparent; /* Невидима рамка */
   }
   div:hover {
    border: 2px solid black; /* Чорна рамка */
   }
  </style>
 </head>
 <body>
  <div></div>
  <div></div>
 </body>
</html>

Рамка навколо полів форми

У деяких браузерах (Chrome, Safari, останні версії Opera) навколо полів форми при отриманні ними фокусу відображається невелика кольорова рамка (рис. 2). Щоб її прибрати, досить в стилях додати до властивості outline значення none, як показано в прикладі 4.

Рис. 2. Рамка навколо полів

Приклад 4. Прибираємо рамку 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>input</title>
  <style>
   input:focus {
    outline: none; /* Ховаємо рамку */
   }
  </style>
 </head>
 <body>
  <input>
 </body>
</html>

Рамки через box-shadow

Хоча властивість box-shadow призначена для додавання тіні навколо елемента, за її допомогою можна і створювати рамки, причому такі, які неможливо зробити через border або outline. Все завдяки тому, що кількість тіней може бути необмеженою, параметри яких перераховуються через кому.

Щоб отримати рамку, перші три параметри слід встановити нульовими, вони відповідають за положення тіні та її розмиття. Четвертий параметр у даному випадку відповідає за товщину межі, а п'ятий встановлює колір рамки. Для другої рамки четвертий параметр дорівнює сумі товщин двох рамок.

У прикладі 4 показано додавання двох рамок та однієї межі справа за допомогою однієї властивості box-shadow.

Приклад 4. Використання box-shadow

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>box-shadow</title>
  <style>
   div {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 0 3px red, 
                0 0 0 6px blue,
                3px 0 0 6px orange;
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

Результат цього прикладу показано на рис. 3.

Рис. 3. Рамки, створені властивістю box-shadow

CSS3
SEO текст: Навчальний матеріал про створення рамок за допомогою CSS. Дізнайтеся, як використовувати властивості outline, border та box-shadow для створення різних рамок навколо елементів. Поглибіть знання про CSS та його можливості. #CSS3 #рамки #бордер #аутлайн #бокс-шадоу.

Часті запитання