01/04
Ristiselaimen lineaaristen gradienttien luominen CSS3: lla
Lineaariset gradientit
Yleisin kaltevuustyyppi näet on lineaarinen gradientti kahdesta väristä. Tämä tarkoittaa, että gradientti liikkuu suorassa viivassa, joka muuttuu vähitellen ensimmäisestä väristä toiseen toisella linjalla. Tämän sivun kuva näyttää yksinkertaisen # 999 (tummanharmaa) vasemmalta oikealle suuntaan #fff (valkoinen).
Lineaariset kaltevuudet ovat helpoin määritellä ja niillä on eniten tukea selaimissa. CSS3-lineaarisia kaltevuuksia tuetaan Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ ja Safari 4+. Internet Explorer voi lisätä kaltevuuksia suodattimen avulla ja tukee niitä takaisin IE 5.5: een. Tämä ei ole CSS3, mutta se on vaihtoehto selaimen yhteensopivuudesta.
Kun määrität gradientin, sinun on määriteltävä useita eri asioita:
- Minkä tyyppinen gradientti on lineaarinen tai säteittäinen
- Jos gradientti tulisi aloittaa
- Jos gradientin pitäisi pysähtyä
- Mitkä värit ovat kaltevuusalueella ja mihin niiden pitäisi alkaa ja pysähtyä
Voit määrittää lineaariset gradientit CSS3: n avulla kirjoittamalla:
lineaarinen gradientti ( kulma tai sivu tai kulma , värin pysäytys , värin pysäytys )
- Ensin määrität gradientin tyypin lineaarisella gradientilla.
- Sitten määrität kaltevuuden aloitus- ja pysäytyskohteet kahdella tavalla: linjan kulma asteina 0-359, 0 astetta suoraan ylöspäin. Tai "sivulta tai kulmasta", kuten vasemmalle, oikealle, alhaalta ja ylhäältä. Näitä selostetaan yksityiskohtaisemmin seuraavalla sivulla. Jos jätät nämä pois, kaltevuus kulkee elementin yläosasta alareunaan.
- Sitten määrität väriesteet. Voit määrittää värin pysäkit värikoodilla ja vapaaehtoisella prosenttiosuudella. Prosentti kertoo selaimelle, missä rivi alkaa tai päättyy kyseiseen väriin. Oletus on sijoittaa värit tasaisesti linjaa pitkin. Saat lisätietoja värinsäilytyksistä sivulla 3.
Joten määrität edellä mainitun gradientin CSS3: lla, kirjoitat:
lineaarinen gradientti (vasen, # 999999 0%, #ffffff 100%);
Ja asettaa se DIV: n taustaksi kirjoitat:
div {
taustakuva: lineaarinen gradientti (vasen, # 999999 0%, #ffffff 100%;
}
Selaimen laajennukset CSS3-lineaarisille gradienteille
Jotta kaltevuus toimisi selaimessa, sinun on käytettävä selaimen laajennuksia useimmille selaimille ja suodatin Internet Explorer 9: lle ja pienemmälle (tosiasiallisesti 2 suodattimelle). Kaikki nämä ottavat samoja elementtejä määriteltäessäsi kaltevuutesi (paitsi että voit määrittää vain 2 värin kaltevuudet IE: ssä).
Microsoftin suodattimet ja laajennus -Internet Explorer ovat haastavin tuki, koska tarvitset kolme eri riviä eri selainversioiden tukemiseen. Jos haluat saada yllä olevan harmaan valkoisen kaltevuuden, kirjoittaisit:
/ * IE 5.5-7 * /
suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-suodatin: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-lineaarinen gradientti (vasen, # 999999 0%, #ffffff 100%);
Mozilla Extension -Mobi-laajennus toimii kuten CSS3-ominaisuus, vain -moz-laajennuksella. Voit saada edellä mainitun kaltevuuden Firefoxille kirjoittamalla:
-moz-lineaarinen gradientti (vasen, # 999999 0%, #ffffff 100%);
Opera Extension -The -o-laajennus lisää kaltevuudet Opera 11.1+ -ohjelmaan. Saadaksesi edellä mainitun gradientin, kirjoita:
-o-lineaarinen gradientti (vasen, # 999999 0%, #ffffff 100%);
Webkit Extension -The -webkit- laajennus toimii paljon kuin CSS3-ominaisuus. Voit määrittää edellä mainitun gradientin Safari 5.1+- tai Chrome 10+ -kirjoille kirjoittamalla:
-webkit-lineaarinen gradientti (vasen, # 999999 0%, #ffffff 100%);
Myös vanhempi versio Webkit-laajennuksesta, joka toimii Chrome 2+: n ja Safari 4+: n kanssa. Siinä määrität kaltevuuden tyypin arvon sijasta omaisuuden nimeä. Jos haluat harmaan valkoisen kaltevuuden tämän laajennuksen kanssa, kirjoita:
-webkit-gradientti (lineaarinen, vasen ylhäällä, oikealla yläreunuksella, värin pysäytys (0%, # 999999), värin pysäytys (100%, # ffffff));
Täysi CSS3 Linear Gradient CSS -koodi
Täydellistä selaintentorjuntatukea, jotta pääset harmaaseen valkoiseen kaltevuuteen, sinun on ensin sisällytettävä varattavissa oleva kiinteä väri selaimille, jotka eivät tue kaltevuuksia, ja viimeinen kohde olisi CSS3-tyyli selaimille, jotka ovat täysin yhteensopivia. Joten kirjoitat:
tausta: # 999999;
tausta: -moz-lineaarinen gradientti (vasen, # 999999 0%, #ffffff 100%);
tausta: -webkit-gradientti (lineaarinen, vasen ylhäältä, oikea yläreuna, värin pysäytys (0%, # 999999), värin pysäytys (100%, # ffffff));
tausta: -webkit-lineaarinen gradientti (vasen, # 999999 0%, #ffffff 100%);
tausta: -o-lineaarinen gradientti (vasen, # 999999 0%, #ffffff 100%);
tausta: -ms-lineaarinen gradientti (vasen, # 999999 0%, #ffffff 100%);
suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms -suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
tausta: lineaarinen gradientti (vasen, # 999999 0%, #ffffff 100%);
Tämän oppaan seuraavilla sivuilla selitetään tarkemmin kaltevuuden osia ja viimeinen sivu osoittaa työkalun, joka on erinomainen tapa luoda CSS3-kaltevuudet automaattisesti.
Katso tämä lineaarinen gradientti toiminnassa käyttäen vain CSS: ää.
02/04
Diagonaalisten gradienttien luominen - Gradientin kulma
Aloitus- ja pysäytyskohdat määrittävät kaltevuuden kulman. Useimmat lineaariset kaltevuudet ovat ylhäältä alas tai vasemmalta oikealle. Mutta on mahdollista rakentaa kaltevuus, joka liikkuu diagonaaliviivalla. Tämän sivun kuva näyttää yksinkertaisen kaltevuuden, joka liikkuu 45 asteen kulmassa kuvan yli oikealta vasemmalle.
Kaltevuuskoodin määrittäminen
Kulma on linja kuvitteellisessa ympyrässä elementin keskellä. 0deg pistettä ylöspäin, 90deg pistettä oikealle, 180deg pistettä alaspäin ja 270deg pistettä vasemmalle. Voit määrittää kulman 0-359 astetta.
Huomaa, että neliössä 45 asteen kulma liikkuu vasemmasta yläkulmasta oikeaan alakulmaan, mutta suorakulmion aloitus- ja loppupisteet ovat hieman muodon ulkopuolella, kuten kuvassa näkyy.
Yleisempi tapa määrittää diagonaalinen gradientti on määrittää kulma, kuten oikeassa yläkulmassa ja gradientti siirtyy tästä kulmasta vastakkaiseen kulmaan. Voit määrittää aloituspisteen seuraavilla avainsanoilla:
- ylin
- oikea
- pohja
- vasen
- keskusta
Ja ne voidaan yhdistää tarkemmin, kuten:
- Yläoikea
- ylävasen
- ylhäällä keskellä
- ala oikea
- alhaalla vasemmalla
- alhaalta keskeltä
- oikea keskus
- vasemmalle keskelle
Tässä on CSS: n kaltainen gradientti, joka on samanlainen kuin kuvassa, punaisesta valkoiseen, ylhäältä oikealta alhaalta vasemmalle:
tausta: ## 901A1C;
taustakuva: -moz-lineaarinen gradientti (oikea yläosa, # 901A1C 0%, # FFFFFF 100%);
taustakuva: -webkit-gradientti (lineaarinen, oikea ylhäällä, vasen pohja, värirajoitus (0, # 901A1C), värirajoitus (1, #FFFFFF));
tausta: -webkit-lineaarinen gradientti (oikea yläosa, # 901A1C 0%, #ffffff 100%);
tausta: -o-lineaarinen gradientti (oikea yläosa, # 901A1C 0%, #ffffff 100%);
tausta: -ms-lineaarinen gradientti (oikea yläosa, # 901A1C 0%, #ffffff 100%);
tausta: lineaarinen gradientti (oikea yläosa, # 901A1C 0%, #ffffff 100%);
Olet ehkä huomannut, että tässä esimerkissä ei ole IE-suodattimia. Tämä johtuu siitä, että IE sallii vain kahdenlaisia suodattimia: ylhäältä alas (oletus) ja vasemmalta oikealle (GradientType = 1-kytkin).
Katso tämä diagonaalinen lineaarinen gradientti toiminnassa käyttämällä vain CSS: ää.
03/04
Väri pysähtyy
CSS3-lineaarisia kaltevuuksia käyttämällä voit lisätä useita värejä kaltevuutesi kanssa, jotta voit luoda entistä parempia vaikutuksia. Voit lisätä näitä värejä lisäämällä lisää värejä omaasi loppuun pilkuilla erotettuna. Sinun tulisi lisätä, mihin riviin värit tulisi aloittaa tai päättyä.
Internet Explorer -suodattimet tukevat vain kahta väripysähdystä, joten kun rakennat tämän gradientin, sinun tulisi sisällyttää vain ensimmäinen ja toinen väri, jotka haluat näyttää.
Tässä on edellä mainitun 3-värin gradientin CSS:
tausta: #ffffff;
tausta: -moz-lineaarinen gradientti (vasen, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
tausta: -webkit-gradientti (lineaarinen, vasen ylhäältä, oikea yläreuna, värin pysäytys (0%, # ffffff), värin pysäytys (51%, # 901A1C), värin pysäytys (100%, # ffffff));
tausta: -webkit-lineaarinen gradientti (vasen, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
tausta: -o-lineaarinen gradientti (vasen, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
tausta: -ms-lineaarinen gradientti (vasen, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
tausta: lineaarinen gradientti (vasen, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Katso tämä lineaarinen gradientti, jossa on kolme väripysähdystä käytössä vain CSS: llä.
04/04
Tee rakennusgradienteista helpompaa
Suosittelen kahta sivustoa, joiden avulla voit rakentaa kaltevuuksia, niillä kaikilla on edut ja haitat heille, en ole löytänyt kaltevuusrakentajaa, joka tekee kaiken vielä.
Ultimate CSS Gradient Generator
Tämä gradientogeneraattori on erittäin suosittu, koska se toimii samalla tavalla kuin kaltevuuskehittäjät ohjelmissa, kuten Photoshopissa. Pidän myös siitä, koska se antaa sinulle kaikki CSS-laajennukset, ei pelkästään Webkit ja Mozilla. Tämän generaattorin ongelma on, että se tukee vain vaaka- ja pystysuoria kaltevuuksia. Jos haluat tehdä diagonaalisia kaltevuuksia, sinun täytyy mennä toiseen generaattoriin, jota suosittelen.
CSS3-gradienttigeneraattori
Tämä generaattori kesti hieman pidempään ymmärtämään kuin ensimmäinen, mutta se tukee suuntauksen muuttamista diagonaaliksi.
Jos tiedät toisen CSS Gradient Generatorin, jota pidät paremmin kuin nämä, ilmoita meille .