CSS šešėlis: kaip padaryti

Be tamsos nėra šviesos be šešėlio ne forma. Net pagrindinė makiažo priemonė moterims, vadinamų "šešėlis". Jei norite, kad grožį į savo puslapius, jums reikia įdėti tinkamą dėmesį - Pridėti CSS-šešėlis, kur reikia.

Toliau pateikta medžiaga padės jums sužinoti, kaip įdiegti atspalvį arba blokuoti vaizdus naudojant CSS kodą.

CSS šešėlis. sintaksė

Tiesą sakant dėžės šešėlis, kur langas - blokas ir šešėlis - tai pati šešėlis.

Kodas parašytas petnešos:

{Dėžės-šešėliai: 11px 22px 33px 44px # 333333;}.

Linija pasakoja, kad įrenginys yra nustatytas standartinis su šešėliai pikselių spinduliu. Duomenys iššifruojama taip:

• 11px - šešėliai atitolusį bloko ant X ašies (teigiamą vertę (20 taškų) pasislinks į dešinę šešėlis, neigiamas (-37px) - į kairę);
• 22px - šešėlių poslinkiai, atsižvelgiant į Y-ašies blokas (teigiama vertė (5px) sukelti šešėlyje žemyn neigiamas (-17px) poslinkio - į viršų);
• 33px - tai suliejimo parametras, tuo didesnis skaičius, tuo stipresnis poveikis;
• 44px - iš šešėlių spindulys, ir yra tiesiogiai proporcingas;
• # 333333 - spalva, kuri yra dažytos pavėsyje.

Per pastaruosius tris parametrai yra neprivaloma ir gali būti tiesiog praleisti į eilutę, ty {dėžės šešėlis: 10px 13px; } - .. Tokia linija yra neteisinga (šešėlis spalva yra identiškos teksto spalvos blokas).

Taigi, kuriant šešėlius nuo jūsų svetainės puslapiuose nėra sunku, tačiau daugelis nice looking poveikis galite sukurti! Padaryti jūsų vaikas unikalus, nepakartojamas, nes dizainas yra svarbus, kiekviena detalė, kiekviena detalė. Čia, atrodo, nieko ypatingo, tačiau jis yra daug labiau įdomi ir patraukli.

Apsvarstykite kai kuriuos pavyzdžius, atrodo tarsi šešėlis CSS-blokas pagal kodavimo:

1. {Langelis-šešėliai: 25px 25px;} - CPT-šešėliai kompensuoti krypTys 25 taškų.
2. {Langelis-šešėliai: 25px 25px 10px;} - CPT-šešėliai kompensuoti ašys 25 taškų ir suliejimo briaunų 10 taškų.
3. {Langelis-šešėliai: 25px 25px 10px 5px;} - CPT-šešėliai kompensuoti krypTys 25 taškų, suliejimo kraštai 10 taškų ir iš anksto nustatytą spinduliu nuo 5 pikselių
4. {Langelis-šešėlis: 25px 25px 10px 5px # 9e9e9e;} - CSS šešėlis kompensuoti Kirviai 25 taškų, Blur kraštai 10 taškų, nurodykite 5 taškų ir spalvos spindulys.

lašas šešėlis

Norėdami sukurti gražesnę, elegantiški ir originalūs atspalviai turi skirtingą poveikį. Jūs galite padaryti vidinį šešėlį. Tai pakankamai kodas nurodyti tokių "intarpas", toliau aprašymo parametrų parametrų bus kaip įprasta:

{Langelis-šešėliai: intarpas 4px 2px 6px # 9e9e9e;}.

Tai galima įdėti po bloko keli šešėliai su visiškai skirtingų parametrų kodas, jie (šešėliai) išvardijamos atskirti kableliais:

{Langelis-šešėliai: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.

šešėlis nuotraukos

Be vienetų apie svetainę tikrai bus nuotraukos, nuotraukos, fonas - visi šie elementai taip pat atrodo daug įdomesnis su šešėliais. Galite piešti pasirengimo vaizdo redaktorių ir įklijuokite juos puslapyje jau su šešėliais. Tačiau, visų pirma, tai ne visada įmanoma dėl įvairių priežasčių, įskaitant dėl įgūdžių stokos dirbant su grafika, antra, bet manipuliacijos su vaizdu pridedamas jo, "svorio", ir toks vaizdas gali sulėtinti puslapis įkeliamas. Šiuo atveju, jūs galite padaryti CSS šešėlis vaizdų.

Paprastas ir sintaksiškai teisingas sprendimas šią problemą - vieneto sukūrimas, jei jūsų vaizdo fonas bus Kotormo. Be to, jūs padaryti reikiamą atspalvį už vienetą ir jie rodomi background-image:

• .block1 {dėžės-šešėliai: intarpas 0 0 11px 9px # 9e9e9e; plotis: 480 piksel; aukštis: 360 piks; fono: URL (vaizdai / charlize_theron_2.jpg) 0 0 ne-pakartojimas;}

Šiame pavyzdyje, mes sukurti vidinį šešėlį su ne kompensuoti iš ašių, su Blur spinduliu, kuris apibrėžiamas spalvos, aukščio ir pločio bloką, ir fonas (background) paskirtas kuartinku. Kaip rezultatas, mes gauti iš vidinės šešėlyje nuotrauka.

Susitaria sukurti šešėliai per CSS kodą - tai gana paprastas, tačiau įdomus, o svarbiausia - naudingos pratimą.