CSS-Shadow: carane nggawe

Tanpa pepeteng ana cahya tanpa iyub-iyub ora wangun. Malah dhasar alat make-up kanggo wanita disebut "Shadow." Yen sampeyan pengin nggawa kaendahan kanggo kaca, sampeyan perlu kanggo nyeleh emphasis tengen - Tambah CSS-Shadow ngendi iku perlu.

Ing materi presented ing ngisor iki bakal sinau carane nginstal iyub-iyub utawa kanggo mblokir gambar nggunakake CSS-kode.

CSS-Shadow. sintaks

Bener kothak-Shadow, ngendi kothak - pemblokiran lan Shadow - iki dhewe Shadow.

Kode ditulis ing penyonggo:

{Kothak-Shadow: 11px 22px 33px 44px # 333333;}.

Line nyariosaken dhateng kita bilih unit disetel kanggo Standard karo radius Shadow piksel. data wis decrypted minangka nderek:

• 11px - Shadow nutup kerugian relatif kanggo pemblokiran ing sumbu X (aji positif (20px) bakal ngalih menyang Shadow tengen, negatif (-37px) - ngiwa);
• 22px - Shadow displacements bab Y-sumbu pemblokiran (aji positif (5px) timbal shift iyub-iyub mudhun negatif (-17px) - munggah);
• 33px - parameter ora cetho iki, sing luwih dhuwur nomer, kuwat efek;
• 44px - Radius saka dipengini, lan langsung ceceg;
• # 333333 - werna, kang dicet ing iyub-iyub.

Telu paramèter pungkasan sing pilihan lan bisa mung dilirwakaké ing senar, conto {kothak-Shadow: 10px 13px; } - .. baris Kuwi ora salah (werna Shadow identik werna teks ing pemblokiran).

Mangkono, nggawe dipengini ing kaca situs ora kangelan, nanging akeh efek looking becik sampeyan bisa nggawe! Priksa anak unik, inimitable, amarga desain wigati, saben rinci, saben rinci. Kene, misale jek, apa-apa khusus, nanging luwih menarik lan atraktif.

Coba sawetara conto ilustrasi, iku katon kaya ayang-CSS-block miturut werna ing:

1. {Box-Shadow: 25px 25px;} - CSS-Shadow nutup kerugian sumbu 25 piksel.
2. {Box-Shadow: 25px 25px 10px;} - CSS-Shadow nutup kerugian sumbu 25 piksel lan amarga obah sudhut 10 piksel.
3. {Box-Shadow: 25px 25px 10px 5px;} - CSS-Shadow nutup kerugian sumbu 25 piksel, cetho sudhut 10 piksel lan radius predetermined 5 piksel
4. {Box-Shadow: 25px 25px 10px 5px # 9e9e9e;} - CSS-Shadow nutup kerugian sumbu 25 piksel, cetho sudhut 10 piksel, nemtokake radius 5 piksel lan werna.

nyelehake Shadow

Kanggo nggawe mbandingake luwih ayu, elegan lan asli duwe efek beda. Sampeyan bisa nggawe Shadow utama. Iku kode cukup kanggo nemtokake paramèter saka "inset", gambaran luwih saka paramèter bakal pindhah minangka biasanipun:

{Box-Shadow: inset 4px 2px 6px # 9e9e9e;}.

Sampeyan bisa kanggo nyelehake ing pemblokiran sawetara dipengini karo paramèter-bener beda ing kode, padha (dipengini) sing kapacak dipisahake dening koma:

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

gambar Shadow

Saliyane Unit ing situs mesthi bakal gambar, foto, latar - kabeh unsur iki uga katon luwih menarik karo dipengini. Sampeyan bisa nggambar ing editors wis image lan paste ing kaca wis karo dipengini. Nanging, sepisanan, iku ora tansah bisa kanggo macem-macem alasan, kalebu amarga saka lack saka skills in nggarap grafis, sareh, sembarang penipuan gambar ditambahake kanggo wong, "bobot", lan kayata gambar bisa uga alon mudhun kathah kaca. Ing kasus iki, sampeyan bisa nggawe CSS-Shadow gambar.

Solusi paling prasaja lan syntactically bener kanggo masalah iki - nitahaken saka unit, ing latar mburi ing gambar bakal Kotormo. Sabanjure, sampeyan nggawe iyub-iyub perlu kanggo unit lan padha ditampilake ing latar mburi-gambar:

• .block1 {kothak-Shadow: inset 0 0 11px 9px # 9e9e9e; jembaré: 480px; dhuwur: 360px; latar mburi: url (images / charlize_theron_2.jpg) 0 0 no-baleni;}

Ing conto iki, kita nggawe Shadow utama karo ora nutup kerugian saka sumbu, karo radius cetho, werna ditetepake, dhuwuré lan jembaré pemblokiran, lan latar mburi (latar mburi) dados kuartinku. Akibaté, kita njaluk Gambar palimenganing utama.

Setuju kanggo nggawe dipengini nggunakake CSS-kode - iku paling cantik prasaja, durung macem, lan sing paling Jahwéh - ngleksanani migunani.