01 iš 04
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 naudodami filtrą 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 linijinis arba radialinis
- 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 kampas , spalvos sustojimas , spalvos sustojimas )
- Pirmiausia nustatysite gradiento tipą pavadinimu line- gradient.
- Tuomet apibrėžiamas gradiento pradžios ir pabaigos taškas vienu iš dviejų būdų: linijos kampas laipsniais nuo 0 iki 359, 0 laipsnių kampas nukreiptas tiesiai į viršų. Arba su "šonine ar kampine" funkcija, tokia kaip kairė, dešinė, apačia ir virš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 kaip DIV fono jūs rašote:
div {
fono paveikslėlis: linijinis gradientas (kairėje, # 999999 0%, #ffffff 100%;
}
CSS3 linijinių gradientų naršyklės plėtiniai
Jei norite, kad jūsų gradientas veiktų kryžminėje naršyklėje, daugeliui naršyklių reikia naudoti naršyklės plėtinius ir "Internet Explorer 9" arba mažesnį filtrą (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 sunkiausias palaikymas, 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 Extension -The -moz-extension veikia kaip CSS3 nuosavybė, tik su -moz-plėtiniu. Jei norite gauti aukščiau nurodytą "Firefox" gradientą, parašykite:
-moz-line-gradient (kairėje, # 999999 0%, #ffffff 100%);
"Opera Extension" - " Extension -O" pratęsia "Opera 11.1+" gradientus. Norėdami gauti aukščiau gradientą, parašykite:
-line-gradientas (kairėje, # 999999 0%, #ffffff 100%);
"Webkit" išplėtimas - "WebKit" plėtinys 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š 04
Kū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 taškų, 90deg taškų į dešinę, 180deg taškų žemyn ir 270deg taškų į 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.
Kuo dažniau nustatomas įstrižainės gradientas - tai apibrėžti kampą, pvz., Viršuje dešinėje, o gradientas pereina 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: iš viršaus į apačią (pagal nutylėjimą) ir iš kairės į dešinę (su "GradientType = 1" jungikliu).
Žiūrėkite šį įstrižainės linijinį gradientą naudodami tik CSS.
03 iš 04
Spalva 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š 04
Padaryti 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 .