Рамка CSS: експромт і ефект

Каскадні стилі (CSS) при всій своїй логічній простоті дозволяють не тільки створити ефектне дизайнерське рішення, але і надати елементів реальна дія, емулювати реального виконання коду. Будь візуальний тег HTML-розмітки - прямокутна область визначеної структури і змісту. Елемент містить вказівку координат, розмірів, відступів, кольорів, шрифту, його накреслення і пр. Рамка CSS-елемента уточнює зайняту їм область, розташовуючись від її кордону всередину на позначену в описі ширину.

Синтаксис опису

Область розміщення елемента задається координатами відносно верхнього лівого кута сторінки (left, top), розміром по горизонталі і вертикалі (width, height). Все оформлення і анімація елемента виконуються парами: "властивість : значення". Опис виконують безпосередньо в коді сторінки, на вставці style або в окремому файлі, вказавши на нього посиланням LINK. Синтаксис: #name {властивість: значення; властивість: значення; властивість: значення; } або .name {властивість: значення; властивість: значення; властивість: значення; } Ім'я може бути також p, body, html, table, td, тобто ім'ям тега HTML-розмітки. Допускається підключати опис стилю безпосередньо на елементі. Перш ніж складати власні варіанти написання стилів, не завадить подивитися, як це зроблено на популярних сайтах, зберігши код сторінки або натиснувши Ctrl-U для перегляду його безпосередньо в браузері.

Основні параметри

Власне рамка CSS для елемента представлена стилем (border-style), кольором (border-color), шириною (border-width). Можна все описати однією властивістю - border. Можна описувати кожну кордон рамки незалежно (border-top, border-bottom, border-left, border-right).


Рамка CSS описується за загальними правилами каскадних таблиць стилів: border: 3px;
border-color: red;
border-style: double dashed solid dotted. Це опис встановлює ширину рамки 3 пікселя, колір - червоний, стиль сторін: верхня сторона подвійна, права - штрихова, нижня суцільна, ліва - точкова. border-width: 1px 2px 4px 8px;
border-color: blue;
border-style: dotted. Тут вказані розміри кожної сторони також послідовно, починаючи з верхньої, за годинниковою стрілкою, колір - синій, а стиль - точковий. border-color: blue red green black; у цьому описі окремо зазначено колір кожної сторони. Властивість border може включити в себе відразу кілька параметрів, а кути рамки можна закруглити: border: 1px solid green;
border-radius: 4px 0px 8px 12px;
-moz-border-radius: 4px 0px 8px 12px;
-webkit-border-radius: 4px 0px 8px 12px; Від того, як зробити рамку в CSS, залежить зручність роботи відвідувача, оскільки зазвичай цей стильовий ефект використовується в технічних цілях: коли важливо точно показати місце або розмір області на сторінці.

Товщина рамки і її призначення

Вибираючи товщину рамки, можна використовувати px, pt, em, але слід враховувати, що вона завжди знаходиться всередині області елемента. Важко припустити, що рамка CSS має дизайнерське призначення, але з технічної сторони її дуже зручно використовувати для виділення елементів сторінки.
Якщо в основному класі рамка заблокована, тобто відсутня, то, вказавши її в псевдоклассе :hover, можна показати відвідувачеві елемент сторінки, коли на ньому знаходиться курсор миші, наприклад виділити пункт меню. Іноді необхідно виділити щось, клікнувши на картинку, або перетягнути щось кудись. Тут дуже зручно використовувати точкову рамку, а не міняти фон елемента або його утримання. Деякі програми потребують виділення області сторінки або виборі елементів для подальшої обробки. У цьому випадку можна в момент кліка створити div з рамкою і до тих пір, поки відвідувач не відпустить кнопку мишки, змінювати його розміри, показуючи візуально результат вибору.

За межами передбаченого

Уроки CSS дуже цікаві, має також значення дослідження кодів сторінок популярних сайтів. Однак власний ресурс повинен бути унікальним, у нього має бути власне обличчя. Передбачена синтаксисом рамка CSS не дає такого розмаїття, як власна ініціатива. Експромт - велике початок, і ніщо не заважає розробнику формувати власні рамки. Тим більше при всіх досягненнях інтернет-технологій та можливості діючих стандартів є багато перспективних ідей, заснованих на реальних недоліки існуючого синтаксису, який (за визначенням) завжди був суто формальним. Зокрема, якщо вже і створювати рамки тих чи інших елементів, то представляється доцільним це робити комплексно. Виділивши окремі теги сторони і кути деякій області, можна отримати приголомшливі ефекти. А призначивши відповідні обробники, можна створювати динамічні елементи сторінки, змінюючи положення, форми та зміст.