CSS-inuwa: yadda za a yi

Ba tare da duhu babu wani haske ba tare da inuwa babu form. Har ma da ainihin sa-up kayan aiki a mata da ake kira "inuwa." Idan kana so ka kawo kyakkyawa to your pages, kana bukatar ka sanya dama girmamawa - Add CSS-inuwa inda shi ne ake bukata.

A kayan gabatar a kasa zai taimake ka ka koyi yadda za a shigar da inuwa ko don toshe hotunan ta amfani da CSS-code.

CSS-inuwa. ginin kalma

A gaskiya akwatin-inuwa, inda akwatin - wani block da kuma inuwa - wannan ne da kanta a inuwa.

Code rubuta a Katakon:

{Akwatin-inuwa: 11px 22px 33px 44px # 333333;}.

Layin gaya mana cewa naúrar an saita zuwa Standard tare da wani inuwa pixel radius. A data aka decrypted kamar haka:

• 11px - inuwa biya diyya dangi da block a kan X-axis (tabbatacce darajar (20px) zai matsawa zuwa dama inuwa, korau (-37px) - to hagu);
• 22px - tare da matsugunninsu inuwa dangi da block Y-axis (tabbatacce darajar (5px) gubar zuwa wani motsi a cikin inuwa saukar, korau (-17px) - up).
• 33px - An blurring siga, da hakan da lambar, da karfi da tasiri.
• 44px - da radius daga cikin inuwa, kuma shi ne kai tsaye na gwargwado.
• # 333333 - da launi, wanda aka fentin a cikin inuwa.

A karshe uku sigogi ne na tilas da kuma iya kawai za a tsallake a cikin kirtani, watau {akwatin-inuwa: 10px 13px; } - .. Irin wannan layi ba daidai ba (inuwa launi ne m ga launi daga cikin rubutu a cikin block).

Saboda haka, samar da inuwa a shafukan da shafin ba wahala, amma da yawa nice neman effects ka iya ƙirƙirar! Make your yaro na musamman, Sankiran, saboda zane ne da muhimmanci, kowane daki-daki, kowane daki-daki. Nan, ga alama, kome musamman, amma shi ne yafi ban sha'awa da kuma m.

Ka yi la'akari da wasu misali misalai, shi ya dubi kamar inuwa CSS-block bisa ga coding:

1. {Box-inuwa: 25px 25px;} - CSS-inuwa biya diyya gatura 25 pixels.
2. {Box-inuwa: 25px 25px 10px;} - CSS-inuwa biya diyya gatura 25 pixels da blurring gefuna 10 pixels.
3. {Box-inuwa: 25px 25px 10px 5px;} - CSS-inuwa biya diyya gatura 25 pixels, blur gefuna 10 pixels da qaddara radius na 5 pixels
4. {Box-inuwa: 25px 25px 10px 5px # 9e9e9e;} - CSS-inuwa biya diyya axis ta 25 pixels blurry gefuna zuwa 10 pixels, saka da radius daga 5 pixels da kuma launi.

inuwa effects

Don ƙirƙirar mafi kyau, m kuma na asali inuwõyinta suna kusa da daban-daban effects. Za ka iya sa ciki inuwa. Yana isa code to saka da sigogi na "tsinin", da kara bayanin irin sigogi zai tafi kamar yadda ya saba:

{Box-inuwa: tsinin 4px 2px 6px # 9e9e9e;}.

Yana yiwuwa a sa a karkashin block 'yan inuwa tare da mabanbanta sigogi a cikin code, sun (da inuwa) an jera rabu da wakafi:

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

inuwa hotuna

Bugu da kari ga raka'a a shafin zai lalle zama hotuna, photos, backgrounds - duk wadannan abubuwa kuma duba yafi ban sha'awa tare da inuwa. Za ka iya zana hotuna a pre-image gyara da kuma manna su a kan wani page riga da inuwa. Amma, da farko, shi ne ba ko da yaushe yiwu ga dalilai daban-daban, ciki har da saboda rashin basira a cikin aiki tare da graphics, abu na biyu, wani magudi da image aka kara masa, "nauyi", da kuma irin wannan hoto na iya rage gudu shafi na lodi. A wannan yanayin, za ka iya yin CSS-inuwa images.

A mafi sauki da kuma syntactically daidai warware wannan matsala - halittar naúrar, da bango a cikin hoto nufin Kotormo. Next, ka sa dole inuwa na naúra da kuma su ne yake nuna su a kan bango-image:

• .block1 {akwatin-inuwa: tsinin 0 0 11px 9px # 9e9e9e. fadin: 480px. tsawo: 360px; bango: url (images / charlize_theron_2.jpg) 0 0 babu-sake.}

A wannan misali, za mu haifar da wani ciki inuwa da babu biya diyya na gatura, tare da blur radius, a tsare launi, tsawo da nisa daga cikin block, da kuma bango (bango) nada kuartinku. A sakamakon haka, mun samu wani hoto na ciki inuwa.

Amince don ƙirƙirar inuwa ta amfani da CSS-code - yana da kyawawan sauki, duk da haka da farin ciki, da kuma mafi muhimmanci - m motsa jiki.