CSS-landong: sa unsa nga paagi sa paghimo sa

Kon walay kangitngit walay kahayag nga walay landong walay porma. Bisan ang nag-unang mga sa paghimo sa-up nga himan alang sa mga babaye nga gitawag nga "ang landong." Kon kamo gusto nga dad-on sa katahom sa imong mga panid, kamo kinahanglan nga ibutang sa husto nga gibug-aton - Add CSS-landong diin kini gikinahanglan.

Ang materyal nga gipresentar sa ubos makatabang kamo makakat-on kon sa unsang paagi sa pag-instalar sa landong o sa babagan mga larawan sa paggamit sa CSS-code.

CSS-landong. syntax

Pagkatinuod kahon-landong, diin ang kahon - sa usa ka block ug landong - kini mao ang sa iyang kaugalingon sa usa ka landong.

Code nga gisulat sa mga tukod:

{Kahon-landong: 11px 22px 33px 44px # 333333;}.

Line nagsulti kanato nga ang yunit mao ang sa Standard uban sa usa ka landong pixel radyos. data ang decrypted ingon sa mosunod:

• 11px - landong offset paryente sa mga block sa X axis (dayág (20px) mobalhin sa sa husto nga landong, negatibo nga (-37px) - ngadto sa wala);
• 22px - landong napugos uban sa pagtahod ngadto sa Y-axis sa block (positibo bili (5px) tingga ngadto sa usa ka pagbalhin sa landong sa negatibo nga (-17px) - sa);
• 33px - kini nga gisagulan sukaranan, ang mas taas ang gidaghanon, ang mas lig-on ang epekto;
• 44px - ang radyos sa mga landong, ug ang direkta timbang;
• # 333333 - ang kolor, nga gipintalan sa landong.

Ang katapusang tulo ka mga lantugi ang mga optional ug lamang nga wala ilakip sa pisi, ie {kahon-landong: 10px 13px; } - .. Ang maong usa ka linya dili sayop (landong kolor mao ang susama sa kolor sa mga teksto sa block).

Busa, sa paghimo sa landong sa mga pahina sa imong site mao ang dili usa ka kalisud, apan daghan nindot sa pagtan-aw epekto nga imong mahimo sa paghimo! Himoa ang imong anak sa usa ka talagsaon, dili maawat nga, tungod kay ang disenyo mao ang importante, ang matag detalye, ang tanang detalye. Dinhi, kini daw, walay bisan unsa nga espesyal nga, apan kini mao ang labi pa makapaikag ug madanihon.

Tagda ang pipila ka mahulagwayong mga panig-ingnan, kini motan-aw sama sa usa ka landong CSS-block sumala sa coding:

1. {Kahon-landong: 25px 25px;} - CSS-landong offset wasay 25 pixels.
2. {Kahon-landong: 25px 25px 10px;} - CSS-landong offset wasay 25 pixels ug nakapahanap sa sulab 10 pixels.
3. {Kahon-landong: 25px 25px 10px 5px;} - CSS-landong offset wasay 25 pixels, gisagulan sulab 10 pixels ug sa usa ka gitino nang daan radyos sa 5 pixels
4. {Kahon-landong: 25px 25px 10px 5px # 9e9e9e;} - CSS-landong offset axis sa 25 pixels hanap sulab sa 10 pixels, hingalan sa radyos sa 5 pixels ug kolor.

drop landong

Sa paghimo sa usa ka labaw nga matahum, elegante, maambong ug orihinal nga mga patay adunay lain-laing mga epekto. Ikaw makahimo sa sulod nga landong. Kini igo code sa hingalan sa mga lantugi sa "gisukip", dugang pa nga paghulagway sa mga lantugi moadto sama sa naandan:

{Kahon-landong: gisukip 4px 2px 6px # 9e9e9e;}.

Kini mao ang posible nga sa pag-ibutang sa ilalum sa mga block sa pipila ka mga landong sa bug-os nga lain-laing mga lantugi sa code, sila (ang mga landong) ang nalista mibulag sa mga kudlit:

{Kahon-landong: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.

landong hulagway

Dugang pa sa mga yunit sa dapit gayud hulagway, mga litrato, mga kaagi - ang tanan niini nga mga elemento usab sa daghan nga labaw nga makapaikag sa mga landong. Ikaw mahimo sa pagkalos hulagway sa mga editor pre-larawan ug Paste kanila sa usa ka pahina na uban sa mga landong. Apan, una sa tanan, kini mao ang dili kanunay nga posible alang sa mga nagkalain-laing mga rason, lakip na tungod sa kakulang sa mga kahanas sa pagtrabaho uban sa graphic, ikaduha, sa bisan unsa nga pagmaniobra sa larawan gidugang kaniya, "gibug-aton", ug ang ingon nga sa usa ka hulagway mahimong mohinay luwan panid. Sa kini nga kaso, kamo makahimo sa usa ka CSS-landong nga mga larawan.

Ang labing yano ug syntactically husto nga solusyon niini nga problema - ang paglalang sa yunit, ang background sa imong hulagway nga Kotormo. Sunod, paghimo kaninyo nga ang mga gikinahanglan nga landong alang sa unit ug sila gipakita sa background-nga larawan;

• .block1 {kahon-landong: gisukip sa 0 0 11px 9px # 9e9e9e; gilapdon: 480px; gitas-on: 360px; background: url (larawan / charlize_theron_2.jpg) 0 0 walay-balik;}

Sa panig-ingnan niini nga, paghimo kita sa usa ka sulod nga landong nga walay timbang, tugbang sa mga wasay, uban sa gisagulan radius, gihubit kolor, gitas-on ug gilapdon sa block, ug ang background (background) gitudlo kuartinku. Ingon sa usa ka resulta, kita sa usa ka hulagway sa landong sulod.

Mouyon sa paghimo landong sa paggamit sa CSS-code - kini pretty yano, apan kulbahinam, ug labing importante - mapuslanon ehersisyo.