01 04
CSS3 бар Cross-Browser сызықтық градиенттерін жасау
Сызықтық градиенттер
Көрінетін ең көп тараған градиент түрі - екі түсті сызықты градиент. Бұл градиент түз сызық бойымен қозғалатындығын білдіреді, сол сызық бойынша бірінші түстен екіншісіне дейін біртіндеп өзгереді. Бұл беттегі суретте #ffff (ақ) # 999 (қою сұр) жай солдан оңға қарай градиент көрсетілген.
Сызықтық градиенттер - браузерлерде анықталған ең қарапайым және қолдауға ие. CSS3 сызықты градиенттеріне Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ және Safari 4+ жүйелерінде қолдау көрсетіледі. Internet Explorer сүзгі арқылы градиенттерді қосады және оларды IE 5.5-ке қайтарады. Бұл CSS3 емес, бірақ бұл cross-browser браузерлерінің үйлесімділігі.
Градиентті анықтаған кезде бірнеше түрлі заттарды анықтау керек:
- Градиенттің қандай түрі - желілік немесе радиалды
- Градиент қай жерде бастау керек
- Градиент тоқтаған жерлерде
- Градиента қандай түстер бар және олар қайдан бастауы керек және тоқтатылуы керек
CSS3-ні қолданып сызықтық градиенттерді анықтау үшін сіз жазасыз:
сызықтық-градиент ( бұрыш немесе бүйір немесе бұрыш , түс тоқтату , түс тоқтату )
- Алдымен градиент түрін сызықты- градиент атымен анықтаңыз.
- Сонан соң, градиенттің басталу және тоқтату нүктелерін екі жолдың бірімен анықтаңыз: сызықтың бұрышы 0-ден 359-ға дейін, 0 градусқа дейін түзу. Немесе сол жақ, оң жақ, төменгі және жоғарғы тәрізді «жағы немесе бұрышы» функциясы бар. Бұлар келесі бетте толығырақ түсіндіріледі. Егер сіз бұларды қалдырсаңыз, градиент жоғарыдан бастап элементтің түбіне дейін ағып кетеді.
- Сонда сіз түсті тоқтатуды анықтайсыз. Түсті кодпен және қосымша пайызбен түс анықтайды. Пайыздықта жолда сызықта басталатын немесе аяқталатын шолғыш туралы айтылады. Әдепкі бойынша, түстерді жол бойымен біркелкі орналастыру керек. Сіз 3-беттегі түсті тоқтату туралы көбірек білесіз.
Сонымен, жоғарыдағы градиентті CSS3-де анықтау үшін сіз былай деп жазасыз:
сызықтық-градиент (сол жақ, # 999999 0%, #ffffff 100%);
Оны DIV-тің фоны ретінде орнату үшін сіз жазасыз:
div {
background-image: сызықтық-градиент (сол жағы, # 999999 0%, #ffffff 100%;
}
CSS3 Сызықтық градиенттер үшін шолғыш кеңейтімдері
Градиентті кросс-шолғышта жұмыс істеу үшін шолғыш кеңейтімдерін браузерлердің көпшілігі үшін және Internet Explorer 9 және одан төмен (шын мәнінде 2 сүзгілер) үшін сүзгі пайдалануға болады. Олардың барлығы сіздің градиентіңізді анықтау үшін бірдей элементтерге ие (тек IE-дегі 2-түсті градиентті ғана анықтауға болады).
Майкрософт сүзгілері және кеңейтімі - Интернеттегі шолғыш қолдау көрсетудің ең қиыны болып табылады, себебі сіз әр түрлі браузер нұсқаларын қолдау үшін үш түрлі сызық қажет. Жоғары ақ түсті градиентті алу үшін Сіз жазған едік:
/ * IE 5.5-7 * /
сүзгі: прокси: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-сүзгісі: «progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)»;
/ * IE 10 * /
-ms-сызықтық-градиент (сол жағы, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz- кеңейтімі, -moz-кеңейтімімен, CSS3 сипаты сияқты жұмыс істейді. Firefox үшін жоғарыда көрсетілген градиентті алу үшін, жазыңыз:
-моз-сызықтық-градиент (сол жағы, # 999999 0%, #ffffff 100%);
Opera Extension -The -o-кеңейтімі Opera 11.1+-ге градиенттерді қосады. Жоғарыда келтірілген градиентті алу үшін, жазыңыз:
-o-желілік-градиент (сол жағы, # 999999 0%, #ffffff 100%);
Webkit Extension -Webkit-кеңейтімі CSS3 сипаты сияқты көп жұмыс істейді. Safari 5.1+ немесе Chrome 10+ үшін жоғарыдағы градиентті анықтау үшін сіз:
-webkit-linear-gradient (сол жағында, # 999999 0%, #ffffff 100%);
Chrome 2+ және Safari 4+ жүйелерімен жұмыс істейтін Webkit кеңейтімінің ескі нұсқасы бар. Онда градиент түрін сипат атауына емес, мән ретінде анықтайсыз. Бұл кеңейтумен ақ түсті градиентке сұр түсіру үшін мынаны жазыңыз:
-webkit-градиент (сызықтық, сол жақ жоғарғы, оң жақ жоғарғы, түс-тоқтату (0%, # 999999), түс-тоқтату (100%, # ffffff));
CSS3 толық сызықты градиент CSS коды
Сұр түсті градиентті алу үшін толық кросс-браузерді қолдау үшін алдымен градиентті қолдамайтын браузерлер үшін қалпына келтірілген толық түсті қамту керек, ал соңғы элемент толығымен үйлесімді браузерлер үшін CSS3 стилі болуы керек. Сонымен, Сіз жазыңыз:
фон: # 999999;
background: -moz-сызықтық-градиент (сол жағы, # 999999 0%, #ffffff 100%);
background: -webkit-градиент (сызықтық, сол жақ жоғарғы, оң жақ жоғарғы, түс-стоп (0%, # 999999), түс-тоқтату (100%, # ffffff));
фон: -webkit-сызықтық-градиент (сол жағы, # 999999 0%, #ffffff 100%);
фон: -o-желілік-градиент (сол жағы, # 999999 0%, #ffffff 100%);
фон: -ms-сызықты-градиент (сол жағы, # 999999 0%, #ffffff 100%);
сүзгі: прокси: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: prod.: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
background: сызықтық-градиент (сол жағы, # 999999 0%, #ffffff 100%);
Осы оқулықтағы келесі беттер градиенттің бөліктерін егжей-тегжейлі түсіндіреді, ал соңғы бет сізді CSS3 градиенттерін автоматты түрде жасаудың тамаша тәсілі болып табылатын құралға нұсқайды.
CSS-ні қолданып бұл сызықты градиентті көріңіз.
02 04
Диагональды градиенттерді құру - Градиенттің бұрышы
Бастау және тоқтату нүктелері градиенттің бұрышын анықтайды. Көптеген сызықтық градиенттер жоғарыдан төменге немесе солдан оңға қарай болады. Дегенмен, диагональды сызықта қозғалыс жасайтын градиент құруға болады. Бұл беттегі суретте кескіннің 45 градус бұрышында оңнан солға жылжытатын қарапайым градиентті көрсетеді.
Градиент сызығын анықтау үшін бұрыштар
Бұрыш - элементтің ортасындағы саналы шеңбердегі сызық. 0дег жоғары, оң жағында 90 дедж нүктесі, 180 дэг төмен, ал солға 270дэг нүкте. 0-ден 359 градус кез келген бұрышты анықтай аласыз.
Квадратта 45 градус бұрыш жоғарғы сол жақ бұрыштан төменгі оң жаққа қарай жылжиды, алайда тікбұрышта бас және аяқталу нүктелері кескіннен көріп тұрғандай, пішіннен біршама сырты болады.
Диагональды градиентті анықтаудың кең тараған жолы - жоғарғы оң жақ сияқты бұрышты анықтау және градиент бұрыштан қарсы бұрышқа жылжиды. Келесі түйінді сөздерді бастау постоны анықтай аласыз:
- жоғарғы жағы
- құқық
- түбі
- сол
- орталығы
Оларды біріктіруге болады, мысалы:
- жоғарғы оң жақта
- жоғарғы сол жақта
- жоғарғы орталық
- төменгі оң жақта
- төменгі сол жақта
- төменгі орталық
- оң жақ орталық
- сол орталық
Мұнда суреттегідей градиентті CSS, жоғарғы оң жақ бұрышынан төменгі солға жылжыған ақ-қызыл түске дейін:
фон: ## 901A1C;
background-image: -moz-сызықтық-градиент (оң жағы, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-градиент (сызықтық, оң жақ жоғарғы, сол жақ төменгі, түс-тоқтату (0, # 901A1C), түс-тоқтату (1, #FFFFFF));
фон: -webkit-сызықтық-градиент (оң жағы, # 901A1C 0%, #ffffff 100%);
background: -o-linear-градиент (оң жағы, # 901A1C 0%, #ffffff 100%);
фон: -ms-сызықты-градиент (оң жағы, # 901A1C 0%, #ffffff 100%);
background: сызықтық-градиент (оң жағы, # 901A1C 0%, #ffffff 100%);
Сіз бұл мысалда IE сүзгілерінің жоқ екенін байқадыңыз. Өйткені IE тек сүзгілердің екі түрін ғана береді: жоғарғыдан төменге (әдепкі) және солдан оңға (GradientType = 1 қосқышымен).
Қарапайым сызықты градиентді CSS-ні қолданып көріңіз.
03 04
Түстер тоқтайды
CSS3 сызықты градиенттермен сіз тіпті галлереяға бірнеше түстер қосып, тіпті сүюшілердің әсерлерін жасай аласыз. Осы түстерді қосу үшін, сипаттарыңыздың соңына үтірлермен бөлінген қосымша түстер қосасыз. Түстердің қай жерде басталуы немесе аяқталуы керек екенін қосыңыз.
Internet Explorer сүзгілері тек екі түсті тоқтатуды қолдайды, сондықтан осы градиентді құрған кезде, көрсетілетін бірінші және екінші түстерді ғана қамтуыңыз қажет.
Мұнда жоғарыда көрсетілген 3-түсті градиент үшін CSS:
фон: #ffffff;
background: -moz-желілік-градиент (сол жақ, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -webkit-градиент (сызықтық, сол жақ жоғарғы, оң жақ жоғарғы, түс-тоқтату (0%, # ffffff), түс-тоқтату (51%, # 901A1C), түс-тоқтату (100%, # ffffff));
background: -webkit-linear-gradient (сол, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
фон: -o-желілік-градиент (сол жақ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
фон: -ms-сызықтық-градиент (сол, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
сүзгі: прокси: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
background: сызықтық-градиент (сол, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Осы үш сызықты градиентті қарапайым CSS арқылы ғана үш түстік аялдамамен көріңіз.
04 04
Градиенттердің құрылысын жеңілдету
Градиенттерді құруға көмектесу үшін ұсынылатын екі сайт бар, олардың әрқайсысында артықшылықтар мен кемшіліктер бар, мен әлі күнге дейін жасайтын градиент құрылысшысын таппадым.
Соңғы градиент генераторы
Градиент генераторы өте танымал, себебі Photoshop секілді бағдарламаларда градиент құрастырушыларға ұқсас жұмыс жасайды. Мен сондай-ақ ұнатамын, себебі ол Webkit және Mozilla емес, барлық CSS кеңейтімдерін береді. Генератордың проблемасы көлденең және тік градиенттерді ғана қолдайды. Диагональді градиенттерді жасағыңыз келсе, ұсынатын басқа генераторға бару керек.
CSS3 градиент генераторы
Бұл генератор біріншісінен гөрі түсіну үшін мені ұзағырақ алды, бірақ ол диагоналіге бағытын өзгертуді қолдайды.
Егер сіз басқа CSS Gradient Generator-ді білсеңіз, олардан жақсы көресіз, бізге хабарлаңыз .