Sinema Picha zako na Matumizi Picha katika Mitindo
Watu wengi hutumia CSS kurekebisha maandishi, kubadilisha font, rangi, ukubwa na zaidi. Lakini jambo moja ambalo watu wengi husahau mara nyingi ni kwamba unaweza kutumia CSS na picha pia.
Kubadilisha picha yenyewe
CSS inakuwezesha kurekebisha jinsi picha inavyoonekana kwenye ukurasa. Hii inaweza kuwa muhimu sana kwa kutunza kurasa zako thabiti. Kwa kuweka mitindo kwenye picha zote, unafanya kuangalia kwa kawaida kwa picha zako. Baadhi ya mambo unayoweza kufanya:
- Ongeza mpaka au muhtasari karibu na picha
- Ondoa mpaka wa rangi karibu na picha zilizounganishwa
- Kurekebisha upana na / au urefu wa picha
- Ongeza kivuli cha tone
- Zungusha picha
- Badilisha mitindo wakati picha imefungwa zaidi
Kutoa picha yako mpaka ni mahali pazuri kuanza. Lakini unapaswa kuzingatia zaidi ya mpaka - fikiria juu ya makali yote ya picha yako na kurekebisha margins na padding pia. Picha iliyo na mpaka mwembamba mweusi inaonekana nzuri, lakini kuongeza paneli kati ya mpaka na picha inaweza kuangalia hata bora.
img {
mpaka: 1px mweusi mweusi;
padding: 5px;
}
Ni wazo nzuri daima kuunganisha picha zisizo za mapambo , wakati inawezekana. Lakini wakati unapofanya, kumbuka kwamba browsers nyingi zinaongeza mpaka wa rangi karibu na picha. Hata kama unatumia kanuni hii hapo juu ili kubadilisha mpakani, kiungo kitazidisha kuwa isipokuwa unapoondoa au ukibadilisha mpaka kwenye kiungo pia. Kwa kufanya hivyo unapaswa kutumia utawala wa watoto wa CSS ili uondoe au ubadili mipaka karibu na picha zilizounganishwa:
img> {
mpaka: hakuna;
}
Unaweza pia kutumia CSS kubadilisha au kuweka urefu na upana wa picha zako. Ingawa sio wazo kuu kutumia kivinjari kurekebisha ukubwa wa picha kwa sababu ya kasi ya kupakua, wanapata vyema zaidi kwenye picha za kurekebisha ili waweze kuonekana vizuri. Na kwa CSS unaweza kuweka picha zako kwa wote kuwa upana wa urefu au urefu au hata kuweka vipimo kuwa karibu na chombo.
Kumbuka, wakati unapobadilisha picha, kwa matokeo bora, unapaswa tu resize moja - ukubwa au upana. Hii itasisitiza kwamba picha inaendelea uwiano wa kipengele chake, na hivyo haionekani kuwa ya ajabu. Weka thamani nyingine kwa auto au kuacha ili kuwaambia kivinjari ili kuweka uwiano wa kipengele thabiti.
img {
upana: 50%;
urefu: auto;
}
CSS3 hutoa suluhisho kwa tatizo hili na mali mpya ya kitu-fit na kitu-nafasi. Kwa mali hizi utakuwa na uwezo wa kufafanua urefu wa picha na upana na jinsi uwiano wa kipengele unapaswa kushughulikiwa. Hii inaweza kuunda madhara ya barua pepe karibu na picha zako au kuunganisha ili kupata picha kufanana na ukubwa unahitajika.
Ingawa vipengee vya CSS3 ambavyo havikufaa na vyema havijasaidiwa sana, bado kuna vitu vingine vya CSS3 vilivyoungwa mkono vizuri katika vivinjari vya kisasa zaidi ambavyo unaweza kutumia kurekebisha picha zako. Mambo kama vivuli vya kuacha, pembe za mviringo, na mabadiliko ya kugeuka, skew, au kusonga picha zako zote hufanya kazi sasa hivi katika vivinjari vya kisasa zaidi. Unaweza kisha kutumia mabadiliko ya CSS ili kufanya picha zibadilishane wakati zimefungwa zaidi, au zimefungwa, au baada ya muda.
Kutumia Picha kama asili
CSS inafanya urahisi kuunda asili za dhana na picha zako.
Unaweza kuongeza asili kwenye ukurasa mzima au kwa kipengele maalum. Ni rahisi kuunda picha ya asili kwenye ukurasa na mali ya picha ya historia:
mwili {
background-image: url (background.jpg);
}
Badilisha mchezaji wa mwili kwa kipengele maalum kwenye ukurasa ili kuweka background juu ya kipengele kimoja tu.
Jambo lingine la kujifurahisha unaloweza kufanya na picha ni kujenga picha ya asili ambayo haipatikani na wengine wa ukurasa - kama watermark. Unatumia kiambatisho cha mtindo wa style: fasta; pamoja na picha yako ya historia. Chaguo nyingine kwa asili yako ni pamoja na kuwafanya tile tu kwa usawa au kwa wima kwa kutumia mali ya kurudia nyuma.
Andika nyuma-kurudia: kurudia-x; kuiga picha kwa usawa na kurudia nyuma-kurudia-y; kwa tile kwa wima. Na unaweza kuweka picha yako ya asili na mali ya msimamo wa nyuma.
Na CSS3 inaongeza mitindo zaidi ya asili yako pia. Unaweza kunyoosha picha zako ili kufikia historia yoyote ya ukubwa au kuweka picha ya picha kwa kiwango na ukubwa wa dirisha . Unaweza kubadilisha msimamo na kisha funga picha ya picha. Lakini moja ya mambo bora kuhusu CSS3 ni kwamba unaweza sasa safu picha nyingi za asili ili kuunda madhara hata zaidi.
HTML5 Inasaidia Picha za Sinema
Kipengele cha FIGURE katika HTML5 kinapaswa kuwekwa karibu na picha yoyote ambayo inaweza kusimama peke ndani ya hati. Njia moja ya kufikiria ni kama picha inaweza kuonekana kwenye kiambatisho, basi inapaswa kuwa ndani ya kipengele cha FIGURE. Unaweza kisha kutumia kipengele hicho na kipengele cha FIGCAPTION ili kuongeza mitindo kwa picha zako.