01, 04
Ristlaua sirgete gradientside loomine CSS3-ga
Lineaarsed gradiendid
Kõige tavalisem gradiendi tüüp, mida näete, on kahe värvi lineaarne gradient. See tähendab, et gradient liigub sirgjooneliselt, mis muutub järk-järgult esimesest värvusest teise joonele. Sellel lehel olev kujutis näitab lihtsat # 999 (tumehall) graafikut #fff (valge) vasakule paremale.
Lineaarseid gradiente on kõige lihtsam defineerida ja brauserites kõige rohkem toetada. Android-i versiooniga 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ ja Safari 4+ toetatakse CSS3 lineaarseid gradiente. Internet Explorer saab lisada filtreid kasutades gradiente ja toetab neid IE 5.5-le. See ei ole CSS3, vaid see on võimalus brauseri ühilduvuseks.
Kui määrate gradiendi, peate määratlema mitu erinevat asja:
- Milline gradient on see - lineaarne või radiaalne
- Kus gradient peaks algama
- Kui gradient peaks peatuma
- Millised värvid on gradiendis ja kus nad peaksid alustama ja peatuma
Lineaarsete gradiendite määratlemiseks CSS3-ga saate kirjutada:
lineaarne gradient ( nurk või külg või nurk , värvi peatus , värvi peatus )
- Esiteks määrab gradiendi tüüp nimega lineaarsed gradiendid.
- Siis määratlete gradiendi algus- ja seiskamispunktid ühel kahest viisist: joone nurk kraadides 0 kuni 359, kusjuures 0 kraadi on sirge ülespoole suunatud. Või funktsiooni "külg või nurk", näiteks vasak, parem, alumine ja ülemine. Neid selgitatakse üksikasjalikumalt järgmisel lehel. Kui need välja jätad, kulgeb gradient elemendi ülaosast allapoole.
- Siis määrate värvi peatused. Määratlege värviruumid värvikoodiga ja valikulise protsendimääraga. Protsent ütleb brauseris, kus joon selle värvi alustamiseks või lõpetamiseks. Vaikimisi on värvid paigutada joonele ühtlaselt. Lisateavet värvi peatuste kohta lehel 3.
Niisiis, et määratleda ülaltoodud gradient koos CSS3-ga, kirjutate:
lineaarne gradient (vasakul, # 999999 0%, #ffffff 100%);
Ja kui määrate selle DIV taustaks, siis kirjuta:
div {
taustavärv: lineaarne gradient (vasak, # 999999 0%, #ffffff 100%;
}
CSS3 lineaarsete gradiendrite brauseri laiendused
Et gradient töötab piiriülese brauseriga, peate brauseri laiendusi enamikule brauseritesse ja filtrit kasutama Internet Explorer 9 ja selle jaoks (tegelikult 2 filtrit). Kõik need sisaldavad samu elemente oma gradiendi määratlemiseks (välja arvatud see, et IE-is saab määrata ainult kahe värvi gradiendiga).
Microsofti filtrid ja laiendused - Internet Exploreri on kõige raskem toetada, sest erinevate brauseri versioonide toetamiseks vajate kolme eri liini. Selleks, et saada ülalt hall-valge gradient, kirjutaksite:
/ * IE 5.5-7 * /
filter: 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-lineaarne gradient (vasakul, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz-laiendused toimivad nagu CSS3 vara ainult koos -moz-laiendusega. Eespool toodud gradiendi saamiseks Firefoxile kirjutage:
-moz-lineaarne gradient (vasakul, # 999999 0%, #ffffff 100%);
Opera laiendamine - The -o-laiendus lisab Opera 11.1+ gradiendid. Eespool toodud gradiendi saamiseks kirjutage:
-line line-gradient (vasakul, # 999999 0%, #ffffff 100%);
Webkit laiendamine -webkit-laiendused toimivad palju nagu CSS3 vara. Eespool gradiendi määratlemiseks Safari 5.1+ või Chrome 10+ jaoks kirjutad:
-webkit-lineaarne gradient (vasakul, # 999999 0%, #ffffff 100%);
Samuti on olemas veebikirja laienduse vanem versioon, mis töötab Chrome 2+ ja Safari 4+. Selles määratletakse gradiendi tüüp kui väärtus, mitte vara nimi. Selle laiendusega hall-valge gradiendi saamiseks kirjutage:
-webkit-gradient (lineaarne, vasak ülemine, parem üleval, värviline stop (0%, # 999999), värviline stop (100%, # ffffff));
Täielik CSS3 lineaarse gradiendi CSS-kood
Täielikuks brauseri tugiteenusteks, et saada hall või valge gradient, peaksite kõigepealt sisaldama tagasivõtmise ühtlast värvi brauseritele, mis ei toeta gradiente, ja viimane element peaks olema CSS3-stiil täielikult vastavate brauseritega. Nii et kirjutate:
taust: # 999999;
taust: -moz-lineaarne gradient (vasak, # 999999 0%, #ffffff 100%);
taust: -webkit-gradient (lineaarne, vasak ülemine, parem üleval, värviline stop (0%, # 999999), värviline stop (100%, # ffffff));
taust: -webkit-lineaarne gradient (vasakul, # 999999 0%, #ffffff 100%);
taust: -o-lineaarne gradient (vasakul, # 999999 0%, #ffffff 100%);
taust: -ms-lineaarne gradient (vasak, # 999999 0%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
taust: lineaarne gradient (vasak, # 999999 0%, #ffffff 100%);
Selle juhendi järgmistes lehelt selgitatakse gradiendi osi üksikasjalikumalt ja viimane leht osutab tööriistale, mis on suurepärane võimalus CSS3 gradiendite loomiseks automaatselt.
Vaadake seda tegeliku gradiendiga, kasutades ainult CSS-i.
02 04
Diagonaalide gradientide loomine - gradiendi nurk
Algus- ja peatuspunktid määravad gradiendi nurga. Enamik lineaarseid gradiente on ülevalt alla või vasakult paremale. Kuid on võimalik ehitada gradient, mis liigub diagonaaljoonel. Sellel lehel olev kujutis näitab lihtsat gradiendit, mis liigub paremal vasakul pildi 45 ° nurga all.
Gradientrea määratlemise nurgad
Nurk on elemendi keskel kujuteldava ringi joon. 0deg ülespoole, 90deg paremale, 180deg punkti allapoole ja 270deg punkti vasakule. Võite määrata mis tahes nurga 0 kuni 359 kraadi.
Tuleb märkida, et ruutu korral liigub 45 kraadise nurga all ülemine vasak nurk alt paremalt, kuid ristkülikus on algus- ja lõpp-punktid veidi kuju all, nagu näete pildil.
Veel levinud viis diagonaalse gradiendi määratlemiseks on nurga määratlemine, näiteks üleval paremal ja gradient liigub sellest nurgast vastupidise nurga alla. Saate määratleda alguspunkti järgmiste märksõnadega:
- üleval
- õige
- põhja
- lahkus
- Keskus
Ja neid saab kombineerida täpsemaks, näiteks:
- üleval paremal
- üleval vasakul
- ülemine keskus
- paremalt alumine
- all vasakul
- alumine keskus
- parem keskus
- vasakul keskel
Siin on CSS gradient, mis sarnaneb pildile, punane ja valge, liikudes ülevalt paremast nurgast vasakule allapoole:
taust: ## 901A1C;
taustateade: -moz-lineaarne gradient (parem ülemine, # 901A1C 0%, # FFFFFF 100%);
taust-kujuline: -webkit-gradient (lineaarne, parem üleval, vasak põhi, värvi-peatus (0, # 901A1C), värviline stop (1, #FFFFFF));
taust: -webkit-lineaarne gradient (parem ülemine, # 901A1C 0%, #ffffff 100%);
taust: -o-lineaarne gradient (parem ülemine, # 901A1C 0%, #ffffff 100%);
taust: -ms-lineaarne gradient (parem ülemine, # 901A1C 0%, #ffffff 100%);
taust: lineaarne gradient (parem ülemine, # 901A1C 0%, #ffffff 100%);
Võib-olla olete märganud, et selles näites pole IE filtreid. Seda seetõttu, et IE võimaldab ainult kahte tüüpi filtreid: ülevalt alla (vaikimisi) ja vasakult paremale (koos GradientType = 1 lülitiga).
Vaadake seda diagonaal-lineaarse gradiendiga, kasutades ainult CSS-i.
03 alates 04
Värvi peatus
CSS3 lineaarsete gradienditega saate oma gradiendiga lisada mitu värki, et luua isegi võimasid efekte. Nende värvide lisamiseks lisate oma vara lõpuni täiendavaid värve, eraldades need komaga. Peaksite lisama, kus joonil peaks värvid algama või lõpema.
Internet Exploreri filtrid toetavad ainult kahte värviruumi, seega peaksite selle gradiendi ehitamisel lisama ainult esimese ja teise värvi, mida soovite kuvada.
Siin on ülaltoodud kolmekuulise gradiendiga CSS:
taust: #ffffff;
taust: -moz-lineaarne gradient (vasak, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
taust: -webkit-gradient (lineaarne, vasak ülemine, parem üleval, värviline stop (0%, # ffffff), värviline stop (51%, # 901A1C), värviline stop (100%, # ffffff));
taust: -webkit-lineaarne gradient (vasak, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
taust: -o-lineaarne gradient (vasak, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
taust: -ms-lineaarne gradient (vasak, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
taust: lineaarne gradient (vasak, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Vaadake seda lineaarse gradiendiga, kasutades kolme värviruumi, kasutades ainult CSS-i.
04 04
Tee hoone gradiendid lihtsamaks
Soovitav on aidata teil kallakute ehitamisel kasutada kahte saiti, millele neil kõigil on kasu ja puudusi, ma pole leidnud gradient-ehitaja, mis teeb kõike veel.
Ultimate CSS gradiendi generaator
See gradiendi generaator on väga populaarne, sest see toimib sarnaselt gradient-ehitajatele sellistes programmides nagu Photoshop. Mulle meeldib ka see, sest see annab teile kõik CSS-i laiendused, mitte ainult Webkit ja Mozilla. Selle generaatori probleem seisneb selles, et see toetab ainult horisontaalseid ja vertikaalseid gradiente. Kui soovite teha diagonaalseid gradiente, peate minema teise generaatori soovitan.
CSS3 gradiendi generaator
See generaator võttis mind natuke kauem aega, et mõista kui esimene, kuid see toetab suuna muutmist diagonaalile.
Kui teate mõnest muust CSS-i gradiendi generaatorist, mis teile meeldib paremini, siis andke meile sellest teada .