CSS-shadow: si për të bërë

Pa errësirë nuk ka dritë, pa hije asnjë formë. Edhe themelore make-up mjet për gratë quajtur "hije". Nëse ju doni të sjellë bukurinë në faqet tuaja, ju keni nevojë për të vendosur theksin e duhur - Shto CSS-hije ku është e nevojshme.

Materiali i paraqitur më poshtë do të ju ndihmojë të mësoni se si ta instaloni hije apo për të bllokuar imazhet duke përdorur CSS-kod.

CSS-hije. sintaksë

Aktualisht box-hije, ku kuti - një bllok dhe hije - kjo është në vetvete një hije.

Kodi i shkruar në formatimin e teksteve:

{Kuti-shadow: 11px 22px 33px 44px # 333.333;}.

Line na tregon se njësia është vendosur në standard me një rreze hije pixel. Të dhënave është decrypted si më poshtë:

• 11px - shadow kompensuar në krahasim me bllok në boshtin X (vlera pozitive (20px) do të zhvendoset në hijen e duhur, negative (-37px) - në të majtë);
• 22px - zhvendosjet hije lidhje me Y-aksin e bllok (vlera pozitiv (5px) të çojë në një zhvendosje të hijen poshtë negative (-17px) - deri);
• 33px - Ky parametër turbullira, sa më i lartë numri, aq më e fortë efekti;
• 44px - rrezja e hije, dhe është në proporcion;
• # 333333 - ngjyra, e cila është pikturuar në hije.

Tre parametrat e fundit janë opsionale dhe thjesht mund të hiqej në vargun, dmth {box-shadow: 10px 13px; } - .. një linjë e tillë nuk është i pasaktë (ngjyra hije është identike me ngjyrën e tekstit në bllok).

Kështu, duke krijuar hije në faqet e faqes tuaj nuk është një vështirësi, por shumë efekte nice looking ju mund të krijoni! Të bëjë fëmija juaj unik, i paimitueshëm, sepse dizajni është i rëndësishëm, çdo detaj, çdo detaj. Këtu, me sa duket, asgjë të veçantë, por ajo është shumë më interesante dhe tërheqëse.

Konsideroni disa shembuj ilustrues, kjo duket si një hije CSS-bllok sipas kodim:

1. {Kuti-shadow: 25px 25px;} - CSS-shadow kompensuar akset 25 piksel.
2. {Kuti-shadow: 25px 25px 10px;} - CSS-shadow kompensuar akset 25 piksel dhe turbullim skajet 10 piksel.
3. {Kuti-shadow: 25px 25px 10px 5px;} - CSS-shadow kompensuar akset 25 piksel, turbullira skajet 10 piksel dhe një rreze të paracaktuar të 5 piksel
4. {Kuti-shadow: 25px 25px 10px 5px # 9e9e9e;} - CSS-shadow kompensuar akset 25 piksel, turbullira skajet 10 piksel, të përcaktojë një rreze e 5 piksel dhe ngjyrë.

rënie hije

Për të krijuar një më të bukur, elegante dhe origjinale hije të kenë efekte të ndryshme. Ju mund të bëjë hije e brendshme. Është e mjaftueshme për Kodi përcaktojë parametrat e "kuadrat", përshkrimin e mëtejshëm të parametrave do të shkojnë si zakonisht:

{Kuti-shadow: kuadrat 4px 2px 6px # 9e9e9e;}.

Është e mundur për të vënë nën bllokojë një hije pak me parametra krejtësisht të ndryshme në kodin, ata (hijet) janë renditur ndara me presje:

{Kuti-shadow: -20px -10px 11px 15px # 800.080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.

pictures hije

Përveç njësive në vend me siguri do të jetë pictures, photos, prejardhje - të gjitha këto elemente të duken shumë më interesante me hijet. Ju mund të tërheqë fotot në redaktorët e para-imazhit dhe ngjiti ato në një faqe tashmë me hijet. Por, së pari, kjo nuk është gjithmonë e mundur për arsye të ndryshme, duke përfshirë edhe për shkak të mungesës së aftësive për të punuar me grafikë, së dyti, çdo manipulimi i imazhit është shtuar në të, "peshë", dhe një foto e tillë mund të ngadalësojnë faqe ngarkesa. Në këtë rast, ju mund të bëni një pamje CSS-hije.

Zgjidhja më e thjeshtë dhe sintaksore saktë për këtë problem - krijimi i njësisë, sfond në fotografinë tuaj do Kotormo. Tjetra, ju bëni hije e nevojshme për njësinë dhe ata janë shfaqur në background-image:

• .block1 {box-shadow: kuadrat 0 0 11px 9PX # 9e9e9e; gjerësia: 480px; height: 360px; background: url (images / charlize_theron_2.jpg) 0 0 jo-përsëritje;}

Në këtë shembull, ne kemi krijuar një hije të brendshme me pa kompensuar prej akseve, me rreze Blur, ngjyrë të përcaktuar, lartësi dhe gjerësi të bllokut, dhe sfond (background) emëruar kuartinku. Si rezultat, ne kemi marrë një pamje të hijes së brendshme.

Bien dakord për të krijuar hijet duke përdorur CSS-kod - kjo është shumë e thjeshtë, por emocionuese, dhe më e rëndësishmja - ushtrim i dobishëm.