Phunzirani Kuwonjezera Zotsatira Zowala Mwamsanga Ndi Mosavuta Ndi CSS3

Onjezerani Kuwala kwa Tsamba la Webusaiti Yotsindika

Kufewa kunja kwawala komwe kunayikidwa ku chinthu pa tsamba lanu la intaneti kumapangitsa kuti elementyo iwonetsedwe kwa wowonera. Gwiritsani ntchito CSS3 ndi HTML kuti mugwiritse ntchito kuwala kumbali za kunja kwa chinthu chofunikira. Zotsatira ndi zofanana ndi kuwala kwakunja kwowonjezera chinthu mu Photoshop.

Choyamba Pangani Choyamba Kuti Chiziwala

Zowonjezera zimachitika pamtundu uliwonse, koma zimawoneka bwino pamtundu wakuda chifukwa ndiye kuwala kumakhala kosavuta. Muzithunzi zazing'ono zamphongo zazing'ono zamphongo, chigawo cha DIV chimayikidwa mu chinthu china cha DIV ndi chida chakuda. Kunja kwa DIV sikofunikira kuti kuwala, koma n'kovuta kuona kuwala kumsana woyera.

Perekani DIV gulu la kuwala:


Ikani Kukula ndi Mtundu wa Element

Mutasankha chinthu chomwe mukufuna kuti mukhale nacho, pitirizani kuwonjezera mafilimu omwe mumafuna, monga maonekedwe a msinkhu, kukula, ndi ma foni. Chitsanzo ichi ndi rectangle ya buluu; kukula kwake kufikira 147px ndi 90px; ndipo mtundu wa chibadwidwe waikidwa ku # 1f5afe, wachifumu wabuluu. Zimaphatikizapo malire kuti apange chinthucho pakati pa chida chakuda chakuda.


.lowera {
malire: auto;
m'lifupi: 147px;
kutalika: 90px;
mtundu wa kumbuyo: # 1f5afe;
}

Kuyendayenda Kumakona

Kupanga makanda ndi makona ozungulira ndi kophweka ndi CSS3. Onjezerani malo osungirako malire kumalo anu owala. Ingokumbukirani kuti mugwiritse ntchito -webkit-ndi -moz-prefixes kuti zogwirizana kwambiri.

-bomba-malire-malire: 15px;
-malo-malire-radiyo: 15px;
malire-malire: 15px;

Onjezerani Kuwala Ndi Bokosi la Shadow

Kuwala komweko kumapangidwa ndi mthunzi wa bokosi. Chifukwa chakuti mukufuna kuti iwononge chinthu chonsecho ndipo musayambe kuyatsa mbali imodzi ngati mthunzi, mumayika kutalika ndi kutalika kwa 0px. Mu chitsanzo ichi, rasiyiti ya blur yayikidwa ku 15px ndipo kufalikira kwa blur ndi 5px, koma mukhoza kuthandizana ndi makonzedwe amenewo kuti mudziwe kukula ndi kufalikira komwe mukufuna kuwala. Mtundu rgb (255,255,190) ndi mtundu wachikasu ndi RGBa alpha kufotokozera kwa 75 peresenti-rgba (255,255,190, .75). Sankhani mtundu wowala umene umagwira ntchito yanu bwino. Mofanana ndi kuzungulira ngodya, musaiwale kugwiritsa ntchito osatsegula prefixes (-webkit-ndi -moz-) kuti mukhale ogwirizana kwambiri.

-blokosi-bokosi-mthunzi: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-masi-bokosi-mthunzi: 0px 0px 15px 5px rgba (255, 255, 190, .75);
mthunzi: 0px 0px 15px 5px rgba (255, 255, 190, .75);

Yesani Bokosi Lonyezimira

Yesani bokosi lowala mu browser imodzi kapena zambiri ndikupanga kusintha kulikonse kuti mukhale ndi zotsatira zoyera zomwe zimagwirira ntchito pa tsamba lanu la intaneti.