10 luovaa tekniikkaa käyttäen CSS3 Box Shadow -ohjelmaa

Olemme nähneet valtavan määrän edistysaskeleita CSS3: n web-kehityksessä viime vuosina. Suosittu verkkosivusto ympäri Internetiä on alkanut sisältää monia ainutlaatuisia tyylejä, kuten pyöristettyjä kulmia ja mobiiliherkkiä mediakyselyjä. Vielä tärkeämpää on, että tämä on avannut oven, jossa luovat rajapinnat voidaan prototyyppiä muutamassa minuutissa.

Tässä artikkelissa haluan jakaa 10 koodinpätkiä, jotka liittyvät loistaviin CSS3-laatikkoihin. Selitän, miten koodi toimii ja miten voit toteuttaa jokaisen laatikon varjon omalle verkkosivustollesi.

Nämä tyylit johtuvat kaikkien muiden suosittujen sivustojen suuresta muotoilusta. Tämä on hyvä esimerkki siitä, miten nykyiset web-kehittäjät rakentavat vaikuttavia suuntauksia web-suunnittelun tulevaisuuteen.

1. Kiinteä Top Toolbar

Romanian sosiaalisen median palvelu Trilulilu käyttää koko sivustonsa ympärillä olevaa kelluvaa yläpalkkia. Tämä voidaan luoda nopeasti käyttämällä a sijainti: kiinteä; ominaisuus missä tahansa yläpalkkielementissä. Mutta tämä lisälaatikko varjo vie vaikutuksen kokonaan uudelle tasolle.

#banner sijainti: kiinteä; korkeus: 60px; leveys: 100%; alkuun: 0; vasen: 0; border-top: 5px kiinteä # a1cb2f; tausta: #fff; -moz-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0,16); -webkit-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0,16); laatikon varjo: 0 2px 3px 0px rgba (0, 0, 0, 0,16); z-indeksi: 999999;  #banner h1 linjan korkeus: 60px;

Huomaat, että laatikko-varjo-ominaisuus on todella perustettu melko yksinkertaisella arvoyhdistelmällä. Varjo putoaa laatikon alapuolelle ja hämärtyy 3px: llä molemmilla puolilla.

Voimme käyttää RGBA () menetelmä lievän opasiteetin levittämiseksi varjoon, joten elementti ei näytä liian tummalta. Se on hienovarainen lisäys, joka varmasti sieppaa kävijän huomion.

esittely

2. Ala-navigointi-pudotus

Tässä on toinen luova laatikon varjostusmenetelmä, jota käytetään skalaari-pudotusvalikossa. Samankaltainen vaikutus on nähtävissä myös yrittäjällä, kun siirryt ylhäältä päävalikkonavigointilinkkiä kohti. Tämä on varmasti hieman vaikeampi konfiguroida, mutta kannattaa kannattaa.

#bar näyttö: lohko; korkeus: 45px; tausta: # 22385a; toppi: 5px; marginaalin pohja: 150px; asema: suhteellinen;  #bar ul marginaali: 0px 15px; font-perhe: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li tausta: # 22385a; näyttö: lohko; fontin koko: 1.2em; asema: suhteellinen; float: vasen;  #bar ul li a näyttö: lohko; väri: # fffff7; linjan korkeus: 45px; font-paino: lihavoitu; pehmuste: 0px 10px; teksti-koristelu: ei; z-indeksi: 9999;  #bar ul li a: hover, #bar ul li a.selected väri: # 365977; tausta: #fff; reunan yläreunan vasen säde: 3px; raja-ylä-oikea-säde: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-säde: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px;  #bar ul .subnav näyttö: lohko; vasen: 14px; alkuun: 48px; z-indeksi: -1; leveys: 500px; asema: absoluuttinen; korkeus: 90px; raja: 1px kiinteä # edf0f3; border-top: 0; pehmuste: 10px 0 10px 10px; ylivuoto piilotettu; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-säde: 3px; raja-ala-oikea-säde: 3px; raja-ala-oikea-säde: 3px; -moz-box-shadow: 0px 2px 7px rgba (0,0,0,0,25); -webkit-box-shadow: 0px 2px 7px rgba (0,0,0,0,25); laatikko-varjo: 0px 2px 7px rgba (0,0,0,0,25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (vahvuus = 3, suunta = 180, väri =" # 333333 ")"; suodatin: progid: DXImageTransform.Microsoft.Shadow (vahvuus = 3, suunta = 180, väri = "# 333333");

Nav-linkit voidaan muotoilla muuttamaan väriä, kun ne on valittu tai hiiren hover. Olen myös lisännyt joitakin pyöristettyjä reunoja linkkeihin ja avattavaan valikkoruutuun. Tämä antaa miellyttävämmän tunteen kuin kovat reunat ympäri. Käytän myös hyvää -ms-suodatin ja suodattaa ominaisuudet, jotka ovat vain Internet Explorerin omistamia.

Jos asennat täyden navigointijärjestelmän, voit muuttaa näytön asetukseksi mitään ja piilottaa valikon sivun lataamisen jälkeen. Sitten voit käyttää jotakin jQuery-ohjelmaa kohdentamalla .hover () -tapahtuman ja näyttämällä aliverkon, jossa on päivitetty sisältö.

esittely

3. Kiiltävä varjo-painike

Tämä on ehkä yksi suosikkityylistäni luodakseni vain sen vuoksi, miten dynaaminen se näkyy sivulla. Jos et voi kertoa, tämä on pieni sininen painike, joka löytyy YouTuben kotisivulta ensimmäisen kirjautumisen jälkeen.

blues väri: #fff; leveys: 190px; korkeus: 35px; kohdistin: osoitin; font-perhe: Arial, Tahoma, sans-serif; fontin koko: 1.0em; font-paino: lihavoitu; -moz-border-säde: 2px; -webkit-border-radius: 2px; raja-säde: 2px; raja-leveys: 1px; raja-väri: # 0053a6 # 0053a6 # 000; taustaväri: # 6891e7; taustakuva: -moz-linear-gradient (alkuun, # 4495e7 0, # 0053a6 100%); taustakuva: -ms-lineaarinen gradientti (alkuun, # 4495e7 0, # 0053a6 100%); taustakuva: -o-lineaarinen gradientti (alkuun, # 4495e7 0, # 0053a6 100%); taustakuva: -webkit-gradientti (lineaarinen, vasen yläosa, vasen alaosa, värin pysäytys (0, # 4495e7), värin pysäytys (100%, # 0053a6)); taustakuva: -webkit-lineaarinen gradientti (alkuun, # 4495e7 0, # 0053a6 100%); taustakuva: lineaarinen gradientti (pohjaan, # 4495e7 0, # 0053a6 100%); teksti-varjo: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: upotetaan 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: upotetaan 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: upotetaan 0 1px 0 rgba (256, 256, 256, .35); box-shadow: upotetaan 0 1px 0 rgba (256, 256, 256, .35); suodatin: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover border-color: # 002d59 # 002d59 # 000; -moz-box-shadow: upotetaan 0 1px 0 rgba (256, 256, 256, 0,55), 1 x 1px 3px rgba (0, 0, 0,25); -ms-box-shadow: upotetaan 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0,25); -webkit-box-shadow: upotettu 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0,25); box-shadow: upotetaan 0 1px 0 rgba (256, 256, 256, 0,55), 1px 1px 3px rgba (0, 0, 0, 25); suodatin: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); taustakuva: -moz-linear-gradient (alkuun, # 3a8cdf 0, # 0053a6 100%); taustakuva: -ms-lineaarinen gradientti (alkuun, # 3a8cdf 0, # 0053a6 100%); taustakuva: -o-lineaarinen gradientti (alkuun, # 3a8cdf 0, # 0053a6 100%); taustakuva: -webkit-gradientti (lineaarinen, vasen yläosa, vasen alaosa, värin pysäytys (0, # 3a8cdf), värin pysäytys (100%, # 0053a6)); taustakuva: -webkit-lineaarinen gradientti (alkuun, # 3a8cdf 0, # 0053a6 100%); taustakuva: lineaarinen gradientti (pohjaan, # 3a8cdf 0, # 0053a6 100%);  .blues: aktiivinen border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: upotettu 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow: upotettu 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-shadow: upotettu 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; laatikko-varjo: upotettu 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; suodatin: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); taustakuva: -moz-linear-gradient (alkuun, # 005ab4 0, # 175ea6 100%); taustakuva: -ms-lineaarinen gradientti (alkuun, # 005ab4 0, # 175ea6 100%); taustakuva: -o-lineaarinen gradientti (alkuun, # 005ab4 0, # 175ea6 100%); taustakuva: -webkit-gradientti (lineaarinen, vasen yläosa, vasen pohja, värin pysäytys (0, # 005ab4), värin pysäytys (100%, # 175ea6)); taustakuva: -webkit-lineaarinen gradientti (alkuun, # 005ab4 0, # 175ea6 100%); taustakuva: lineaarinen gradientti (pohjaan, # 005ab4 0, # 175ea6 100%);

Koko painikkeen koodi on paljon tarkasteltavissa, mutta yritämme tukemaan mahdollisimman monta selainta. MS Internet Explorer 7+ -sovelluksen tuella on tekstiä varjoja ja laatikon varjoja. Lisäksi asetamme taustakuva ominaisuus, jossa on CSS3-gradientit, useiden valmistajan erityisten etuliitteiden kohdalla.

Mutta jos rakastat tätä muotoilutyyliä Hover ja aktiiviset valtiot myös kiinnittävät huomionne. Päivitämme periaatteessa rajaa sisällyttämällä joitakin varjoja sisälle, kun painat alaspäin, kun päivität taustaväliä hieman tummemmaksi.

Koska painikkeella ei ole kuvia, voit päivittää hex-arvot ja morph tätä yhdistelemään käytännöllisesti katsoen mihin tahansa värimaailmaan.

esittely

4. Ilmoitukset Flyout-valikko

En ole suuri käyttäjä Facebookissa, mutta olen huomannut joitakin UI-tekniikoita uudelleensuunnittelusta. Tätä räjähdysvalikkoa voidaan verrata kotisivullasi oleviin ilmoituksiin tai ystäväpyyntöihin.

.flyout leveys: 310px; margin-top: 10px; kirjasinkoko: 11px; asema: suhteellinen; font-perhe: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; taustaväri: valkoinen; pehmuste: 9px 11px; tausta: rgba (255, 255, 255, 0,9); raja: 1kpl kiinteä # c5c5c5; -webkit-box-shadow: 0 3px 8px rgba (0, 0, 0, 25); -moz-box-shadow: 0 3px 8px rgba (0, 0, 0, 25); box-shadow: 0 3px 8px rgba (0, 0, 0, 25); -webkit-border-radius: 3px; -moz-border-säde: 3px; raja-säde: 3px;  .flyout #tip background-image: url ('images / tip.png'); tausta-toisto: ei-toista; taustakoko: auto; korkeus: 11px; asema: absoluuttinen; alkuun: -11px; vasen: 25px; leveys: 20px;  .flyout h2 text-transform: isot kirjaimet; väri: # 666; fontin koko: 1.2em; pehmustettu pohja: 5px; marginaalipohja: 12px; reunapohja: 1px kiinteä #dcdbda;  .flyout p padding-bottom: 25px; fontin koko: 1.1em; väri: # 222;

Tässä ei näy paljon uutta mielen taivutuskoodia. Käytän pientä .kärki luokka, jossa on sisäinen span-elementti, jotta työkalutyypin kolmio voidaan lisätä. On mahdollista luoda puhtaita CSS3-kolmioita, mutta tämä menetelmä ei ole helppoa, kuten kuvitellaan. Jos pidät tätä menetelmää mieluummin, kannattaa hakata jotain yhdessä. CSS3-kiertoominaisuuksia ei kuitenkaan tueta kaikkialla; samanaikaisesti kuvat eivät vaadi varamenetelmää.

esittely

5. Apple Page Wrapper

Applen virallisilla verkkosivuilla on niin paljon vaikuttavia CSS3-laatikkovärejä. Tämä esimerkki on pieni laatikkosäiliö, jossa on muutama sarake. Kun katsot Applen ulkoasua, huomaat, että monet niiden sivut koostuvat lukuisista kääreistä.

