CSS on täis võimalusi teie veebisaitide välimuse parandamiseks; teksti ja kasti varjud on peamised näited. Need pakuvad sarnaseid tulemusi pilditöötlustarkvaras nagu Photoshop leitud varjudega.
Aga kuidas CSS-i varjud töötavad? Sukeldume otse sisse.
Kuidas kasutada CSS Box Shadow'i
Saate rakendada CSS-i kasti varju ühe CSS-i reaga, mis sisaldab kuni kuue väärtuse vahemikku. Väärtuste järjekord on teie CSS-i kasti varju toimimiseks ülioluline ja see näeb välja järgmine:
kast-vari: nihe-x nihe-y hägususe hajutatud värvi sisestus;Vaatame kõiki väärtusi järjekorras.
CSS-kasti varju positsioon
Offset-x ja offset-y väärtused juhivad teie kasti varju asukohta. Nihe-x väärtus tähistab varju horisontaalset asendit, nihe-y aga vertikaalnihet.
kast-vari: 10px 10px;Positiivsete väärtuste tulemuseks on vari elemendi all ja paremal.
H-nihke ja v-nihke jaoks saate kasutada ka negatiivseid väärtusi:
kast-vari: -10px -10px;Negatiivne h-nihe liigutab varju vasakule, negatiivne v-nihe aga ülespoole:
CSS-i kasti varjude hägusus
Nagu näete, loob h- ja v-nihke lisamine oma varjule ühtlase varju ilma sulgedeta. Hägususe väärtus hägustab teie CSS-i kasti varju ja jõustub, kui sisestate kolmanda väärtuse:
kast-vari: 10px 10px 20px;Mida suurema arvu hägususe väärtusele lisate, seda hägusem on teie CSS-i kasti vari. See väärtus ei saa olla negatiivne.
CSS Box Shadow Spread
Levituse väärtus võimaldab muuta oma varju suurust ilma selle asukohta muutmata.
kast-vari: 10px 10px 20px 30px;Positiivne leviku väärtus muudab teie CSS-i kasti varju suuremaks, negatiivne väärtus aga väiksemaks.
CSS-kasti varjuvärv
CSS-kasti varjud on vaikimisi elemendi tekstivärviks, kuid saate selle alistada, lisades värvi:
kasti vari: 10px 10px 20px 10px #0000ff;Kasutatav värv peab olema CSS-i legaalses värvivormingus (nt kuueteistkümnendkood, RGB-kood või eelmääratletud värv). Sa saad õppige kuueteistkümnendkoodide kohta ja muud CSS-i legaalsed värvivalikud, enne kui alustate oma varjudega.
CSS Box Shadow Inset
CSS-kasti varjud jäävad vaikimisi neile määratud elemendist välja. Lisades atribuudile box-shadow sisendi, saate kuvada varju elemendi siseküljel.
kasti vari: 10px 10px 20px 10px #0000ff sisestus;See on etteantud tekstiväärtus; väärtuse määramiseks lihtsalt lisage või eemaldage see.
Kuidas kasutada CSS-i tekstivarju
CSS-i tekstivarjud on nagu kastivarjud, kuigi neil on vähem väärtusi, mida muuta. CSS-i tekstivarju süntaks näeb välja järgmine:
tekst-vari: nihe-x nihe-y hägususe raadiuse värv;Aga kuidas need väärtused toimivad?
CSS-i teksti varjupositsioon
CSS-i teksti varjunihked töötavad väga sarnaselt samade kasti varju väärtustega:
tekst-vari: 10px 10px;Positiivsed väärtused paigutavad varju teksti alla ja paremale.
Negatiivsed väärtused toimivad vastupidiselt, asetades varju teksti kohale ja vasakule.
tekst-vari: -10px -10px;Saate segada negatiivseid ja positiivseid väärtusi, et oma CSS-i tekstivarju ideaalselt paigutada.
CSS-i teksti varju hägususe raadius
CSS-i teksti varju hägususe raadius võimaldab teil teksti taga oleva varju hägustada.
tekst-vari: 10px 10px 10px; Selle väärtuse vaikeväärtus on 0 (hägu pole).
CSS-i teksti varjuvärv
Vaikimisi vastavad CSS-i tekstivarjud teksti värvile. Saate muuta oma teksti värvi, lisades selle CSS-i tekstivarjundi lõppu.
tekstivari: 10px 10px 10px #0000ff;Nagu CSS-i kasti varjuvärvid, peate ka selleks kasutama CSS-i seaduslikku värvi.
CSS-kasti ja tekstivarju kujunduse näited
Kui olete põhitõdedest aru saanud, võite hakata katsetama CSS-kasti ja tekstivarjude kasutamist. Allolevad ideed peaksid inspireerima teid leidma oma loomingulisi viise nende CSS-i atribuutide kasutamiseks.
Kahevärvilised äärised kahe CSS-kasti varjuga
HTML-elemendile saate lisada rohkem kui ühe kasti- või tekstivarju. Kui nende vahel on komad, saate ühele omadusele lisada uusi varje.
kast-vari: 30px 30px#0000ff, -30 pikslit-30 pikslit 0px#00ff00;See kahevärviline ääris on selle hea näide. Kaks CSS-kasti varju, millel on vastandlikud positsioonid ja ilma hägususe/levituseta, loovad suurepärase loomingulise äärise.
Kaks CSS-i tekstivarju dramaatiliseks efektiks
Sarnaselt ülaltoodud ideele saate huvitavate tulemuste saamiseks teksti lisada ja paigutada mitu tekstivarju.
tekst-vari: 35px 20px 4px tumehall, -35px -20px 4px tumehall;See näide kujutab tekstirida, mille ülal ja all on vari, millel mõlemal on tekstipõhised värviväärtused.
Mitmevärvilised taustad koos sisestatud CSS-kasti varjudega
CSS on piisavalt võimas, et luua ainulaadseid ja huvitavaid varasid ilma väliste failideta. Selle suurepäraseks näiteks on sisestatud CSS-kasti varju kasutamine taustana.
kasti vari: 20px 10px 10px 40px #000000 sisestus, -50px -30px 8px 60px hall sisestus, 30px 20px 6px 90px helehall sisestus;Sellel kastil on valge taust ja kolm erinevat värvi sisestusvarju. Varjud kattuvad üksteisega, et luua kordumatu taust.
Selle efekti edasine suurendamine on lihtne stiilse CSS-i taustagradiendi lisamine oma elemendile.
CSS-i kastivarjud ja tekstivarjud loominguliseks veebikujunduseks
CSS-kasti ja tekstivarju on lihtne kasutada, kui tead, kuidas nendega töötada. Nüüd on teil tööriistad, mida vajate oma kujunduse kallal töötamiseks, kuid oma oskuste parandamiseks peaksite jätkama CSS-i uurimist.
