Ristiselaimen lineaaristen gradienttien luominen CSS3: lla

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 käyttämällä a suodattaa 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 kaltevuus se 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 puoli tai kulma, värin pysäytys, värin pysäytys)

Ensin määrität kaltevuuden tyypin nimen kanssa lineaarinen -kaltevuus.

Sitten määrität kaltevuuden alkamis- ja pysäytyskohteet kahdella tavalla: kulma linjan asteissa 0 - 359, 0 astetta suoraan ylöspäin. Tai "sivun tai kulman" avulla, kuten vasen, oikea, pohja, ja ylin. 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 taustaksi a DIV 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 a suodattaa Internet Explorer 9: lle ja pienemmälle (tosiasiallisesti 2 suodatinta). 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 laajennukset-Internet Explorer on 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-The -moz- laajennus toimii kuten CSS3-ominaisuus, juuri sen kanssa -moz- laajennus. 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-laajennus-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 korostaa, 90deg osoittaa oikealle, 180deg osoittaa alaspäin, ja 270deg osoittaa 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.

Yleisimpiä tapoja määrittää diagonaalinen gradientti on määrittää kulma, kuten Yläoikea ja kaltevuus 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 (käyttäen GradientType = 1 vaihtaa).

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 GeneratorTä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-gradienttigeneraattoriTä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.