.applewrap leveys: 100%; näyttö: lohko; korkeus: 150px; tausta: valkoinen; raja: 1kpl kiinteä; reunaväri: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-säde: 4px; raja-säde: 4px; -webkit-box-shadow: rgba (0, 0, 0, 0,3) 0 1px 3px; -moz-box-shadow: rgba (0,0,0,0.3) 0 1px 3px; laatikko-varjo: rgba (0, 0, 0, 0,3) 0 1px 3px;  .applewrap .col float: vasen; laatikon koko: raja-laatikko; leveys: 250px; korkeus: 150px; pehmuste: 16px 7px 6px 22px; fontti: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; väri: # 343434; raja-oikea: 1kpl kiinteä #dadada;

Voit koota samanlaisen sivun, joka on jaettu eri leveys- ja korkeuslaatikoihin. Vaikka olen esittänyt muutamia sarakkeita tähän demoon, se ei ole välttämätön muotoilutekniikka millään tavalla. Laatikon varjo sopii parhaiten valkoiseen / harmaaseen taustaan. Mutta mielestäni valon värin näyttäminen näyttää hyvältä.

esittely

6. Apple Content Box

Tätä muuta Applen verkkosivuston sisältölaatikkoa käytetään lähinnä sarakekuvioihin. Nämä ovat ensisijaisesti sivun alareunassa, jossa esitetään tarjouksia ja muita niihin liittyviä tietoja. Se on täysin erilainen muotoilu, jossa laatikon varjo näyttää ylhäältä alaspäin.

.applebox leveys: auto; korkeus: 85px; laatikon koko: raja-laatikko; tausta: # f5f5f5; pehmuste: 20px 20px 10px; marginaali: 10px 0 20px; raja: 1px kiinteä #ccc; raja-säde: 4px; -webkit-border-radius: 4px; -moz-border-säde: 4px; -o-raja-säde: 4px; -webkit-box-shadow: 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: 0px 1px 1px rgba (0, 0, 0, .3); laatikko-varjo: upotetaan 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col leveys: 140px; float: vasen; marginaali: 0 0 30px;

En usko tämän koodin olevan liian vaikeaa seurata ja kopioida toiseen div-konttiin. Ainoa ruutu-varjo, jota haemme, on käytössä liite rgba-alfa-läpinäkyvien värikoodien kanssa. Joten vaikka varjostusvarjo on asetettu puhtaaksi mustaksi, näytämme vain noin 30%: n opasiteettia.

esittely

7. Suositellut linkit

Tämä on luultavasti minun suosikkilaatikkoni, joka on Applen nykyisestä verkkosivustosta. ICloud-sivulla on löydettävä tämän tekniikan live-demo-tyyli, jossa on useita kelluvia linkkilaatikoita.

.applefeature korkeus: 150px; marginaali: 8px; pystysuuntainen: alkuun; näyttö: inline-block;  .applefeature a näyttö: lohko; leveys: 168px; korkeus: 140px; raja: 1px kiinteä #ccc; väri: # 333; teksti-koristelu: ei; font-paino: lihavoitu; linjan korkeus: 1.3em; tausta: # f7f7f7; -webkit-box-shadow: upotetaan 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: upotetaan 0 1px 2px rgba (0, 0, 0, .3); laatikko-varjo: upotettu 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-säde: 4px; raja-säde: 4px;  .applefeature a: hover background: #fafafa; tausta: -webkit-gradientti (lineaarinen, 0% 0%, 0% 100%, alkaen (#fff), (# f7f7f7)); tausta: -moz-lineaarinen gradientti (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: upotetaan 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: upotettu 0 1px 2px rgba (0,0,0, .3); laatikko-varjo: sis. 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-border-säde: 4px; raja-säde: 4px;  .applefeature a img näyttö: lohko; marginaali: 26px auto 4px;  .applefeature a h4 näyttö: lohko; leveys: 160px; fontin koko: 1.3em; font-perhe: Arial, Tahoma, sans-serif; väri: # 646464; text-align: center;

Nämä linkit on asetettu kiinteälle leveydelle ja ne sisältävät erillisen kuvakkeen ja näytön tekstin. Applen esimerkki käyttää samanlaista laatikon varjoa kuin edellisessä sisältölaatikossa. kuitenkin koko laatikko voidaan nyt aktivoida linkkinä joka sisältää sekä : hover ja : aktiivinen toteaa. Tällä linkkikentällä on paljon joustavuutta, ja sinun pitäisi yrittää toistaa lähdekoodia.

