Kusintha kwa CSS3 Kupanga Zotsatira zabwino za Fade
Olemba webusaiti akhala akulakalaka kulamulira kwambiri masamba omwe adalenga pamene CSS3 ikuwonekera. Zatsopano zatsopano zomwe zinayambika mu CSS3 zinapereka a webusaiti akatswiri kuti athe kuwonjezera zotsatira za Photoshop-monga masamba awo. Izi zinaphatikizapo katundu monga mithunzi yamphongo ndi miyala , mipiringidzo, ndi zina. CSS3 inayambitsanso zithunzithunzi zofanana ndi zomwe zingagwiritsidwe ntchito popanga zabwino pakati pa malo.
Chinthu chimodzi chabwino kwambiri chomwe mungathe kuwonjezerapo pazinthu zomwe zili mu webusaiti yanu pogwiritsa ntchito CSS3 ndikuwathandiza kuti alowemo ndi kutuluka pogwiritsa ntchito kuphatikiza kwa zinthu zowonongeka ndi kusintha. Imeneyi ndi njira yosavuta komanso yothandizira kuti masamba anu azikhala othandizana kwambiri popanga malo osokonezeka omwe akuwonekera pamene mlendo wachitsulo amachititsa chinachake, monga kuthamangira pa chinthucho.
Tiyeni tiwone momwe kulili kosavuta kuwonjezera izi zowonetserako zochitika kuzinthu zosiyanasiyana pa masamba anu a intaneti.
Lolani & # 39; s Kusintha Koyenda pa Hover
Titiyambe kuyang'ana momwe tingasinthire kuonekera kwa fano pamene kasitomala akugwedeza pa chinthucho. Kwa chitsanzo ichi (HTML ikuwonetsedwa m'munsimu) Ndikugwiritsa ntchito fano ndi chikhalidwe cha kalasi.
Kuti tiwongolere, tikuwonjezera malamulo a kalembedwe ndi ma CSS stylesheet:
.greydout {
-boma-opacity: 0.25;
-maz-opacity: 0.25;
opacity: 0.25;
}}
Zokonzera izi zogwiritsa ntchito zimamasulira 25%. Izi zikutanthauza kuti chithunzichi chidzawonetsedwa ngati 1/4 chachiwonetsero chake. Opaque kwathunthu popanda kuwonetseredwa kungakhale 100% pamene 0% adzakhala owonetsetsa bwino.
Kenaka, kuti fanolo liwoneke bwino (kapena molondola, kuti likhale losavuta kwambiri) pamene mbewa ikugwedezeka pamwamba pake, mungawonjezerepo: kalasi yonyenga:
.greydout: hover {
-boma-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}}
Mudzazindikira kuti, pa zitsanzo izi, ndikugwiritsa ntchito wogulitsa zotsatila za malamulo kuti zitsimikizire kumbuyo kwa machitidwe akale a ma browser. Ngakhale kuti izi ndizochitika zabwino, zenizeni ndizimene ulamuliro wodalirika tsopano ukuthandizidwa ndi osatsegula ndipo ndi otetezeka kwambiri kuti asiye awo wogulitsa prefixed mizere. Komabe, palinsobe chifukwa chosawerengera izi zowonjezera ngati mukufuna kutsimikizira thandizo lamasinthidwe akale. Onetsetsani kuti mukutsatira njira yabwino yovomerezera chilankhulocho ndi chizoloŵezi chozoloŵera, chosasunthika cha kalembedwe.
Ngati mwagwiritsa ntchito izi pa siteti, muwona kuti kusintha kotereku ndiko kusintha kwakukulu. Choyamba ndi imvi ndipo siziri, ndipo palibe malire pakati pa awiriwo. Zili ngati kusinthana kwazitali - kutseka kapena kutseka. Izi zikhoza kukhala zomwe mukufuna, koma mungafunenso kuyesa kusintha kochepa.
Kuti muwonjezere zotsatira zabwino kwambiri ndikupangitsa kuti izi zikhale zochepa, mukufuna kuwonjezera katundu wopita ku gulu la .Greydout:
.greydout {
-boma-opacity: 0.25;
-maz-opacity: 0.25;
opacity: 0.25;
-webkit-kusintha: zonse zitatu zithetse;
-kusintha kwa -moz: zonse zitatu zithetse;
-masinthidwe-kusintha: zonse zitatu zimasintha;
-kusintha: zonsezi zitatu;
kusintha: zonse zitatu zimasintha;
}}
Ndili nambala iyi, kusintha kumeneku kungasinthe pang'onopang'ono osati kungosintha mwadzidzidzi.
Apanso, tikugwiritsa ntchito malamulo angapo ogulitsa prefixed pano. Kusintha sikungathandizidwenso monga opacity, kotero izi zisanachitike.
Chinthu chimodzi choyenera kukumbukira pamene mukukonzekera kuyankhulana ndizomwe makina osindikizira alibe malo "othamanga", choncho zotsatirazi zimatayika kwa aliyense wogwiritsa ntchito chipangizo chowonekera ngati foni. Kusinthako kumachitika kawirikawiri, koma kumachitika mofulumira kwambiri moti sangathe kuwona. Izi ndi zabwino ngati mukuwonjezera ichi ngati bonasi zotsatira, koma pewani kusintha komwe kukuyenera kuwonedwa kuti zokhutiritsidwe.
Kutuluka Ndikothekera Kwambiri
Simusowa kuti muyambe ndi chithunzi chosasunthika, mutha kugwiritsa ntchito kusintha ndi kutsegula kuti muwonongeke kuchokera ku chithunzi chokwanira. Pogwiritsa ntchito chithunzi chomwecho, ndi gulu lokhalitsa:
chiwerengero = "chopulumutsidwa">
Mofanana ndi kale, mumasintha mawonekedwe pogwiritsira ntchito: Kusankha wosankha:
.ndifadeout {
-webkit-kusintha: zonse ziwiri zosavuta;
-kusintha kwamasimu: zonse ziwiri zosavuta;
-masinthidwe-kusintha: zonse ziwiri zodzikongoletsa;
-kusintha: zonse ziwiri zosavuta;
kusintha: zonse ziwiri zosavuta;
}}
.kutsogoza: hover {
-boma-opacity: 0.25;
-maz-opacity: 0.25;
opacity: 0.25;
}}
Mu chitsanzo ichi, chithunzicho chikanasintha kuchoka pazomwe zimakhala zosaoneka bwino - zosiyana ndi chitsanzo chathu choyamba.
Kupita Patsogolo kwa Zithunzi
Ndizotheka kuti mungagwiritse ntchito masomphenyawa ndikuwonetsa zithunzi, koma simangogwiritsa ntchito zithunzi ndi zotsatira za CSS. Mukhoza kupanga zolemba za CSS-zolemba zomwe zimafalikira pokhapokha ndikuzigwira. Mukanangotulutsa mwayi pogwiritsa ntchito: Kuchita masewera olimbitsa thupi ndikuyika kusintha kwa kalasi yomwe imatanthawuza batani. Dinani ndi kugwira batani ili kuti muone zomwe zimachitika.
N'zotheka kupanga chinthu chilichonse chowonetseratu chimafalikira pang'onopang'ono. Muchitsanzo ichi ndikusintha kuonekera kwa div ndi mtundu wa mawu pamene mbewa ikutha. Nazi CSS:
#myDiv {
m'lifupi: 280px;
zojambulajambula: # 557A47;
mtundu: #dfdfdf;
padding: 10px;
-webkit-kusintha: zonse 4s zovuta -s 0s;
-masintha -moz: zonse 4s zovuta -s 0s;
-masinthidwe-kusintha: 4s -s-outs 0s;
-kusintha: zonse 4s zovuta -s 0s;
kusinthika: zonse 4s zovuta -s 0s;
}}
#myDiv: hover {
-boma-opacity: 0.25;
-maz-opacity: 0.25;
opacity: 0.25;
Mtundu: # 000;
}}
Mitundu Yogwiritsa Ntchito Njira Yopindulitsa Ingapindule ndi Kusintha Kwachiyambi
M'kuyenda kosavutako, mndandanda wa mzere umatha pang'onopang'ono mkati ndi kunja monga ine phokoso pamwamba pa menyu zinthu. Nawa HTML:
- Kunyumba
- Zolemba za CSS3
- CSS3 Properties
Ndipo apa pali CSS:
msampha wa #Nav {list-style: none; }}
ul # chitsanzoNav li {
kusonyeza: mkati;
sungunulani: kumanzere;
padding: 5px 15px;
malire: 0 5px;
-webkit-kusintha: onse awiri ofanana;
-kusintha kwamasimu: onse awiri ofanana;
-masinthidwe-kusintha: onse awiri ofanana;
-kusintha: zonse ziwiri;
kusintha: zonse ziwiri;
}}
msampha #Nav li a {malemba-chojambula: palibe; }}
msampha wa # #Nav li: hover {
zojambulajambula: # DAF197;
}}
Zothandizira Otsata
Monga momwe ndakhudzira maulendo angapo kale, mafashoniwa ali ndi chithandizo chabwino kwambiri cha osatsegula, kotero muyenera kukhala omasuka kuzigwiritsa ntchito popanda mantha. Chokhachokha pa izi ndimasinkhulidwe akale a Internet Explorer, koma ndi chisankho chaposachedwa cha Microsoft kuthetsa chithandizo cha Mabaibulo onse a IE pansipa 11, asakatuli akalewa akukhala ochepa - ndipo zenizeni, ngati msakatuli wamkulu sali onetsetsani kuti kusintha kumeneku sikuyenera kukhala vuto lalikulu. Malingana ngati mutatsegula zotsatirazi kuti mukhale osangalatsa komanso musadalire kuti ayendetse galimoto kapena kuti awulule zinthu zofunika, ndiye kuti asakatuli akale omwe sagwiritse ntchito zotsatirazi amapeza mwayi wosangalatsa, koma ogwiritsa ntchito pazamasamba dziwani kusiyana, makamaka ngati angagwiritse ntchito webusaitiyi kukhala yachilendo ndi kupeza zomwe akufunikira.
Zosangalatsa Zowonjezera; Sintha Zithunzi Zili
Pano pali chitsanzo cha momwe mungaperekere chithunzi chimodzi kupita ku china. Gwiritsani ntchito HTML:
Ndipo CSS yomwe imapangitsa munthu kukhala wowonekera momveka bwino pamene winayo amamveka bwino ndipo kenako kusintha kumasintha izi:
.swapMe img {-webkit-kusintha: zonse zodzikongoletsa; -kusintha kwamasimu: zonsezi-zovuta; -masinthidwe: zonsezo zimakhala zovuta; -kusinthika: zonse zimakhala zovuta; kusintha: zonse zimakhala zovuta; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }}