CSS on täynnä vaihtoehtoja verkkosivustojesi ulkoasun parantamiseksi; teksti ja laatikkovarjot ovat hyviä esimerkkejä. Ne tarjoavat samanlaisia tuloksia kuin varjot, jotka löytyvät kuvankäsittelyohjelmista, kuten Photoshopista.
Mutta miten CSS-varjot toimivat? Sukellaan heti sisään.
CSS Box Shadowin käyttäminen
Voit käyttää CSS-ruutuvarjoa yhdellä CSS-rivillä, joka sisältää enintään kuusi arvoa. Arvojen järjestys on ratkaisevan tärkeä CSS-laatikon varjostuksen toiminnan kannalta, ja se näyttää tältä:
box-shadow: offset-x offset-y sumennuksen leviämisen väri upotettu;Katsotaanpa kutakin arvoa järjestyksessä.
CSS-laatikon varjon sijainti
Offset-x- ja offset-y-arvot säätelevät laatikon varjon sijaintia. Offset-x-arvo edustaa varjon vaakasuuntaista sijaintia, kun taas offset-y on pystysuuntainen siirtymä.
box-shadow: 10px 10px;Positiiviset arvot aiheuttavat varjon elementin alapuolelle ja oikealle.
Voit myös käyttää negatiivisia arvoja h-offsetille ja v-offsetille:
box-shadow: -10px -10px;Negatiivinen h-offset siirtää varjon vasemmalle, kun taas negatiivinen v-offset siirtää sitä ylöspäin:
CSS Box Shadow Blur
Kuten näet, h- ja v-offsetin lisääminen varjoihisi luo kiinteän varjon ilman höyhenyttä. Sumeusarvo sumentaa CSS-laatikon varjoa ja tulee voimaan, jos annat kolmannen arvon:
box-shadow: 10px 10px 20px;Mitä suuremman luvun lisäät sumeusarvoon, sitä epäselvämpi CSS-laatikon varjo on. Tämä arvo ei voi olla negatiivinen.
CSS Box Shadow Spread
Levitysarvon avulla voit muuttaa varjosi kokoa muuttamatta sen sijaintia.
box-shadow: 10px 10px 20px 30px;Positiivinen leviämisarvo suurentaa CSS-laatikon varjoa, kun taas negatiivinen arvo pienentää sitä.
CSS-laatikon varjoväri
CSS-laatikon varjot ovat oletuksena elementin tekstin väri, mutta voit ohittaa sen lisäämällä värin:
laatikko-varjo: 10px 10px 20px 10px #0000ff;Käyttämäsi värin on oltava laillisessa CSS-värimuodossa, kuten heksadesimaalikoodi, RGB-koodi tai ennalta määritetty väri. Sinä pystyt oppia heksadesimaalikoodeista ja muita laillisia CSS-värivaihtoehtoja, ennen kuin aloitat varjojen käytön.
CSS Box Shadow Inset
CSS-laatikon varjot jäävät oletuksena niille määritetyn elementin ulkopuolelle. Lisäämällä lisäyksen box-shadow -ominaisuuteen, voit näyttää varjon elementin sisäpuolella.
laatikko-varjo: 10px 10px 20px 10px #0000ff upotettu;Tämä on ennalta määritetty tekstiarvo; yksinkertaisesti lisää tai poista se asettaaksesi arvon.
Kuinka käyttää CSS-tekstivarjoa
CSS-tekstin varjot ovat kuin laatikkovarjot, vaikka niillä on vähemmän arvoja, joita muokata. CSS-tekstivarjon syntaksi näyttää tältä:
teksti-shadow: offset-x offset-y sumennuksen säteen väri;Mutta miten nämä arvot toimivat?
CSS-tekstin varjon sijainti
CSS-tekstin varjojen siirtymät toimivat hyvin samalla tavalla kuin samat laatikon varjostusarvot:
tekstivarjo: 10px 10px;Positiiviset arvot sijoittavat varjon tekstin alapuolelle ja oikealle.
Negatiiviset arvot toimivat päinvastoin ja sijoittavat varjon tekstin yläpuolelle ja vasemmalle.
tekstivarjo: -10px -10px;Voit sekoittaa negatiivisia ja positiivisia arvoja sijoittaaksesi CSS-tekstivarjon täydellisesti.
CSS-tekstin varjon sumennuksen säde
CSS-tekstin varjon sumennussäteen avulla voit sumentaa tekstisi takana olevaa varjoa.
tekstivarjo: 10px 10px 10px; Tämän arvon oletusarvo on 0 (ei sumeutta).
CSS-tekstin varjoväri
Oletusarvoisesti CSS-tekstin varjot vastaavat tekstin väriä. Voit muuttaa tekstisi väriä lisäämällä sen CSS-tekstivarjoominaisuuden loppuun.
tekstivarjo: 10px 10px 10px #0000ff;Kuten CSS-laatikon varjovärit, sinun on käytettävä CSS: n laillista väriä tähän.
Esimerkkejä CSS-laatikosta ja tekstivarjosuunnittelusta
Voit alkaa kokeilla CSS-ruutujen ja tekstivarjojen käyttöä, kun ymmärrät perusasiat. Alla olevien ideoiden pitäisi innostaa sinua keksimään omia luovia tapojasi käyttää näitä CSS-ominaisuuksia.
Kaksiväriset reunat kahdella CSS-laatikon varjolla
Voit lisätä HTML-elementtiin useita varjoja tai tekstivarjoja. Niin kauan kuin niiden välissä on pilkkuja, voit lisätä uusia varjoja yhteen ominaisuuteen.
laatikko-varjo: 30px 30px#0000ff, -30 kuvapistettä-30 kuvapistettä 0px#00ff00;Tämä kaksivärinen reunus on hyvä esimerkki tästä. Kaksi CSS-laatikon varjoa vastakkaisilla paikoilla ja ilman sumennusta/levitystä tuottavat erinomaisen luovan reunuksen.
Kaksi CSS-tekstivarjoa dramaattiseen tehosteeseen
Yllä olevan idean mukaisesti voit lisätä ja sijoittaa tekstiä useita tekstivarjoja saadaksesi mielenkiintoisia tuloksia.
tekstivarjo: 35px 20px 4px tummanharmaa, -35px -20px 4px tummanharmaa;Tässä esimerkissä näkyy tekstirivi, jonka yläpuolella ja alapuolella on varjo. Molemmilla on tekstipohjaiset väriarvot.
Moniväriset taustat upotetuilla CSS-laatikon varjoilla
CSS on tarpeeksi tehokas luomaan ainutlaatuisia ja mielenkiintoisia resursseja ilman ulkoisia tiedostoja. Upotetun CSS-laatikon varjon käyttäminen taustana on hyvä esimerkki tästä.
laatikko-varjo: 20px 10px 10px 40px #000000 upotettu, -50px -30px 8px 60px harmaa upote, 30px 20px 6px 90px vaaleanharmaa upote;Tässä laatikossa on valkoinen tausta ja kolme upotettua varjoa eri väreissä. Varjot menevät päällekkäin ja luovat ainutlaatuisen taustan.
Tämän vaikutuksen lisääminen edelleen on yksinkertainen asia lisäämällä tyylikäs CSS-taustagradientti elementtiisi.
CSS-ruutuvarjot ja tekstivarjot luovaan verkkosuunnitteluun
CSS-ruutua ja tekstivarjoja on helppo käyttää, kun osaat työskennellä niiden kanssa. Sinulla on nyt työkalut, joita tarvitset omien suunnitelmiesi työskentelyn aloittamiseen, mutta sinun tulee jatkaa CSS-tutkimuksen tekemistä parantaaksesi taitojasi.
