Рамка css: експромт і ефект
Каскадні таблиці стилів (CSS) при всій своїй логічної простоті дозволяють не тільки створити ефектне дизайнерське рішення, а й надати елементам реальна дія, емулювати виконання реального коду.
Будь-візуальний тег HTML-розмітки - прямокутна область певної структури і змісту. Елемент містить вказівку координат, розмірів, відступів, квітів, шрифту, його накреслення і пр. Рамка CSS-елемента уточнює зайняту їм область, розташовуючись від її кордону всередину на позначену в описі ширину.
синтаксис опису
Область розміщення елементу задається координатами щодо лівого верхнього кута сторінки (left, top), розміром по горизонталі і вертикалі (width, height). Все оформлення і анімація елемента виконуються парами: "властивість: значення".
Опис виконують безпосередньо в коді сторінки, на вставці style або в окремому файлі, вказавши на нього посиланням LINK. синтаксис:
#name {властивість: значення-властивість: значення-властивість: значення-...}
або
.name {властивість: значення-властивість: значення-властивість: значення-...}
Відео: CSS
Ім`я може бути також 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.
Відео: CSS box model
Тут вказані розміри кожної сторони також послідовно, починаючи з верхньої, за годинниковою стрілкою, колір - синій, а стиль - точковий.
border-color: blue red green black;
в цьому описі окремо вказано колір кожного боку. Властивість border може включити в себе відразу кілька параметрів, а кути рамки можна закруглити:
border: 1px green solid-
border-radius: 0px 4px 8px 12px;
-moz-border-radius: 0px 4px 8px 12px;
-webkit-border-radius: 0px 4px 8px 12px;
Від того, як зробити рамку в CSS, залежить зручність роботи користувача, оскільки зазвичай цей стильовий ефект використовується в технічних цілях: коли важливо показати точно місце або розмір області на сторінці.
Товщина рамки і її призначення
Вибираючи товщину рамки, можна використовувати px, pt, em ..., але слід враховувати, що вона завжди знаходиться всередині області елемента. Важко припустити, що рамка CSS має дизайнерське призначення, але з технічної сторони її дуже зручно використовувати для виділення елементів сторінки.
Якщо в основному класі рамка заблокована, тобто відсутня, то, вказавши її в псевдокласів: hover, можна показати відвідувачеві елемент сторінки, коли на ньому знаходиться курсор миші, наприклад виділити пункт меню. Іноді необхідно виділити щось, клікнувши на картинку, або перетягнути щось кудись. Тут дуже зручно використовувати точкову рамку, а не міняти фон елемента або його зміст.
Деякі додатки потребують виділення області сторінки або виборі елементів для подальшої обробки. В цьому випадку можна в момент кліка створити div з рамкою і до тих пір, поки відвідувач не відпустить кнопку мишки, змінювати його розміри, показуючи візуально результат вибору.
За межами передбаченого
Уроки CSS дуже цікаві, має також значення дослідження кодів сторінок популярних сайтів. Однак власний ресурс повинен бути унікальним, у нього має бути власне обличчя.
Передбачена синтаксисом рамка CSS не дає такого різноманіття, як власна ініціатива. Експромт - велике початок, і ніщо не заважає розробнику формувати власні рамки. Тим більше при всіх досягненнях інтернет-технологій і можливості діючих стандартів є багато перспективних ідей, заснованих на реальних недоробки існуючого синтаксису, який (за визначенням) завжди був строго формальним.
Зокрема, якщо вже й створювати рамки тих чи інших елементів, то за доцільне це робити комплексно. Виділивши в окремі теги боку і кути деякої області, можна отримати приголомшливі ефекти. А призначивши відповідні обробники, можна створювати динамічні елементи сторінки, змінюючи положення, форми і зміст.