Korkeutta / leveyttä on mahdollista lyhentää ja luoda paljon pienempi luettelo linkeistä. Nämä voivat olla joukko artikkeleita tai sivuja, tai voit tehdä alivalikon, jossa on linkkikuvakkeet. Se on rehellisesti suuri joukko uudempia CSS3-tekniikoita, jotka osoittavat kuinka paljon voimaa sinulla on web-suunnittelijana.

esittely

8. Kehystetyt kuvat

Olen lisännyt harmaan taustan tähän esimerkkiin, jotta voit nähdä laatikon varjo-tyylit selkeämmin. Tämä ruutu on samanlainen kuin Wordpress.comin esikatselukuvat, paitsi että olen lisännyt hieman enemmän syvyyttä lähdekoodiin.

.wpframe tausta: #fff; raja-säde: 2px; -webkit-border-radius: 2px; -moz-border-säde: 2px; pehmuste: 8px; -webkit-box-shadow: 1kpl 2px 1px # d1d1d1; -moz-box-shadow: 1kpl 2px 1px # d1d1d1; box-shadow: 1kpl 2px 1px # d1d1d1;

Koska kuville annetaan pieni pehmuste kummallakin puolella, tämä kehys näkyy suurena valkoisena reunana. Voit aina päivittää taustavärin tai jopa lisätä pienen ulkorajan erottaaksesi kuvan taustasta. Mutta tämä melko yksinkertainen joukko tyylejä voidaan ohjata erilaisiin laatikkovarusteisiin tekniikoihin. Toista koodi ja katso, miten voit parantaa kuvien suunnittelua omalla verkkosivustolla.

esittely

9. Hehkuva syöttökentät

Sain tämän ajatuksen, kun vierailin Pinterest kirjautumissivulla pari kertaa. Niiden animoidut tyylit näyttävät todella joitakin kauniita esimerkkejä useista sisäisistä ruudun varjoista, sekä ulko- että sisäpuolelta.

.formwrap display: block; marginaalipohja: 15px;  .formwrap etiketti display: inline-block; leveys: 80px; kirjasinkoko: 11px; font-paino: lihavoitu; väri: # 444; font-perhe: Arial, Tahoma, sans-serif;  .formwrap .shadowfield sijainti: suhteellinen; leveys: 250px; kirjasinkoko: 17px; font-perhe: "Helvetica Neue", Arial, sans-serif; font-weight: normaali; tausta: # f7f8f8; väri: # 7c7c7c; linjan korkeus: 1,4; pehmuste: 6px 12px; ääriviivat: ei; siirtyminen: kaikki 0,2s: n helppokäyttöisyys 0; -webkit-siirtyminen: kaikki 0,2s: n helppokäyttöisyys 0; -moz-siirtyminen: kaikki 0.2s: n helppokäyttöisyys 0; raja: 1px kiinteä # ad9c9c; raja-säde: 6px 6px 6px 6px; laatikko-varjo: 0 1px rgba (34, 25, 25, 0,2) insetti, 0 1px #fff;  .formwrap .shadowfield: focus border-color: # 930; tausta: #fff; väri: # 5d5d5d; laatikko-varjo: upotettu 0 1px rgba (34, 25, 25, 0,2), 0pp rgba (255, 255, 255, 0,6), 0 7px rgba (235, 82, 82, 0,5); -moz-box-varjo: upotettu 0 1px rgba (34, 25, 25, 0,2), 0pp rgba (255, 255, 255, 0,6), 0 7px rgba (235, 82, 82, 0,5); -webkit-box-shadow: upotettu 0 1px rgba (34, 25, 25, 0,2), 0pp rgba (255, 255, 255, 0,6), 0 7px rgba (235, 82, 82, 0,5);

Vaikka alkuperäiset tyylit ovat hyvin houkuttelevia, olen vedetty siirtymätehosteet, kun keskität kullekin tulokentälle. Voit siirtyä niiden välillä ja nähdä välitön ero niin monissa ominaisuuksissa. Ulkoista hehkuvan ruudun varjoa käytetään yhdessä päivitetyn sisäänrakennetun varjon kanssa. Myös tekstin väri muuttuu kevyemmäksi, kun olet keskittynyt tiettyyn syötteeseen, ja sitten haalistuu, kun tarkennat.

