01 04
Түзүү Cross-Browser Сызыктуу градиент CSS3 менен
Сызыктуу градиент
, сен көрө турган жактарда көбү түрү, эки түстүү бир сызыктуу градиент болуп саналат. Бул градиент деп сызыгында экинчи биринчи түсүн бара-бара өзгөрүп түз сызык менен түрткү берет дегенди билдирет. Бул беттеги сүрөттү #fff (ак) үчүн # 999 (кочкул көгүш) жөнөкөй солдон оң градиент көрсөтөт.
Сызыктуу градиент аныктоо женил, браузерлерди көпчүлүк колдоосуна ээ. CSS3 сызыктуу градиент Android 2.3+-жылы колдоого алынган, Chrome 1+, Firefox 3.6+, Opera 11.1+ жана Safari 4+. Internet Explorer чыпка аркылуу градиенттерди кошуп, кайра IE 5.5 аларды колдойт болот. Бул CSS3 эмес, бирок, ал кайчылаш-браузердин сыйышкычтыгы үчүн чечим болуп саналат.
Эгер градиент аныктоо Сиз бир нече ар кандай нерселерди аныктоо зарыл:
- жактарда кандай түрү аны сызыктуу же радиалдык Ис-
- градиент кайда баштоо керек
- градиент кайда токтотуу керек
- жактарда кандай түстөр бар жана алар каерде сүйлөшүп баштоо жана токтотуу керек
CSS3 колдонуп сызыктуу градиенттерди аныктоо үчүн, жаз:
Сызыктуу-градиент (бурч же каптал же бурч, түстүү бирдиктүү, түстүү аялдама)
- Биринчи аты сызыктуу -gradient менен жактарда түрүн аныктайт.
- түз көрсөтүп 0 градус менен градус сапта 0ден 359 чейинки бурч, Ошондо, сен башталыш жана жактарда эки ар кандай жолдор менен бир ойлорду токтотуп аныктайт. Же, мисалы, сол, оң, ылдый, ал эми жогору болуп, "тарап же бурч" өзгөчөлүгү менен. Бул кийинки беттеги кененирээк түшүндүрүлөт. Сиз бул чыгып калса, градиент элементтин башынан аягына чейин агып чыгат.
- Анан түстүү токтойт аныктайт. Сиз түс түс кодексине жана кошумча пайызы менен токтоп аныктайт. пайыздык баштоо же түс менен бүтүрүүнү сапта браузерди айтылат. демейки линиясын бойлото бирдей түстөрдү жайгаштырууга болот. 3 түс беттеги токтойт тууралуу көбүрөөк билебиз.
Ошентип, CSS3 жогоруда градиент аныктоо, сиз жазган:
сызыктуу-градиент (сол, # 999999 0%, #ffffff 100%);
Ал эми жазуу DIV алкагында кылып коюу:
бөлүү {
маалымат-сүрөт: сызыктуу-градиент (сол, # 999999 0%, #ffffff 100%;
}
CSS3 Сызыктуу градиент үчүн Browser Extensions
кайчылаш-браузер иштөө үчүн градиент алуу үчүн, көпчүлүк интернет-браузерлерде жана Internet Explorer боюнча чыпка браузер бутактарын колдонуу 9 жана төмөнкү (иш жүзүндө 2 чыпкалар) керек. Булардын баары градиент аныктоо үчүн ошол эле элементтер алып (гана IE-жылы 2-түстүү градиенттерди аныктай алат кошпогондо).
Ар кандай браузер тексттерин колдоо үчүн үч түрдүү сызыктарды керек, анткени Microsoft Чыпкалар жана аларды узартуу -интернет Explorer, колдоо үчүн кыйынга турат. Сиз жазган ак жактарда жогоруда БУРУНДУКИ алуу үчүн:
/ * IE 5.5-7 * /
элеги: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
+ avreal-элеги: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
+ avreal-линиялык-градиент (сол, # 999999 0%, #ffffff 100%);
Mozilla Түр жашоо -moz- узартуу эле -moz- узартуу менен, CSS3 менчик болуп иштейт. Firefox жогоруда градиент алуу үчүн, жаз:
-moz-линиялык-градиент (сол, # 999999 0%, #ffffff 100%);
Opera Түр жашоо -o- узартуу Opera 11.1+ үчүн градиенттерди кошот. Жогоруда градиент алуу үчүн жаз:
епо-линиялык-градиент (сол, # 999999 0%, #ffffff 100%);
WebKit Түр жашоо Сизде узартуу CSS3 мүлк сыяктуу көп иштейт. Сиз жазып 10+ Safari 5.1+ же Chrome жогоруда градиент аныктоо:
-webkit-линиялык-градиент (сол, # 999999 0%, #ffffff 100%);
Chrome 2+ жана Safari 4+ менен иштейт WebKit узартуу эски нускасы да бар. аны сиз баалуулук катары жактарда түрүн аныктоо эмес, менчик атынан эмес. Бул узартуу менен ак жактарда үчүн БУРУНДУКИ алуу үчүн, жаз:
-webkit-градиент (сызыктык, сол, оң, жогорку, түс аялдамасы (0%, # 999999), анда түс иш-аялдамасы (100%, # ffffff));
Толук CSS3 Сызыктуу Градиент CSS коду
биринчи градиенттерди колдоого албайбыз браузерлер үчүн чегинүү катуу түс камтышы керек жогоруда ак жактарда үчүн БУРУНДУКИ алууга толук кайчылаш-браузер үчүн, жана акыркы нерсе толугу менен ылайык келет браузерлер учун CSS3 стили болушу керек. Ошондуктан, сиз жазган:
маалымат: # 999999;
маалымат: -moz-линиялык-градиент (сол, # 999999 0%, #ffffff 100%);
маалымат: -webkit-градиент (сызыктык, сол, оң, жогорку, түс аялдамасы (0%, # 999999), анда түс иш-аялдамасы (100%, # ffffff));
маалымат: -webkit-линиялык-градиент (сол, # 999999 0%, #ffffff 100%);
маалымат: eek:-линиялык-градиент (сол, # 999999 0%, #ffffff 100%);
маалымат: + avreal-линиялык-градиент (сол, # 999999 0%, #ffffff 100%);
элеги: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
+ avreal-элеги: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
маалымат: сызыктуу-градиент (сол, # 999999 0%, #ffffff 100%);
Бул үйрөткүч кийинки беттерде кененирээк бир жактарда бөлүктөрүн түшүндүрүү, жана акыркы бет жазуусу CSS3 градиенттерди түзүү үчүн мыкты жолу курал сени көрсөтөт.
эле CSS жардамы менен иш-аракет бул сызыктуу градиент карагыла.
02-жылдын 04
Түзүү Diagonal градиент-градиент бурч
Баштоо жана токтотуу упайлар жактарда бурчу аныктайт. Көп сызыктуу градиент башынан аягына чейин же солдон. Бирок, ал кайчылаш сапта бараткан бир градиент курууга мүмкүн болгон. Бул беттеги сүрөттү сол укугунан бейнеси боюнча бир 45degree бурчунун берет жөнөкөй градиент көрсөтөт.
Градиент сызыгы аныктоо үчүн бурчтар
бурч элементтин борборунда элестүү бир айлананын бир сап болуп эсептелет. 0deg укугуна 90deg упай, ордунан көрсөтөт, 180deg бурган түшүп, солго 270deg упай. Сиз 0 359 градуска чейин ар кандай бурч аныктай алат.
Сиз аянтта белгилей кетүү керек, 45 градус бурч төмөнкү укугун жогорку сол бурчунда чейин түрткү берет, ал эми тик сүрөттө көрүнүп тургандай, башталыш жана аяктоо пунктту абалда сыртында аз болуп саналат.
нуклиддер градиент аныктоого көп жолу, мисалы, жогорку укугун жана жактарда ошол бурч бурчта жылат эле, бир бурчун аныктоо болуп саналат. Төмөнкү ачкыч сөздөр менен башталган Партийный аныктама берүүгө болот:
- жогорку
- туура
- Жыйынтык
- сол
- Борбор
Алар сыяктуу конкреттүү, деп бөлүүгө болот:
- жогорку оң
- жогорку сол
- жогорку борбору
- төмөнкү оң
- ылдыйкы сол
- төмөнкү борбору
- укук борбору
- сол борбору
Бул жерде төмөнкү сол жогорку оң бурчуна чейин көчүп ак кызыл бир сүрөттөлгөн окшош жактарда үчүн CSS болуп саналат:
маалымат: ## 901A1C;
маалымат-сүрөт: -moz-линиялык-градиент (жогорку, # 901A1C 0%, # FFFFFF 100%);
маалымат-сүрөт: -webkit-градиент (сызыктык, жогорку, сол жак, түс аялдамасы (0, # 901A1C), анда түс иш-аялдамасы (1, #FFFFFF));
маалымат: -webkit-линиялык-градиент (жогорку, # 901A1C 0%, #ffffff 100%);
маалымат: eek:-линиялык-градиент (жогорку, # 901A1C 0%, #ffffff 100%);
маалымат: + avreal-линиялык-градиент (жогорку, # 901A1C 0%, #ffffff 100%);
маалымат: сызыктуу-градиент (жогорку, # 901A1C 0%, 100% #ffffff);
Бул, мисалы, эч кандай IE чыпкалары бар экенин байкаган мүмкүн. башынан аягына чейин (демейки) жана солдон (GradientType = 1 которбостон): Бул IE гана чыпкалар эки түрүн берет, себеби болуп саналат.
эле CSS жардамы менен иш-аракет бул кайчылаш сызыктуу градиент карагыла.
03 04
Түсү Stops
CSS3 сызыктуу градиент менен, сиз да Fancier кесепеттерин түзүү үчүн жактарда бир нече түстөрдү кошууга болот. Бул түстөрдү кошуу үчүн, үтүр менен ажыратып мүлктү, аягына чейин кошумча түстөрдү кошуу. Сиз сапта түстөрдүн баштоо же ошондой эле жок жерде камтышы керек.
Internet Explorer гана эки түстүү токтоону колдоо чыпкалайт, андыктан, бул градиент куруп жатканда, сиз гана көрсөтүү үчүн каалаган биринчи жана экинчи түстөрдү камтышы керек.
Бул жерде жогоруда 3-түсү жактарда үчүн CSS болуп саналат:
маалымат: #ffffff;
маалымат: -moz-линиялык-градиент (сол, 0% #ffffff, # 901A1C 51%, #ffffff 100%);
маалымат: -webkit-градиент (сызыктык, сол, оң, жогорку, түс аялдамасы (0%, # ffffff), анда түс иш-аялдамасы (51%, # 901A1C), анда түс иш-аялдамасы (100%, # ffffff));
маалымат: -webkit-линиялык-градиент (сол, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
маалымат: eek:-линиялык-градиент (сол, 0% #ffffff, # 901A1C 51%, # ffffff 100%);
маалымат: + avreal-линиялык-градиент (сол, 0% #ffffff, # 901A1C 51%, # ffffff 100%);
элеги: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
маалымат: сызыктуу-градиент (сол, 0% #ffffff, # 901A1C 51%, # ffffff 100%);
эле CSS жардамы менен иш-үч түстүү токтоолор менен сызыктуу градиент карагыла.
04 04
Make Building градиент жеӊил
Мен градиенттерди курууга жардам берүү үчүн сунуш эки жерлер бар, алардын ар бири үчүн пайдалуу жана кемчиликтери бар, бирок ал убакта мен баарын кайсы градиент куруучусу табылган жок.
Ultimate CSS Градиент Generator
ал Photoshop сыяктуу программалар менен куруучуларга градиент үчүн да ушундай эле жол менен ишке ашырат, анткени бул градиент генератор абдан популярдуу болуп саналат. Мен да силерге бардык CSS узартуу гана эмес, WebKit жана Mozilla берет, анткени, аны жакшы көрөм. Бул генератор менен маселе бир гана туурасынан жана тигинен градиенттерди колдоо болуп саналат. Сиз кайчылаш градиенттерди эмне керек болсо, мен сунуш башка генератор барып окууга аргасыз болушууда.
CSS3 Градиент Generator
Бул генератор биринчиге караганда, түшүнүү үчүн бир аз узунураак, мени алды, бирок ал кайчылаш чейин өзгөртүүгө жардам берет.
Эгер бул жакшы көрөм башка CSS Градиент генератор билип келсе, бизге жол .