Dėžutė-šešėlis - CSS-gudrybės

Turinys

Naudojamas metant šešėlius (dažnai vadinamus „Drop Shadows“, kaip ir „Photoshop“) iš elementų. Štai pavyzdys su kuo gilesniu naršyklės palaikymu:

.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )

Tai:

box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);
  1. Horizontalus šešėlio poslinkis (privalomas), teigiamas reiškia, kad šešėlis bus langelio dešinėje, neigiamas poslinkis uždės šešėlį langelio kairėje.
  2. Vertikalus šešėlio poslinkis (būtinas), neigiamas reiškia, kad langelio šešėlis bus virš langelio, teigiamas - šešėlis bus žemiau langelio.
  3. Neryškus spindulys (būtinas), jei nustatyta į 0, šešėlis bus aštrus, kuo didesnis skaičius, tuo jis bus neryškesnis ir kuo toliau šešėlis išsiplės. Pavyzdžiui, šešėlis su 5 taškų horizontaliu poslinkiu, kurio suliejimo spindulys taip pat yra 5 taškai, bus 10 taškų viso šešėlio.
  4. Sklaidos spindulys (pasirinktinai), teigiamos vertės padidina šešėlio dydį, neigiamos vertės sumažina. Numatytasis yra 0 (šešėlis yra tokio pat dydžio kaip neryškus).
  5. Spalva (būtina) - ima bet kokią spalvos vertę, pvz., Šešiakampį, pavadintą, rgba arba hsla. Jei spalvos vertė nenurodoma, langelio šešėliai nupiešiami priekinio plano spalva (tekstu color). Tačiau atminkite, kad senesnės „WebKit“ naršyklės (prieš „Chrome 20“ ir „Safari 6“) ignoruoja taisyklę, kai spalva yra praleista.

rgba(0, 0, 0, 0.4)Dažniausiai naudojamas pusiau skaidrios spalvos, pavyzdžiui, panašus , ir gražus efektas, nes jis visiškai / nepermatomai uždengia tai, kas baigėsi, tačiau leidžia šiek tiek parodyti tai, kas yra apačioje, kaip tikrą šešėlį.

Pavyzdys

Vidinis šešėlis

.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )

Pavyzdys

„Internet Explorer“ (8 ir žemesnės versijos) langelio šešėlis

Jums reikia papildomo elemento, bet su juo galima filter.

 Box-shadowed element 
.shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )

Tik iš vienos pusės

Naudodami neigiamą plitimo spindulį, galite išspausti dėžutės šešėlį ir nustumti jį tik nuo vieno langelio krašto.

.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )

Kelios sienos ir dar daugiau

Galite kableliais atskirti langelio šešėlį bet kada, kiek norite. Pavyzdžiui, tai rodo du šešėlius su skirtingomis pozicijomis ir skirtingomis spalvomis tame pačiame elemente:

box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;

Pavyzdys rodo, kaip galite tai naudoti kurdami kelias kraštines:

Žiūrėkite „Pen Multiple“ dėžutės šešėlių vėsumą! pateikė Chrisas Coyier (@chriscoyier) „CodePen“.

Taikydami šešėlius pseudo elementams, kuriais vėliau manipuliuojate, galite gauti gana puošnių 3D išvaizdos langelių šešėlių:

Žr. Halil İbrahim Nuroğlu (@haibnu) „Pen CSS3 Box Shadows Effects“ apie „CodePen“.

Itin sklandūs šešėliai per kelias kableliais atskirtas vertes:

„
CodePen“ žiūrėkite Chriso Coyierio (@chriscoyier) „ Pen smooth box-shadow“
.

Naršyklės palaikymas

Žiūrėkite fragmentą puslapio viršuje, jei norite sužinoti apie tiekėjo priešdėlio aprėptį. Tai yra viena iš tų savybių, kur priešdėlių numetimas šiuo metu yra gana pagrįstas.

Įdomios straipsniai...