Jopa kopiointi yhdellä näistä vaikutuksista parantaisi huomattavasti lomakekenttien käyttäjäkokemusta. Varmista, että et mene liian pitkälle yli siihen pisteeseen, jossa lomakkeet ovat tuskin käyttökelpoisia. Useimmat kävijät nauttivat kuitenkin miellyttävistä esteettisistä vaikutuksista, jotka myös kannustavat vuorovaikutusta ja lisää osallistumista sivustoosi.

esittely

10. Elastiset varjopainikkeet

Nämä ainutlaatuiset varjopainikkeet on tyylitelty hitaalla siirtymisellä hover- ja aktiivisten tilojen aikana. Samankaltaisia esimerkkejä löytyy Mozillan etusivulta suurilla “Lataa Firefox” painiketta. Jotkut box-varjo ominaisuudet yhdistävät tosiasiallisesti kolme eri varjoa yhteen komennoksi.

.blu-btn display: inline-block; -moz-border-säde: .25em; raja-säde: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), upotus 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), upotettu 0 -2px 0 0 rgba (0,0,0,0.2); laatikko-varjo: 0 2px 0 0 rgba (0,0,0,0.1), upotettu 0 -2px 0 0 rgba (0,0,0,0.2); taustaväri: # 276195; taustakuva: -moz-linear-gradient (# 3c88cc, # 276195); taustakuva: -ms-linear-gradient (# 3c88cc, # 276195); taustakuva: -webkit-gradientti (lineaarinen, vasen yläosa, vasen pohja, värin pysäytys (0%, # 3c88cc), värin pysäytys (100%, # 276195)); taustakuva: -webkit-lineaarinen-gradientti (# 3c88cc, # 276195); taustakuva: -o-lineaarinen gradientti (# 3c88cc, # 276195); suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; taustakuva: lineaarinen gradientti (# 3c88cc, # 276195); raja: 0; kohdistin: osoitin; väri: #fff; teksti-koristelu: ei; text-align: center; kirjasinkoko: 16px; pehmuste: 0px 20px; korkeus: 40px; linjan korkeus: 40px; min-leveys: 100px; teksti-varjo: 0 1px 0 rgba (0,0,0,0,35); font-perhe: Arial, Tahoma, sans-serif; -webkit-siirtyminen: kaikki lineaariset .2s; -moz-siirtyminen: kaikki lineaariset .2s; -o-siirtyminen: kaikki lineaariset .2s; -ms-siirtyminen: kaikki lineaariset .2s; siirtyminen: kaikki lineaariset .2s .blu-btn: hover, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), upotettu 0 -2px 0 0 rgba (0,0,0,0,3), sis. 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), upotettu 0 -2px 0 0 rgba (0,0,0,0.3), upotettu 0 12px 20px 2px # 3089d8; laatikko-varjo: 0 2px 0 0 rgba (0,0,0,0.1), upotettu 0 -2px 0 0 rgba (0,0,0,0.3), upotettu 0 12px 20px 2px # 3089d8;  .blu-btn: aktiivinen -webkit-box-shadow: upotettu 0 2px 0 0 rgba (0,0,0,0.2), upotettu 0 12px 20px 6px rgba (0,0,0,0.2), upotettu 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: upotettu 0 2px 0 0 rgba (0,0,0,0.2), upotettu 0 12px 20px 6px rgba (0,0,0,0.2), upotettu 0 0 2px 2px rgba (0,0, 0,0.3); laatikko-varjo: sisäkkäinen 0 2px 0 0 rgba (0,0,0,0.2), sis. 0 12px 20px 6px rgba (0,0,0,0.2), upotettu 0 0 2px 2px rgba (0,0,0,0,3 );  .grn-btn display: inline-block; -moz-border-säde: .25em; raja-säde: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), upotus 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), upotettu 0 -2px 0 0 rgba (0,0,0,0.2); laatikko-varjo: 0 2px 0 0 rgba (0,0,0,0.1), upotettu 0 -2px 0 0 rgba (0,0,0,0.2); taustaväri: # 659324; taustakuva: -moz-linear-gradient (# 81bc2e, # 659324); taustakuva: -ms-linear-gradient (# 81bc2e, # 659324); taustakuva: -webkit-gradientti (lineaarinen, vasen yläosa, vasen pohja, värin pysäytys (0%, # 81bc2e), värin pysäytys (100%, # 659324)); taustakuva: -webkit-lineaarinen gradientti (# 81bc2e, # 659324); taustakuva: -o-lineaarinen gradientti (# 81bc2e, # 659324); suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; taustakuva: lineaarinen gradientti (# 81bc2e, # 659324); raja: 0; kohdistin: osoitin; väri: #fff; teksti-koristelu: ei; text-align: center; kirjasinkoko: 16px; pehmuste: 0px 20px; korkeus: 40px; linjan korkeus: 40px; min-leveys: 100px; teksti-varjo: 0 1px 0 rgba (0,0,0,0,35); font-perhe: Arial, Tahoma, sans-serif; -webkit-siirtyminen: kaikki lineaariset .2s; -moz-siirtyminen: kaikki lineaariset .2s; -o-siirtyminen: kaikki lineaariset .2s; -ms-siirtyminen: kaikki lineaariset .2s; siirtyminen: kaikki lineaariset .2s;  .grn-btn: hover, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), upotettu 0 -2px 0 0 rgba (0,0,0 , 0,3), upotettu 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), upotettu 0 -2px 0 0 rgba (0,0,0,0.3), upotettu 0 12px 20px 2px # 85ca26; laatikko-varjo: 0 2px 0 0 rgba (0,0,0,0.1), upotettu 0 -2px 0 0 rgba (0,0,0,0.3), upotettu 0 12px 20px 2px # 85ca26;  .grn-btn: aktiivinen -webkit-box-shadow: upotettu 0 2px 0 0 rgba (0,0,0,0.2), upotettu 0 12px 20px 6px rgba (0,0,0,0.2), upotettu 0 0 2px 2px rgba (0,0,0,0,3); -moz-box-shadow: upotettu 0 2px 0 0 rgba (0,0,0,0.2), upotettu 0 12px 20px 6px rgba (0,0,0,0.2), upotettu 0 0 2px 2px rgba (0,0, 0,0.3); laatikko-varjo: sisäkkäinen 0 2px 0 0 rgba (0,0,0,0.2), sis. 0 12px 20px 6px rgba (0,0,0,0.2), upotettu 0 0 2px 2px rgba (0,0,0,0,3 );

