Ўласцівасць css "празрыстасць" - просты спосаб зрабіць дызайн сайта цікавей

Сёння стварэнне дызайну сайта становіцца сапраўдным мастацтвам. Гэта не проста набор элементаў старонкі пэўнага колеру і памеру, шрыфты розных стыляў і тэматычныя малюнкі. Для таго каб зрабіць сайт непадобным на іншыя, прыцягнуць увагу наведвальнікаў і накіраваць яго на тыя ці іншыя элементы, выкарыстоўваецца велізарная колькасць спосабаў і інструментаў. Сярод іх маецца вельмі папулярнае ўласцівасць css - празрыстасць. Гэтая тэхніка даволі модная і эфектная, а таму прымяняецца часта. Надаць празрыстасць можна розных аб'ектах старонкі сайта - тэксту, цэламу блоку або малюнку, напрыклад. Дасягаецца яна таксама рознымі спосабамі. Разгледзім іх ніжэй.

Параметры заданні празрыстасці элементаў

Параметраў, якія дазваляюць рэгуляваць ступень празрыстасці элементаў, некалькі. Выкарыстоўваюцца яны ў залежнасці ад канкрэтных мэтаў, а таксама браўзэра, пад які "падганяецца" дызайн. Да іх ставяцца наступныя ўласцівасці:

• opacity;
• filter;
• PNG-малюнак у якасці фону.

Значэння ўласцівасці css "празрыстасць" змяняюцца наступным чынам: чым больш лічба, тым ніжэй узровень празрыстасці элемента. У opacity яна вар'іруецца ад 0 да 1, у filter - ад 10 да 100. Прычым апошні выкарыстоўваецца для браўзэра Interet Explorer, а для ўсіх астатніх прымяняецца ўласцівасць opacity.

Празрыстасць малюнка (зменлівая)

Пачнем з варыянту, калі празрыстасць будзе выяўляцца пры навядзенні на элемент курсора мышкі.

Разгледзім, як задаваць празрыстасць карцінкі. CSS прапануе два варыянты. Для гэтага неабходна прапісаць яе непасрэдна ў кодзе html-дакумента наступным чынам:

1. Паказваем шлях да выявы.
2. Вызначаем параметры празрыстасці пры навядзенні курсора і няма. Для гэтага выкарыстоўваем ўласцівасці onmouseover і onmouseout, у якіх прапісваем значэння opacity і filter.

Гэтыя ж характарыстыкі можна прапісаць у css-дакуменце, а ў зыходным кодзе дадаць толькі спасылку на яго. Вынікі атрымаюцца аднолькавыя.

Празрыстасць тэксту і блокаў старонкі

Што тычыцца тэксту або блока (празрыстасць div), css прапануе скарыстацца варыянтам, аналагічным стварэнню празрыстасці малюнка, гэта значыць выкарыстоўваць падлучаны css-файл, у якім будуць задавацца патрэбныя параметры. Можна пайсці і больш простым шляхам. Пры заданні стыляў блока div style або тэксту p прапісаць наступны html-код для элементаў onmouseover і onmouseout. Абодва варыянты працуюць і даюць патрэбны вынік.

празрыстасць пастаянная

У некаторых выпадках празрыстасць аб'екта, элемента дызайну або тэксту патрабуецца задаць на пастаяннай аснове. У дадзенай сітуацыі рашэнне яшчэ прасцей, чым пры навядзенні курсора мышы.

Для элемента css празрыстасць будзе задавацца наступным кодам. У блоку div style прапісваем значэння для background (напрыклад, # ff8800), opacity (н-р, 0.5), а таксама шырыню (width) і водступ (padding).

Для карцінкі ў код ўносім значэння opacity і filter, а таксама паказваем шлях да выявы.

RGBA-метад

Існуюць і іншыя варыянты выкарыстання дадзенага ўласцівасці css: празрыстасць можна прымяніць да фонавым колеры якога-небудзь элемента дызайну. Для гэтага выкарыстоўваецца метад RGBA. Першыя тры літары азначаюць асноўныя колеры (чырвоны, целеный, сіні), а апошняя - alpha, якая і задае ўзровень празрыстасці. Выкарыстоўваючы RGBA-фармат, прапісваем ступень празрыстасці, паказваючы яе ў апошняй лічбе. Напрыклад, так: background: rgba (240,2,33,0.4035).

заключэнне

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