01 04
Таъсири блогнависии рентгенентӣ бо CSS3
Графикҳои рост
Навъи бештарини графикаи шумо хоҳед дид, ки графикаи рости ду ранг аст. Ин маънои онро дорад, ки градент дар хати рост тағйир меёбад, ки аз ранги якум ба як сония баробар аст. Тасвири дар ин саҳифа градиентӣ-ба-рости # 999 (хокистарӣ) ба #fff (сафед) нишон медиҳад.
Gradient line is the easiest to define, and most browsers are supported. Дараҷаи лотинии CSS3 дар Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, ва Safari 4+ дастгирӣ карда мешавад. Internet Explorer метавонад бо истифода аз филтрҳо илова карда, онҳоро ба 5.5 барнагардонад. Ин CSS3 нест, аммо ин хосият барои мутобиқати услуби браузер мебошад.
Вақте ки шумо градиентро муайян мекунед, шумо бояд якчанд чизро муайян кунед:
- Кадом намуди градиентӣ - линза ё радио мебошад
- Дар куҷо бояд таҳия карда шавад
- Дар куҷо бояд таҳия карда шавад
- Кадом рангҳо дар градиент ва дар куҷо бояд оғоз ва қатъ карда шаванд
Барои муайян кардани градиентҳои лента бо истифода аз CSS3, шумо нависед:
сатр ё градиент ( кунҷи ё тараф ё кунҷи , ранги ранг , ранги ранг )
- Аввалан, шумо навъи gradientро бо номи сатр номнавис карда метавонед.
- Сипас, шумо оғоз ва бурриши нуқтаҳои gradient дар яке аз ду роҳ: кунҷи хат дар дараҷаҳои аз 0 то 359, бо 0 дараҷа рост истода. Ё бо функсияи "чап ё рост", ба монанди чап, рост, чап ва боло. Инҳо дар муфассалтар дар саҳифаи оянда шарҳ дода мешаванд. Агар шумо инро тарк кунед, gradient аз болои болоӣ ба поёни элементҳо мебарояд.
- Баъд шумо ранги рангҳоро муайян мекунед. Шумо решаҳои рангро бо ранги ранг ва фоизи иловагӣ муайян мекунад. Нишон медиҳад, ки браузери, ки дар сатри оғоз бо ранги он оғоз ё хотима меёбад. Мутаассиф аст, ки рангҳо дар якҷоягӣ бо рангҳо ҷойгир карда шаванд. Шумо дар бораи ранги рангҳо дар саҳифаи 3 бештар хоҳед дид.
Ҳамин тавр, барои таҳия намудани градиент бо CSS3, шумо нависед:
сатрҳои градиентӣ (left, # 999999 0%, #ffffff 100%);
Ва онро ҳамчун замина аз DIV нависед:
Шаҳр:
background-image: linear-gradient (left, # 999999 0%, #ffffff 100%;
}}
Extensions Browser for CSS3 Графикҳои Ромиталӣ
Барои гирифтани графикаи шумо барои коркарди браузер, шумо бояд васеъ кардани браузерҳо барои бештари браузерҳо ва филтерро барои Internet Explorer 9 ва поёнтар (воқеан 2 филтр) истифода баред. Ҳамаи инҳо ҳамон унсурҳоеро, ки ба градиентатонро муайян мекунанд (ғайр аз он, ки шумо танҳо дар матритсаи 2-ранг дар IE муайян карда метавонед).
Microsoft Filters ва Extension -Internet Explorer хеле мушкилотро пуштибонӣ мекунад, зеро ба шумо лозим аст, ки се варианти дигарро барои дастгирии версияҳои гуногуни браузер. Барои гирифтани график дар боло ба градиентӣ сафед шумо нависед:
/ * IE 5.5-7 * /
Филт: Программен: 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-linear-gradient (left, # 999999 0%, #ffffff 100%);
Extension Mozilla -The -moz-extension ба монанди амволи CSS3, танҳо бо -moz-extension. Барои гирифтани суръати боло барои Firefox, нависед:
-moz-linear-gradient (left, # 999999 0%, #ffffff 100%);
Дохилшавӣ ба оператори -Аз-extension - вобастагӣ ба опера 11.1+. Барои гирифтани геометрии боло, нависед:
-o-linear-gradient (left, # 999999 0%, #ffffff 100%);
Extension Webkit -The -webkit- extension ба монанди амволи CSS3 кор мекунад. Барои таъғир додани градиент барои сафари 5.1+ ё Chrome 10+ шумо нависед:
-вебкит-линзаи-градиент (чап, # 999999 0%, #ffffff 100%);
Ҳамчунин варианти кӯҳнаи вируси Webkit вуҷуд дорад, ки бо Chrome 2+ ва Safari 4+ кор мекунад. Дар он шумо намуди градиентро ҳамчун арзиш муайян карда метавонед, на аз номи мол. Барои гирифтани график бо градент сафед бо ин дарозкунӣ нависед:
- вебкит-градиент (сатр, болоии боло, болоии рост, ранги-ранг (0%, # 999999), ранги қатъӣ (100%, # ffffff));
CSS Full CSS Кодекси CASE Gradient
Барои пушидани дастгирии пурраи сигнал, барои гирифтани граф ба gradient сафед, шумо бояд аввалин рангҳои сахтро барои браузерҳо, ки градиентҳоро пуштибонӣ намекунад, дохил кунед ва қисми охирин бояд сабки CSS3 барои браузерҳо, ки пурра мутобиқанд. Пас, шумо нависед:
background: # 999999;
background: -moz-linear-gradient (left, # 999999 0%, #ffffff 100%);
замина: -вебкит-градиент (сатр, болоии болоӣ, болоии рост, ранг-истгоҳ (0%, # 999999), ранги қатъӣ (100%, # ffffff));
background: -webkit-linear-gradient (left, # 999999 0%, #ffffff 100%);
background: -o-linear-gradient (left, # 999999 0%, #ffffff 100%);
замина: -ms-linear-gradient (left, # 999999 0%, #ffffff 100%);
Филт: Программен: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filters: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
background: linear-gradient (left, # 999999 0%, #ffffff 100%);
Саҳифаҳои минбаъда дар ин омӯзиш қисматҳои градентро дар муфассал шарҳ медиҳанд, ва саҳифаи охирин ба шумо як асбобе медиҳад, ки роҳи хуби эҷоди градиентҳои CSS3 -ро дорад.
Бо истифодаи CSS танҳо ин градиентро ба амал оваред.
02 04
Эҷоди диаграммаҳои диагоналӣ - ангуштзании градиентӣ
Нуқтаҳои оғоз ва қатъкунӣ кунҷи gradientро муайян мекунад. Аксарияти градиентҳо аз боло ба поён ё ба чап ба рост. Аммо имконпазир сохтани як градиенте, ки дар хати диагоналӣ ҳаракат мекунад. Тасвир дар ин саҳифа як граденти оддиро нишон медиҳад, ки дар кунҷи 45 тавлид дар болои тасвири рост аз чап ҳаракат мекунад.
Роҳҳо барои муайян кардани хатҳои графикӣ
Доир ба хати тасвирӣ дар маркази элемент рост меояд. 0degӣ ба боло, 90а нуқра ба рост, 180 рост ба поён, ва 270Д нуқра ба чап. Шумо метавонед ҳар як кунҷро аз 0 то 359 дараҷа муайян намоед.
Шумо бояд дар хотир доред, ки дар як майдон, як кунҷи 45 дараҷа аз гӯшаи чапи болои чапи ростро ба поён фарояд, аммо дар як росткунҷа, нуқтаҳои оғоз ва охири хурди берун аз шакли тасвир, ки шумо дар тасвир мебинед.
Роҳи бештаре, ки механизми диаграммаиро муайян мекунад, муайян кардани кунҷ, ба монанди рост ва чечен аз он кунҷӣ ба кунҷи муқобил мегузарад. Шумо метавонед почтаи ибтидоӣ бо калимаҳои зеринро муайян кунед:
- top
- рост
- поёни
- left
- марказ
Ва онҳо метавонанд якчанд мушаххас бошанд, масалан:
- рости боло
- боло рафт
- маркази калон
- рост
- чапи поён
- маркази поёни
- маркази рост
- маркази чап
Дар ин ҷо CSS барои геометрӣ монанд ба як тасвири сурх, сурх ба сафед аз гӯшаи рост дар чапи поёни поён:
background: ## 901A1C;
background-image: -moz-linear-gradient (top боло, # 901A1C 0%, # FFFFFF 100%);
background-image: -вебкит-градиент (линзаи, болоии рост, поёнии чап, ранги-ранг (0, # 901А1C), ранги-ранг (1, #FFFFFF));
замина: -вебкит-линзаи-градиент (болотарин, # 901A1C 0%, #ffffff 100%);
замина: -o-linear-gradient (болотарин, # 901A1C 0%, #ffffff 100%);
замина: -ms-linear-gradient (болотарин, # 901A1C 0%, #ffffff 100%);
background: linear-gradient (top top, # 901A1C 0%, #ffffff 100%);
Шумо шояд фаҳмидед, ки дар ин намунаи филтрҳои IE мавҷуд нест. Ин сабаби он аст, ки IE танҳо ду намуди филтрҳоро иҷозат медиҳад: ба боло то поёни он (default) ва ба рост (бо гузариши GradientType = 1).
Бо истифодаи CSS танҳо ин градиент сатрҳои диаграмма ба амал меояд.
03 04
Ранги Стат
Бо CSS3 градентҳои рентгенентӣ, шумо метавонед рангҳои гуногунро ба градиентатон илова кунед, то эффекти зебо. Барои илова кардани ин рангҳо, шумо ба рангҳои иловагӣ дар охири молу мулк, илова кунед бо вуяд. Шумо бояд дар куҷо дар сатри ранг бояд оғоз ё хотима гиред.
Файлҳои Internet Explorer танҳо танҳо ду ранги рангро пуштибонӣ мекунанд, бинобар ин, вақте ки шумо ин графикаро сохтаед, шумо бояд рангҳои якум ва дуюмро, ки мехоҳед намоиш диҳед, дохил кунед.
Дар ин ҷо CSS барои дараҷаи 3-ранги ранга:
замина: #ffffff;
background: -moz-linear-gradient (left, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
вебкит-градиент (линза, чапи боло, болоии рост, ранги-ракамка (0%, # ffffff), ранги қатъкунӣ (51%, # 901А1C), ранги қатъӣ (100%, # ffffff));
background: -webkit-linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -o-linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
замина: -ms-linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Филтри: Дисплей: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
background: linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Бо ин услуби CSS ба ин графи линза бо се ранг дар амалиёт нигоҳ кунед.
04 04
Беҳтар намудани биноҳои биноҳо осонтар аст
Ман ду саҳифа дорам, ки барои кӯмак ба шумо барои таҳияи градиентҳо тавсия диҳанд, ки ҳар як фоида ва пӯшишҳо ба онҳо дода шудааст, ман сохтори градиентӣ надорам, ки ҳама чизро ҳам иҷро мекунад.
Генератор CSS Gradient генератор
Эҷоди генератори графикӣ хеле маъмул аст, зеро он дар якҷоягӣ ба таҳкими градиент дар барномаҳои Photoshop амал мекунад. Ман низ онро дӯст медорам, зеро он ба шумо тамоми паҳлуҳои CSS, на танҳо Webkit ва Mozilla медиҳад. Масъала бо ин генератор ин аст, ки он танҳо ба уфуқҳои уфуқӣ ва амудӣ дастгирӣ мекунад. Агар шумо хоҳед, ки диаграммаҳои диаграммаиро ба кор баред, шумо бояд ба генератори дигар тавсия диҳед.
CSS3 Генератор Gradient генератор
Ин генератори ман барои яктарафа аз фаҳмидани он ки каме дертар фаҳмид, вале он тағйиротро ба сӯи диагонал тақвият медиҳад.
Агар шумо аз генератори CSS Gradient медонед, ки шумо аз ин беҳтартар хоҳед, лутфан ба мо хабар диҳед .