Käytän täysimittaisia siirtymiä 200 millisekunnin hover- ja aktiivipainikkeissa. Nämä tyylit ovat niin suuria, että voit soveltaa niitä lähes kaikkiin napsautettaviin elementteihin. Painikkeet, ankkurilinkit, lomakkeen elementit tai mikä tahansa muu mielestänne sopiva - vaikka näitä tyylejä tulisi käyttää harvoin, jotta suunnittelua ei ylikuormiteta.

Tällaiset painikkeet tallennetaan usein parhaiten samalla tavalla kuin Mozilla käyttää niitä. Liitä nämä tyylit blogiin, jossa on painikkeita ilmaistarjouksia varten tai jotain vastaavaa. Käyttäjät rakastavat vuorovaikutusta ainutlaatuisten rajapintojen kanssa ja tämä tarkoittaa usein suurempaa prosenttiosuutta napsautussuunnitelmastasi.

esittely

Lopulliset ajatukset

Toivon, että voit ottaa pois joitakin hienoja oppitunteja tästä laatikon varjostekniikan kokoelmasta. Voit keskittyä moniin eri alueisiin, kuten lomakkeisiin, modaalilaatikoihin, painikkeisiin, työkaluriveihin ja jopa koko sivuston asetteluun.

Voit vapaasti toteuttaa jotakin näistä varjoefekteistä oman verkkosivustosi osiin. Siellä on paljon muita tekniikoita, mutta tämä kokoelma on täydellinen sekä aloittelijoille että kehittyneille kehittäjille. Jos sinulla on myös ehdotuksia tai kysymyksiä artikkelista, jonka voit jakaa kanssamme alla olevissa kommenttikeskustelualueissa.