ßê çðîáèòè ïðîçîðèé ôîí html

Ïðîçîðèé ôîí - Îäèí ç åëåìåíò³â ãðàô³÷íîãî äèçàéíó, ùî äîçâîëÿº ðåàë³çóâàòè çàâäàííÿ îôîðìëåííÿ ñàéòó. ³í ÷àñòî âèêîðèñòîâóºòüñÿ íà ðåñóðñàõ ð³çíî¿ ñïðÿìîâàíîñò³, òîìó êîæíîìó ôàõ³âöåâ³ â îáëàñò³ ñàéòîáóäóâàííÿ êîðèñíî çíàòè ïðèíöèïè éîãî ñòâîðåííÿ.
ßê çðîáèòè ïðîçîðèé ôîí html




²íñòðóêö³ÿ
1
гçíèöÿ ì³æ ïðîçîðèì ³ íàï³âïðîçîðèì ôîíîì ïîëÿãຠâ çíà÷åíí³ ïàðàìåòðà, ùî ïîçíà÷ຠñòóï³íü ïðîçîðîñò³.
2
Îäèí ç³ ñïîñîá³â çðîáèòè ôîí íàï³âïðîçîðèì - âèêîðèñòîâóâàòè àòðèáóò opacity. Îäíàê éîãî âëàñòèâîñò³ ïîøèðþþòüñÿ íà âñ³ áåç âèíÿòêó åëåìåíòè, ÿê³ ïîòðàïëÿþòü â ïîëå 䳿. Îòæå, ðàçîì ç ôîíîì ïðîçîðèìè ñòàþòü çîáðàæåííÿ, à òàêîæ áë³äíå íàïèñ.  ïðèíöèï³, opacity ìîæå óñï³øíî çàñòîñîâóâàòèñÿ äëÿ ñòâîðåííÿ åôåêòó íàêëàäàííÿ. Âèêîðèñòîâóºòüñÿ â³í â íàñòóïí³é çâ'ÿçö³ òåã³â: Òåìà

Òåêñò
• Opacity - çíà÷åííÿ ïðîçîðîñò³. • Background: url (àäðåñà êàðò³íê³.jpg) - çîáðàæåííÿ, ÿêå ïîâèííî îïèíèòèñÿ ï³ä ôîíîì. • Background: # ïàðàìåòð êîëüîðó - êîë³ð ôîíà. • Padding: 10px - òîâùèíà ïîë³â åëåìåíòà.
3
Ùå îäèí âàð³àíò, ÿê ìîæíà çàäàòè ïðîçîð³ñòü. Òåìà âêëàäêè
Òåêñò
• Background: url (bg.gif) - ôîíîâèé ìàëþíîê. • Position: relative - â³äíîñíå ïîçèö³îíóâàííÿ. • Opacity: 0.5 - çíà÷åííÿ ïðîçîðîñò³. • Filter: alpha (Opacity = 50) - çíà÷åííÿ ïðîçîðîñò³ â IE. • Position: absolute - àáñîëþòíå ïîçèö³îíóâàííÿ. • Left: 0- top: 0 - ïîëîæåííÿ øàðó.
4
Äëÿ âèð³øåííÿ ïîñòàâëåíîãî çàâäàííÿ ìîæíà âèêîðèñòîâóâàòè ìîæëèâîñò³ ïðîãðàìè Adobe Photoshop. Äëÿ öüîãî íàìàëþéòå ôîí ç íåîáõ³äíèì ð³âíåì ïðîçîðîñò³ òà çáåðåæ³òü éîãî ó ôîðìàò³ png, à ïîò³ì âñòàâòå éîãî â êîä background: url (opacity.png). Òåìà âêëàäêè
Òåêñò íà ïðîçîðîìó / íàï³âïðîçîðîìó ôîíå
Ïåðåãëÿä³â: 4611

Óâàãà, ò³ëüêè ÑÜÎÃÎÄͲ!