TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda laatikkovarjoja CSS: n avulla?

3

CSS "box-shadow" -ominaisuuden avulla voit luoda yksinkertaisia ​​varjotehosteita sivusi elementteihin. Tämän ominaisuuden avulla voit luoda kauniita laatikoita, joissa on varjotehoste ylä-, ala-, oikealle ja vasemmalle. Tässä opetusohjelmassa käytämme: ennen pseudoelementtiä luoda erilaisia ​​varjotehosteiden tyylejä tekstiruutuun.

Aiheeseen liittyviä: Kuinka muuntaa fontin mahtava kuvake kuvaksi?

CSS box-shadow -ominaisuuden syntaksi

Box-shadow-ominaisuuden syntaksi on seuraava:

box-shadow: horizontal offset | vertical offset | blur | spread | color | direction

Alla on esimerkki laatikon varjosta: 10px 10px 10px 10px green inset; käytetään div -elementin kanssa:

Box Shadow upotuksella

Upotusarvo osoittaa, että varjon suunnan tulee olla elementin sisällä. Voit käyttää alkua varjoefektin luomiseksi elementin ulkopuolelle.

Kuinka luoda varjotehosteita CSS: n avulla?

Jatkakaamme varjoefektin luomista CSS -pseudoelementin avulla. Luo ensin laatikko alla olevan CSS -koodin avulla. Jätämme laatikon määrittelemättä mittoja, jos haluat käyttää tiettyjä korkeus- ja leveysarvoja.

.box { background-color:#CDDC39; color: #333333; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border: 1px solid #cccccc; margin: 20px; padding: 15px; font-size: 18px; }

Luo seuraavaksi varjo alla olevalla CSS: llä:

.shadow { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .shadow:before { position: absolute; z-index: -1; display: block; background: rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7); content: ""; }

Näytämme varjon vasemmalla puolella ja säätämme sijaintia käyttämällä ala- ja vasemmanpuoleisia arvoja.

.left-shadow:before { bottom: 25px; left: 20px; width: 60%; height: 20px; -webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); }

Kuten vasen varjo, määritä erilliset tyylit oikealle, alhaalle ja yksinkertaiselle varjolle alla.

.right-shadow:before { right: 20px; bottom: 25px; width: 60%; height: 20px; -webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } .bottom-shadow:before { right: 20px; bottom: 0; left: 20px; height: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .simple-shadow:before { right: 20px; bottom: 0; left: 20px; height: 30px; }

Varjotehosteiden HTML

S -varjolaatikon luomiseksi meidän on käytettävä yhtä yllä olevista kolmesta HTML -CSS -luokasta.

  • laatikko luokka
  • varjo luokka
  • valitse yksi varjotyyleistä-vasen varjo, oikea varjo, alavarjo tai yksinkertainen varjo

Esimerkiksi alla on HTML -koodi vasemman varjon lisäämiseksi div -elementtiin:

<div class="box shadow left-shadow"> This is a text box with left shadow. The text inside the box is aligned with "height: 100px; width: 70%; margin: 20px; padding: 15px; font-size: 18px;". The shadow in the left is aligned with "bottom: 25px; left: 20px; width: 60%; height: 20px;". </div>

CSS Shadow Effects -esittely

Voit säätää CSS: ää ja luoda oikean varjon, alavarjon ja tavallisen varjon tehosteita. Alla on joitain demoja, joissa on CSS -varjotehosteita.

Vasemmanpuoleinen varjotehoste

Tämä on tekstiruutu, jossa on vasen varjo. Laatikon sisällä oleva teksti on kohdistettu "korkeus: 100 pikseliä; leveys: 70%; marginaali: 20 kuvapistettä; täyte: 15 kuvapistettä; fontin koko: 18 pikseliä". Vasemmanpuoleinen varjo on kohdistettu "alaosa: 25 kuvapistettä; vasen: 20 kuvapistettä; leveys: 60%; korkeus: 20 kuvapistettä".

Oikeanpuoleinen varjotehoste

Tämä on tekstiruutu, jossa on oikea varjo. Laatikon sisällä oleva teksti on kohdistettu "korkeus: 100 pikseliä; leveys: 70%; marginaali: 20 kuvapistettä; täyte: 15 kuvapistettä; fontin koko: 18 pikseliä". Oikealla oleva varjo on kohdistettu "oikea: 20 kuvapistettä; alaosa: 25 kuvapistettä; leveys: 60%; korkeus: 20 kuvapistettä".

Alempi CSS -varjotehoste

Tämä on tekstiruutu, jossa on alavarjo. Laatikon sisällä oleva teksti on kohdistettu "korkeus: 100 pikseliä; leveys: 70%; marginaali: 20 kuvapistettä; täyte: 15 kuvapistettä; fontin koko: 18 pikseliä". Alareunassa oleva varjo on kohdistettu muotoon "oikea: 20 kuvapistettä; alaosa: 0; vasen: 20 kuvapistettä; korkeus: 30 kuvapistettä;".

Yksinkertainen CSS Shadow Box

Tämä on tekstiruutu, jossa on yksinkertainen varjo. Laatikon sisällä oleva teksti on kohdistettu "korkeus: 100 pikseliä; leveys: 70%; marginaali: 20 kuvapistettä; täyte: 15 kuvapistettä; fontin koko: 18 pikseliä". Varjo on kohdistettu muotoon "oikea: 20 kuvapistettä; alaosa: 0; vasen: 20 kuvapistettä; korkeus: 30 kuvapistettä;".

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja