Ilman pimeyttä ei ole valoa, ilman varjoa ei ole muotoa.Jopa naisten perusmeikkityökalua kutsutaan ”luomiväri”. Jos haluat tuoda kauneutta sivustosi sivuille, sinun on asetettava oikeat korostukset - lisää CSS-varjo tarvittaessa.
Alla kuvattu materiaali auttaa opettelemaan, miten lohkon tai kuvan varjo asetetaan käyttämällä CSS-koodia.
CSS-varjo. syntaksi
Oikeastaan laatikko-varjo, missä laatikko on lohko ja varjo on itse varjo.
Koodi on kirjoitettu aaltosulkeilla:
{laatikko-varjo: 11px 22px 33px 44px # 333333;}.
Rivi kertoo meille, että lohkolle annetaan vakiovarjo pikselin säteellä. Tiedot puretaan seuraavasti:
- 11px - varjon siirtymä lohkoon nähden X-akselia pitkin (positiivinen arvo (20px) aiheuttaa varjon siirtymisen oikealle, negatiivisen (-37 pikseliä) vasemmalle);
- 22 kuvapistettäasettamalla varjo lohkoon Y-akselia pitkin (positiivinen arvo (5px) johtaa varjon siirtymiseen alas, negatiivisen (-17px) - ylöspäin);
- 33 kuvapistettä - tämä on hämärtämisparametri, mitä suurempi luku, sitä voimakkaampi vaikutus;
- 44px - varjon säde on myös suoraan verrannollinen;
- # 333333 - väri, jolla varjo maalataan.
Kolme viimeistä parametria ovat valinnaisia, eikä niitä välttämättä yksinkertaisesti määritetä rivillä, ts. {Box-shadow: 10 kuvapistettä 13 kuvapistettä;} - tällainen rivi ei ole virheellinen (varjon väri on identtinen lohkon tekstin värin kanssa).
Таким образом, создание тени на страницах вашего Sivusto ei ole vaikea, mutta kuinka monta silmään miellyttävää vaikutusta voit luoda! Tee aivoriiheestäsi ainutlaatuisempaa, ainutlaatuista, koska suunnittelussa jokainen yksityiskohta on tärkeä, jokainen yksityiskohta. Tässä näyttää siltä, ettei mitään erityistä, mutta sen kanssa se on paljon mielenkiintoisempi ja houkuttelevampi.
Katsotaanpa muutamia havainnollistavia esimerkkejä siitä, kuinka lohkon CSS-varjo näyttää koodauksesta riippuen:
- {laatikko-varjo: 25px 25px;} - CSS-varjo, jonka akselivaihtelu on 25 pikseliä.
- {laatikko-varjo: 25px 25px 10px;} - CSS-varjo, jonka akselivaihto on 25 pikseliä ja reunat hämärtyvät 10 pikselillä.
- {laatikko-varjo: 25 kuvapistettä 25 pikseliä 10 pikseliä 5 pikseliä;} - CSS-varjo, jonka akselivaihto on 25 pikseliä, reunat hämärtyvät 10 pikselillä ja määritetty säde 5 pikseliä
- {laatikko-varjo: 25x25xx10xxpx 5px # 9e9e9e;} - CSS-varjo, jonka akseliväli on 25 pikseliä, hämärtää reunoja 10 pikselillä, määritelty 5 pikselin säde ja väri.
Varjoefektit
Voit luoda kauniimpia, siroAlkuperäisillä varjoilla on erilaisia vaikutuksia. Voit tehdä sisäisen varjon. Tämän tekemiseksi riittää, että koodissa asetetaan parametrien eteen "inset", sitten parametrien kuvaus menee normaalisti:
{laatikko-varjo: upotettu 4 pikseliä 2px 6px # 9e9e9e;}.
On mahdollista laittaa useita varjoja täysin erilaisilla parametreilla lohkon alle, koodiin ne (varjot) luetellaan pilkulla:
{laatikko-varjo: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.
Varjokuva
Sen lisäksi, että lohkot sivuston sivuilla varmastiKuvat, valokuvat, taustat - kaikki nämä elementit näyttävät myös varjoilta paljon mielenkiintoisemmilta. Voit alustaa kuvat grafiikkaeditorissa ja liittää ne sivulle jo varjoilla. Mutta ensinnäkin, tämä ei ole aina mahdollista monista syistä, mukaan lukien grafiikan käsittelyyn liittyvien taitojen puutteen takia, ja toiseksi, kaikki kuvankäsittelyt lisäävät siihen painoa, ja tällainen kuva voi hidastaa sivujen lataamista. Tässä tapauksessa voit tehdä kuvan CSS-varjon.
Yksinkertaisin ja syntaktisesti oikea ratkaisu tähän ongelmaan on luoda lohko, jonka kuva on taustana. Seuraavaksi teet lohkolle tarvittavat varjot ja ne näkyvät taustakuvassa:
- .block1 {laatikko-varjo: upotettu 0 0 11px 9px # 9e9e9e; leveys: 480px; korkeus: 360px; tausta: url (images / charlize_theron_2.jpg) 0 0 ei toista;}
Tässä esimerkissä loimme sisäisen varjon ilmanakselien mukaiset siirtymät epäterävyydellä ja säteellä määrittivät lohkon värin, korkeuden ja leveyden ja määrittivät kuvan taustalle. Seurauksena on, että meillä on kuva, jossa on sisäinen varjo.
Olen varma, että varjojen luominen CSS-koodilla on melko yksinkertaista, mutta samalla kiehtovaa ja mikä tärkeintä - hyödyllinen oppitunti.
