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

³äåî - ßê çðîáèòè ïðîçîðèé ôîí êàðòèíêè â Photoshop (ôîòîøîï)

ïðîçîðèé ôîí - îäèí ç åëåìåíò³â ãðàô³÷íîãî äèçàéíó, ùî äîçâîëÿº ðåàë³çóâàòè çàâäàííÿ îôîðìëåííÿ ñàéòó. ³í ÷àñòî âèêîðèñòîâóºòüñÿ íà ðåñóðñàõ ð³çíî¿ ñïðÿìîâàíîñò³, òîìó êîæíîìó ôàõ³âöþ â îáëàñò³ ñàéòîáóäóâàííÿ êîðèñíî çíàòè ïðèíöèïè éîãî ñòâîðåííÿ.
²íñòðóêö³ÿ
1
гçíèöÿ ì³æ ïðîçîðèì ³ íàï³âïðîçîðèì ôîíîì ñêëàäàºòüñÿ â çíà÷åíí³ ïàðàìåòðà, ùî ïîçíà÷ຠñòóï³íü ïðîçîðîñò³.



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

Ïîä³ëèñÿ â ñîö ìåðåæàõ:

Óâàãà, ò³ëüêè ÑÜÎÃÎÄͲ!
Ñõîæ³
» » ßê çðîáèòè ïðîçîðèé ôîí html