Kryžminio naršymo linijinių gradientų sukūrimas naudojant CSS3
Linijiniai gradientai
Dažniausiai pasitaikantis gradiento tipas yra dviejų spalvų linijinis gradientas. Tai reiškia, kad gradientas pasisuks tiesine linija, kuri palaipsniui keičiasi nuo pirmos spalvos iki antrosios išilgai tos linijos. Šiame puslapyje esantis vaizdas rodo paprastą kairį dešinį gradientą # 999 (tamsiai pilka) ir #fff (baltos spalvos).
Linijiniai gradientai yra paprasčiausi nustatyti ir daugiausia palaiko naršyklėse. CSS3 linijiniai gradientai palaikomi "Android 2.3+", "Chrome 1+", "Firefox 3.6+", "Opera 11.1+" ir "Safari 4+". "Internet Explorer" gali pridėti gradientus naudojant " filtras ir palaiko juos atgal į IE 5.5. Tai ne CSS3, tačiau tai yra tarpusavio suderinamumo galimybė.
Kai apibrėžiate gradientą, turite nustatyti keletą skirtingų dalykų:
- Kokio tipo gradientas yra
linijinisarbaradialinis - Kur turėtų prasidėti gradientas
- Kur gradientas turėtų sustoti
- Kokios spalvos yra gradiento ir kur jie turėtų pradėti ir sustoti
Norėdami apibrėžti linijinius gradientus naudodami CSS3, rašykite:
linijinis gradientas (kampas arba pusė ar kampas, spalvos sustojimas, spalvos sustojimas)
- Pirmiausia nustatykite gradiento tipą su pavadinimu
linijinis -gradientas. - Tuomet apibrėžiamas gradiento pradžios ir pabaigos taškas vienu iš dviejų būdų:
kampaslinijos laipsniais nuo 0 iki 359, 0 laipsnių kampu nukreipta tiesiai į viršų. Arba su "šonine ar kampine" funkcija, pvz., "kairėje,teisus,apačioje, irviršuje. Tai bus išsamiau paaiškinta kitame puslapyje. Jei paliksite šiuos iškyšos, gradientas išgaus elementą iš viršaus į apačią. - Tuomet nustatysite spalvų sustojimus. Jūs nustatote spalvų sustojimus su spalvų kodu ir neprivaloma procentine dalimi. Procentas nurodo naršyklę, kur linija prasideda arba baigiasi ta spalva. Numatytoji vieta yra tolygiai išdėstyti spalvas palei liniją. Daugiau sužinosite apie spalvų sustojimus puslapyje 3.
Taigi, norėdami apibrėžti aukščiau esantį gradientą su CSS3, rašote:
linijinis gradientas (kairėje, # 999999 0%, #ffffff 100%);
Ir nustatyti jį kaip fono DIV Tu rašai:
div {fono paveikslėlis: linijinis gradientas (kairėje, # 999999 0%, #ffffff 100%;} CSS3 linijinių gradientų naršyklės plėtiniai
Norėdami, kad jūsų gradientas veiktų kryžminėje naršyklėje, daugeliui naršyklių turite naudoti naršyklės plėtinius ir a filtras "Internet Explorer 9" ir "mažesnėms" (iš tikrųjų 2 filtrai). Visi šie elementai apibrėžia jūsų gradientą (išskyrus tai, kad IE galite nustatyti tik dviejų spalvų gradientus).
"Microsoft" filtrai ir plėtinys-Internet Explorer yra sunkiausia palaikyti, nes jums reikia trijų skirtingų eilučių, skirtų skirtingoms naršyklės versijoms palaikyti. Jei norite gauti aukščiau esantį pilkos arba baltos spalvos gradientą, rašykite:
/ * IE 5.5-7 * /filtras: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);/ * IE 8-9 * /-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";/ * IE 10 * /-ms-line-gradientas (kairėje, # 999999 0%, #ffffff 100%);
"Mozilla" pratęsimas-The -moz- pratęsimas veikia kaip CSS3 nuosavybė, tik su -moz- pratęsimas Jei norite gauti aukščiau nurodytą "Firefox" gradientą, parašykite:
-moz-line-gradient (kairėje, # 999999 0%, #ffffff 100%);
Operos pratęsimas-The -o- pratęsimas prideda gradientus "Opera 11.1+". Norėdami gauti aukščiau gradientą, parašykite:
-line-gradientas (kairėje, # 999999 0%, #ffffff 100%);
"Webkit" pratęsimas-The -webkit- pratęsimas veikia daug panašiai kaip CSS3 nuosavybė. Jei norite nustatyti aukščiau nurodytą "Safari 5.1+" ar "Chrome 10+" gradientą, kurį rašote:
-webkit-line-gradient (kairėje, # 999999 0%, #ffffff 100%);
Taip pat yra senesnė "Webkit" plėtinio versija, kuri veikia su "Chrome 2+" ir "Safari 4+". Jame apibrėžiamas gradiento tipas kaip vertė, o ne nuosavybės pavadinime. Norėdami gauti pilią į baltą gradientą su šiuo plėtiniu, rašykite:
-webkit-gradientas (linijinis, kairysis viršuje, dešinėje viršuje, spalvotas stovas (0%, # 999999), spalvotas stop (100%, # ffffff)); Visas CSS3 linijinio gradiento CSS kodas
Jei norite gauti visą naršyklės palaikymą, kad gautumėte aukščiau esantį pilkosios ir baltos spalvos gradientą, pirmiausia turėtumėte naudoti atsarginę spalvą naršymams, kurie nepalaiko nuolydžių, o paskutinis elementas turėtų būti CSS3 stiliaus naršyklėms, kurios visiškai atitinka reikalavimus. Taigi, jūs rašote:
fonas: # 999999;background: -moz-line-gradient (left, # 999999 0%, #ffffff 100%);fonas: -webkit-gradientas (linijinis, kairysis viršuje, dešinėje viršuje, spalvų sustojimas (0%, # 999999), spalvų stop (100%, # ffffff));fonas: -webkit-line-gradientas (kairėje, # 999999 0%, #ffffff 100%);fonas: -o-line-gradientas (kairėje, # 999999 0%, #ffffff 100%);fonas: -ms-line-gradientas (kairėje, # 999999 0%, #ffffff 100%);filtras: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);fonas: linijinis gradientas (kairėje, # 999999 0%, #ffffff 100%);
Kitame šio vadovo puslapiuose išsamiau paaiškinamos gradiento dalys, o paskutinis puslapis nurodo į įrankį, kuris yra puikus būdas automatiškai kurti CSS3 gradientus.
Žiūrėkite šį tiesinį gradientą veikloje naudodami tik CSS.
02 iš 04Kūrimas įstrižainių gradientų - gradiento kampas
Pradžios ir sustojimo taškai nustato gradiento kampą. Dauguma linijinių gradientų yra iš viršaus į apačią arba iš kairės į dešinę. Tačiau galima sukurti gradientą, kuris juda per įstrižainę. Šiame puslapyje pateiktas vaizdas rodo paprastą gradientą, kuris juda 45 laipsnių kampu per vaizdą iš dešinės į kairę.
Kampai apibrėžti gradiento liniją
Kampas yra linija, esanti įsivaizduojamame apskritime elemento centre. 0deg nurodo, 90deg nurodo į dešinę 180deg nurodo žemyn, ir 270deg nurodo į kairę. Galite nustatyti bet kurį kampą nuo 0 iki 359 laipsnių.
Turėtumėte atkreipti dėmesį į tai, kad kvadratu 45 laipsnių kampas juda iš viršutinio kairiojo kampo į apačią į dešinę, bet stačiakampyje pradžios ir pabaigos taškai yra šiek tiek už formos ribų, kaip matote paveikslėlyje.
Dažniausiai nustatomas įstrižainės gradientas - tai apibrėžti kampą, pavyzdžiui, viršutinis dešinysis ir gradientas pereis nuo to kampo į priešingą kampą. Galite nustatyti pradinę poziciją su šiais raktažodžiais:
- viršuje
- teisus
- apačioje
- kairėje
- centras
Ir jie gali būti derinami taip, kad būtų konkretesni, pavyzdžiui:
- viršutinis dešinysis
- viršuje kairėje
- viršų centras
- apačioje dešinėje
- kairysis apačia
- apatinis centras
- teisingas centras
- kairysis centras
Štai CSS gradientui, panašiai kaip parodyta paveikslėlyje, nuo raudono iki balto judesio nuo viršutinio dešiniojo kampo iki apačios kairės:
fonas: ## 901A1C;fono paveikslėlis: -moz-line-gradientas (viršutinė dešinė, # 901A1C 0%, # FFFFFF 100%);fono paveikslėlis: -webkit-gradientas (linijinis, dešinysis viršuje, kairysis apačia, spalvos stotelė (0, # 901A1C), spalvų sustojimas (1, #FFFFFF));fonas: -webkit-line-gradientas (viršutinė dešinė, # 901A1C 0%, #ffffff 100%);fonas: -i linijinis-gradientas (viršutinė dešinė, # 901A1C 0%, #ffffff 100%);fonas: -ms-line-gradientas (viršutinė dešinė, # 901A1C 0%, #ffffff 100%);fonas: linijinis gradientas (viršutinė dešinė, # 901A1C 0%, #ffffff 100%);
Galbūt pastebėjote, kad šiame pavyzdyje nėra IE filtrų. Taip yra todėl, kad IE leidžia tik dviejų tipų filtrus: nuo viršaus iki apačios (pagal nutylėjimą) ir iš kairės į dešinę (su GradientType = 1 perjungti)
Žiūrėkite šį įstrižainės linijinį gradientą naudodami tik CSS.
03 iš 04Spalva sustoja
Naudodami linijinius gradientus CSS3, galite pridėti keletą spalvų į savo gradientą, kad sukurtumėte net mėgstamus efektus. Norėdami pridėti šių spalvų, prie savo nuosavybės pabaigos pridedate papildomų spalvų, atskirtų kableliais. Turėtumėte nurodyti, kur ant linijos spalvos taip pat turėtų prasidėti arba baigti.
"Internet Explorer" filtrai palaiko tik dvi spalvos sustojimus, taigi, kai sukursite šį gradientą, turėtumėte įtraukti tik pirmą ir antrą spalvas, kurias norite rodyti.
Čia pateikiamas pirmiau nurodyto 3 spalvų gradiento CSS:
fonas: #ffffff;fonas: -moz-line-gradientas (kairėje, #ffffff 0%, # 901A1C 51%, #ffffff 100%);fonas: -webkit-gradientas (linijinis, kairysis viršuje, dešinėje viršuje, spalvos stotelė (0%, # ffffff), spalvų sustojimas (51%, # 901A1C), spalvų stop (100%, # ffffff));fonas: -webkit-line-gradientas (kairėje, #ffffff 0%, # 901A1C 51%, # ffffff 100%);fonas: -o-line-gradientas (kairėje, #ffffff 0%, # 901A1C 51%, # ffffff 100%);fonas: -ms-line-gradientas (kairėje, #ffffff 0%, # 901A1C 51%, # ffffff 100%);filtras: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);fonas: linijinis gradientas (kairysis, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Žiūrėkite šį tiesinį gradientą su trijų spalvų sustojimais veikiant naudodami tik CSS.
04 iš 04Padaryti pastatų gradientus lengviau
Yra dvi svetaines, kurias rekomenduoju jums padėti kurti gradientus, kiekvienas iš jų turi privalumų ir trūkumų, neradau gradiento statybininko, daro viską dar.
Ultimate CSS gradiento generatoriusŠis gradiento generatorius yra labai populiarus, nes jis veikia panašiai kaip gradiento kūrėjai tokiose programose kaip "Photoshop". Man taip pat patinka, nes ji suteikia jums visus CSS plėtinius, o ne tik Webkit ir Mozilla. Problema su šiuo generatoriumi yra ta, kad ji palaiko tik horizontalius ir vertikalius nuolydžius. Jei norite atlikti įstriuosius gradientus, turite eiti į kitą generatorių, kurį rekomenduoju. CSS3 gradiento generatoriusŠis generatorius privertė mane šiek tiek ilgiau suprasti, nei pirmasis, tačiau jis palaiko krypties keitimą į įstrižainę. Jei žinote kitą CSS gradiento generatorių, kuris tau labiau patinka nei šie, praneškite mums.
