Estilo ng Iyong Mga Imahe at Gumamit ng Mga Larawan sa Estilo
Maraming tao ang gumagamit ng CSS upang ayusin ang teksto, binabago ang font, kulay, laki at higit pa. Ngunit isang bagay na madalas na nakalimutan ng maraming tao ay maaari mo ring gamitin ang CSS na may mga larawan.
Pagbabago ng Imahe mismo
Hinahayaan ka ng CSS na ayusin kung paano ipinapakita ang imahe sa pahina. Maaari itong maging kapaki-pakinabang para mapanatiling pare-pareho ang iyong mga pahina. Sa pamamagitan ng pagtatakda ng mga estilo sa lahat ng mga imahe, lumikha ka ng isang standard na hitsura para sa iyong mga larawan. Ang ilan sa mga bagay na maaari mong gawin:
- Magdagdag ng hangganan o balangkas sa paligid ng mga larawan
- Alisin ang may-kulay na hangganan sa paligid ng mga naka-link na larawan
- Pagsasaayos ng lapad at / o taas ng mga imahe
- Magdagdag ng isang drop shadow
- I-rotate ang imahe
- Baguhin ang mga estilo kapag ang imahe ay hovered sa ibabaw
Ang pagbibigay sa iyong larawan ng isang hangganan ay isang magandang lugar upang magsimula. Ngunit dapat mong isaalang-alang ang higit pa sa hangganan - isipin ang buong gilid ng iyong imahe at ayusin ang mga margin at padding pati na rin. Ang isang larawan na may manipis na itim na hangganan ay mukhang maganda, ngunit ang pagdaragdag ng ilang padding sa pagitan ng hangganan at ang imahe ay maaaring maging mas mahusay.
img {
border: 1px solid black;
padding: 5px;
}
Magandang ideya na laging mag-link ng mga di-mapalamuting larawan , kung maaari. Ngunit kapag ginawa mo, tandaan na ang karamihan sa mga browser ay nagdaragdag ng may kulay na border sa paligid ng imahe. Kahit na ginamit mo ang kodigo sa itaas upang baguhin ang hangganan, ang link ay sasapaw na maliban kung iyong aalisin o baguhin ang hangganan sa link pati na rin. Upang gawin ito dapat mong gamitin ang tuntunin ng CSS anak upang alisin o palitan ang hangganan sa paligid ng mga naka-link na larawan:
img> a {
border: none;
}
Maaari mo ring gamitin ang CSS upang baguhin o itakda ang taas at lapad ng iyong mga imahe. Bagaman hindi magandang ideya na gamitin ang browser upang ayusin ang mga sukat ng imahe dahil sa mga bilis ng pag-download, nakakakuha sila ng mas mahusay sa pagpapalit ng mga imahe nang sa gayon ay mukhang maganda pa rin ang mga ito. At sa CSS maaari mong itakda ang iyong mga imahe sa lahat ng isang karaniwang lapad o taas o kahit na itakda ang mga sukat na may kaugnayan sa lalagyan.
Tandaan, kapag binabago mo ang mga larawan, para sa pinakamahusay na mga resulta, dapat mo lamang baguhin ang laki ng isang dimensyon - ang taas o ang lapad. Ito ay enusre na ang imahe mapigil ang aspect ratio nito, at sa gayon ay hindi mukhang kakaiba. Itakda ang iba pang halaga sa auto o iwanan ito upang sabihin sa browser upang panatilihing pare-pareho ang aspect ratio.
img {
lapad: 50%;
taas: auto;
}
Nag-aalok ang CSS3 ng isang solusyon sa problemang ito sa mga bagong katangian ng object-fit at object-position. Sa mga katangian na ito, maaari mong tukuyin ang eksaktong taas at lapad ng imahe at kung paano dapat hawakan ang aspect ratio. Maaari itong lumikha ng mga epekto ng letterboxing sa paligid ng iyong mga larawan o pag-crop upang makuha ang imahe upang magkasya sa laki na kinakailangan.
Habang ang CSS3 object-fit at object-posisyon properties ay hindi pa suportado sa marami, may iba pang mga katangian ng CSS3 na mahusay na sinusuportahan sa karamihan sa mga modernong browser na maaari mong gamitin upang baguhin ang iyong mga imahe. Ang mga bagay na tulad ng drop shadows, bilugan na mga sulok, at mga transformation upang iikot, hilig, o ilipat ang iyong mga larawan ay gumagana lahat ngayon sa karamihan sa mga modernong browser. Pagkatapos ay maaari mong gamitin ang mga transition ng CSS upang gawin ang mga pagbabago ng mga imahe kapag hovered sa, o nag-click, o pagkatapos lamang ng isang tagal ng panahon.
Paggamit ng Mga Larawan bilang Mga Background
Pinadadali ng CSS na lumikha ng magarbong mga background sa iyong mga larawan.
Maaari kang magdagdag ng mga background sa buong pahina o sa isang partikular na elemento lamang. Madaling lumikha ng isang larawan sa background sa pahina gamit ang property na imahen sa background:
katawan {
background-image: url (background.jpg);
}
Baguhin ang tagapili ng katawan sa isang partikular na elemento sa pahina upang ilagay ang background sa isang elemento lamang.
Ang isa pang nakakatuwang bagay na maaari mong gawin sa mga imahe ay lumikha ng isang imahe sa background na hindi mag-scroll sa iba pang bahagi ng pahina - tulad ng isang watermark. Ginagamit mo lang ang estilo ng background-attachment: naayos; kasama ng iyong larawan sa background. Kabilang sa iba pang mga opsyon para sa iyong mga background ang paggawa ng mga ito ng tile lamang pahalang o patayo gamit ang background-ulitin ang ari-arian.
Isulat ang background-repeat: repeat-x; upang i-tile ang imahe nang pahalang at background-ulitin: ulit-y; sa tile patayo. At maaari mong iposisyon ang iyong larawan sa background na may background-position property.
At ang CSS3 ay nagdaragdag ng higit pang mga estilo para sa iyong mga background pati na rin. Maaari mong i- stretch ang iyong mga imahe upang umangkop sa anumang laki ng background o itakda ang larawan sa background upang masukat sa laki ng window . Maaari mong baguhin ang posisyon at pagkatapos ay i-clip ang larawan sa background. Ngunit isa sa mga pinakamahusay na bagay tungkol sa CSS3 ay na maaari mo na ngayong mag-layer ng maraming mga larawan sa background upang lumikha ng mas masalimuot na mga epekto.
Tinutulungan ng HTML5 ang Mga Estilo ng Larawan
Ang elemento ng FIGURE sa HTML5 ay dapat ilagay sa paligid ng anumang mga larawan na maaaring tumayo nang mag-isa sa loob ng dokumento. Ang isang paraan upang isipin ang tungkol dito ay kung ang imahe ay maaaring lumitaw sa isang apendiks, pagkatapos ito ay dapat na nasa loob ng elemento ng PAGKAROON. Pagkatapos ay maaari mong gamitin ang elementong iyon at ang elementong FIGCAPTION upang magdagdag ng mga estilo sa iyong mga larawan.