CSS yra daugybė galimybių pagerinti jūsų svetainių išvaizdą; tekstas ir langelio šešėliai yra puikūs pavyzdžiai. Jie siūlo panašius rezultatus kaip šešėliai, rasti vaizdo redagavimo programinėje įrangoje, pvz., „Photoshop“.
Bet kaip veikia CSS šešėliai? Pasinerkime tiesiai.
Kaip naudoti CSS Box Shadow
Galite taikyti CSS laukelio šešėlį su viena CSS eilute, kurioje yra iki šešių reikšmių diapazonas. Vertybių tvarka yra labai svarbi, kad jūsų CSS laukelio šešėlis veiktų, ir ji atrodo taip:
langelis-šešėlis: poslinkis-x poslinkis-y suliejimo plitimo spalvos įdėklas;Pažvelkime į kiekvieną vertę eilės tvarka.
CSS dėžutės šešėlio padėtis
Poslinkio x ir poslinkio y reikšmės valdo dėžutės šešėlio padėtį. Poslinkio x reikšmė rodo horizontalią šešėlio padėtį, o poslinkis y yra vertikalus poslinkis.
langelis-šešėlis: 10px 10px;Teigiamos reikšmės lemia šešėlį žemiau ir dešinėje elemento.
Taip pat galite naudoti neigiamas h poslinkio ir v poslinkio reikšmes:
langelis-šešėlis: -10px -10px;Neigiamas h poslinkis perkelia šešėlį į kairę, o neigiamas v poslinkis – aukštyn:
CSS langelio šešėlių suliejimas
Kaip matote, prie šešėlio pridėjus h ir v poslinkį sukuriamas vientisas šešėlis be jokių plunksnų. Suliejimo vertė sulieja jūsų CSS laukelio šešėlį ir įsigalios, jei pateikiate trečią reikšmę:
langelis-šešėlis: 10px 10px 20px;Kuo didesnį skaičių pridėsite prie suliejimo reikšmės, tuo neryškesnis bus jūsų CSS dėžutės šešėlis. Ši vertė negali būti neigiama.
CSS Box Shadow Spread
Skleidimo reikšmė leidžia keisti šešėlio dydį nekeičiant jo padėties.
langelis-šešėlis: 10px 10px 20px 30px;Teigiama sklaidos vertė padidins jūsų CSS laukelio šešėlį, o esant neigiamai – sumažins.
CSS dėžutės šešėlių spalva
CSS laukelio šešėliai pagal numatytuosius nustatymus atitinka elemento teksto spalvą, tačiau galite tai nepaisyti pridėdami spalvą:
langelio šešėlis: 10px 10px 20px 10px #0000ff;Naudojama spalva turi būti CSS legalaus spalvų formato, pvz., šešioliktainis kodas, RGB kodas arba iš anksto nustatyta spalva. Tu gali sužinokite apie šešioliktainius kodus ir kitos legalios CSS spalvų parinktys prieš pradėdami dirbti su šešėliais.
CSS langelio šešėlių įdėklas
CSS laukelio šešėliai pagal numatytuosius nustatymus nepatenka į jiems priskirtą elementą. Pridėję įdėklą prie langelio šešėlio ypatybės, galite rodyti šešėlį elemento vidinėje pusėje.
langelio šešėlis: 10px 10px 20px 10px #0000ff įdėklas;Tai iš anksto nustatyta teksto reikšmė; tiesiog pridėkite arba pašalinkite, kad nustatytumėte vertę.
Kaip naudoti CSS teksto šešėlį
CSS teksto šešėliai yra kaip langelio šešėliai, nors jie turi mažiau keistinų reikšmių. CSS teksto šešėlio sintaksė atrodo taip:
tekstas-šešėlis: poslinkis-x poslinkis-y suliejimo spindulio spalva;Bet kaip šios vertybės veikia?
CSS teksto šešėlio padėtis
CSS teksto šešėlių poslinkiai veikia labai panašiai kaip tos pačios langelio šešėlių reikšmės:
teksto šešėlis: 10 pikselių 10 pikselių;Teigiamos reikšmės pateiks šešėlį žemiau ir dešinėje nuo teksto.
Neigiamos reikšmės veikia priešingai, todėl šešėlis yra virš teksto ir jo kairėje.
tekstas-šešėlis: -10px -10px;Galite maišyti neigiamas ir teigiamas reikšmes, kad CSS teksto šešėlis būtų idealiai išdėstytas.
CSS teksto šešėlių suliejimo spindulys
CSS teksto šešėlio suliejimo spindulys leidžia sulieti šešėlį už teksto.
teksto šešėlis: 10 piks. 10 piks. 10 piks.; Šios vertės numatytoji vertė yra 0 (be suliejimo).
CSS teksto šešėlių spalva
Pagal numatytuosius nustatymus CSS teksto šešėliai atitinka teksto spalvą. Galite pakeisti teksto spalvą įtraukdami ją į CSS teksto šešėlio ypatybės pabaigą.
teksto šešėlis: 10px 10px 10px #0000ff;Kaip ir CSS dėžutės šešėlinės spalvos, tam turite naudoti legalią CSS spalvą.
CSS langelio ir teksto šešėlių dizaino pavyzdžiai
Galite pradėti eksperimentuoti naudodami CSS laukelį ir teksto šešėlius, kai suprasite pagrindus. Toliau pateiktos idėjos turėtų įkvėpti jus sugalvoti kūrybiškų būdų, kaip naudoti šias CSS ypatybes.
Dviejų spalvų kraštinės su dviem CSS dėžutės šešėliais
Prie HTML elemento galite pridėti daugiau nei vieną laukelio šešėlį arba teksto šešėlį. Jei tarp jų yra kableliai, prie vienos nuosavybės galite pridėti naujų šešėlių.
dėžutė-šešėlis: 30px 30px#0000tt, -30 taškų-30 taškų 0px#00ff00;Šis dviejų spalvų rėmelis yra geras to pavyzdys. Du CSS dėžutės šešėliai su priešingomis pozicijomis ir be suliejimo / išplitimo sukuria puikų kūrybinį kraštą.
Dvigubi CSS teksto šešėliai dramatiškam efektui pasiekti
Panašiai kaip anksčiau, galite pridėti ir išdėstyti teksto kelis teksto šešėlius, kad gautumėte įdomių rezultatų.
teksto šešėlis: 35 piks. 20 piks. 4 piks. tamsiai pilka, -35 piks. -20 piks. 4 piks. tamsiai pilka;Šiame pavyzdyje rodoma teksto eilutė su šešėliu viršuje ir šešėliu apačioje, kurių abiejų spalvų reikšmės yra pagrįstos tekstu.
Daugiaspalviai fonai su įterptais CSS dėžutės šešėliais
CSS yra pakankamai galingas, kad būtų galima sukurti unikalių ir įdomių išteklių be jokių išorinių failų. Įterpto CSS dėžutės šešėlio naudojimas kaip fonas yra puikus to pavyzdys.
langelio šešėlis: 20px 10px 10px 40px #000000 intarpas, -50px -30px 8px 60px pilkas įdėklas, 30px 20px 6px 90px šviesiai pilkas įdėklas;Šioje dėžutėje yra baltas fonas ir trys skirtingų spalvų šešėliai. Šešėliai persidengia vienas su kitu, kad sukurtų unikalų foną.
Dar labiau sustiprinti šį efektą yra paprastas dalykas pridedant stilingą CSS fono gradientą į savo elementą.
CSS dėžutės šešėliai ir teksto šešėliai, skirti kūrybiškam interneto dizainui
CSS langelį ir teksto šešėlius lengva naudoti, kai žinote, kaip su jais dirbti. Dabar turite įrankius, kurių reikia norint pradėti kurti savo dizainą, tačiau turėtumėte toliau tyrinėti CSS, kad pagerintumėte savo įgūdžius.