Рамка 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 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 не дае такога разнастайнасці, як ўласная ініцыятыва. Экспромт - вялікае пачатак, і нішто не перашкаджае распрацоўніку фарміраваць уласныя рамкі. Тым больш пры ўсіх дасягненнях інтэрнэт-тэхналогій і магчымасцях дзеючых стандартаў ёсць шмат перспектыўных ідэй, заснаваных на рэальных недапрацоўках існуючага сінтаксісу, які (па вызначэнні) заўсёды быў строга фармальным.

У прыватнасці, калі ўжо і ствараць рамкі тых ці іншых элементаў, то ўяўляецца мэтазгодным гэта рабіць комплексна. Вылучыўшы ў асобныя тэгі боку і куты некаторай вобласці, можна атрымаць цудоўныя эфекты. А прызначыўшы адпаведныя апрацоўшчыкі, можна ствараць дынамічныя элементы старонкі, змяняючы становішча, формы і змест.