Креирање Роцкинг ЦСС3 оквира за претраживање
ЦСС3 је језик стила следеће генерације. Представља много нових и узбудљивих карактеристика као што су сенке, анимације, прелази, радијуси граница итд. Иако спецификације још нису финализиране, многи произвођачи претраживача већ су почели да подржавају многе нове функције..
У овом упутству ћемо истражити неке од ових функција тект-схадов, бордер-радиус, бок-схадовс и прелазе за креирање поља за претраживање.
Пхотосхоп верзију овог поља за претраживање је креирао Алвин Тхонг и може се преузети овде. Покушао сам да поново креирам ово поље за претраживање помоћу чистог ЦСС3. Треба напоменути да нису сви претраживачи подржали ЦСС3 функције и да бисте испробали овај водич, треба да користите један од модерних претраживача који подржавају ЦСС 3 функције.
Спремни? Хајде да почнемо!
1. ХТМЛ5 Доцтипе
Почећемо са ХТМЛ маркупом. Веома је једноставно, после ХТМЛ5 доцтипе и декларација, имамо а са ИД-ом #враппер у . Ово се ради једноставно да бисте дефинисали ширину оквира садржаја и да бисте га поравнали са центром странице.
Након тога слиједи а Ево како изгледа код: Да бисте направили велику кутију око форме, додаћемо стилове у Важан део кода овде је Објашњење: Овде, кључна реч инсет одређује да ли ће сенка бити унутар оквира. Прва два нула означавају к-оффсет и и-оффсет, а 3пк означава замућење. Следећа је декларација боја. Овде сам користио вредности ргба; ргба означава црвено зелено плаво и алфа (непрозирност). Тако 4 вредности унутар заграда указују на количину црвене, зелене, плаве и њене алфа (непрозирности). Приметићете да је 5 комплета декларација у сенци скупљено. То се може урадити раздвајањем зареза. Прве две сенке дефинишу ефекат белог "унутрашњег сјаја", а следеће декларације дају кутији његов чврст / груб изглед. Играјте се са овим вредностима да бисте разумели како функционише. Сада када је кутија завршена, пређите на стилинг поља за унос. Стилови декларисани за поље за унос су прилично слични онима који су декеред за велику кутију Објашњење: Приметићете да је овај пут замућење сенке задржано на 0 да би се добила оштра сенка и да се користи вертикални офсет од 5пк. У узастопним декларацијама, замућење је задржано на 0пк, али су боја и и-оффсет промењени. Опет, заиграјте се са овим вредностима да бисте добили различите резултате. Хајде да стилизујемо дугме за претрагу. Поред боја, тастер за претрагу има углавном исте стилове као и онај спољашње кутије. Слични гранични радијус и бок-схадовс су коришћени на дугмету. Нова функција која је уведена је Објашњење: Ин тхе Активно стање дугмета има мало више измена. У овом, дала сам дугме позицију апсолутне и 'топ' вредности од 5пк. Ово је урађено како би се добио природнији изглед, тако да се чини да је дугме заиста притиснуто за 5 пиксела. Остале промене активног стања су боје позадине и сенке. Обратите пажњу на то да сам редуковао и-оффсет сенке да бих му дао "притиснут" изглед. Ево кода за активно стање дугмета за слање: Ово довршава наше поље за претрагу. Користили смо доста нових ЦСС3 карактеристика. Ево комплетног ЦСС-а и ХТМЛ-а овог поља за претрагу. Надам се да сте уживали у овом туториалу. Слободно експериментишите са овим функцијама и не заборавите да поделите своје мисли. Напомена уредника: Овај пост је написао / ла Бхарани М фор Хонгкиат.цом. Бхарани је дизајнер / девелопер из Њу Делхија, Индија.#главни. Овај ИД садржи стилове који дефинишу велики бели оквир око поља за унос и дугме за претрагу. Ово проглашен унутар њега. Образац има поље за унос текста и сеарцх буттон. Овако изгледа образац без икаквих стилова који се примењују на њега: 
ЦСС3 поље за претрагу
2. Креирање граничног оквира
#главни. Из кода приказаног испод, приметићете да је кутија добила ширину од 400пк и висину од 50пк. #маин видтх: 400пк; хеигхт: 50пк; бацкгроунд: # ф2ф2ф2; паддинг: 6пк 10пк; бордер: 1пк солид # б5б5б5; -моз-бордер-радиус: 5пк; -вебкит-бордер-радиус: 5пк; бордер-радиус: 5пк; -моз-бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0.8), инсет 0 2пк 2пк ргба (255, 255, 255, 1), 0 5пк 0 #ццц, 0 6пк 0 # 989898, 0 13пк 0 #дфдеде; -вебкит-бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0.8), инсет 0 2пк 2пк ргба (255, 255, 255, 1), 0 5пк 0 #ццц, 0 6пк 0 # 989898, 0 13пк 0 #дфдеде; бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0.8), инсет 0 2пк 2пк ргба (255, 255, 255, 1), 0 5пк 0 #ццц, 0 6пк 0 # 989898, 0 13пк 0 # дфдеде;
бордер-радиус декларације и бок-схадов декларације. За креирање заобљених углова, користили смо ЦСС3 декларацију границе-радијуса, "-моз-" и "-вебкит-" префикси претраживача су коришћени да би се осигурало да ово ради у претраживачима заснованим на гецко и вебкит. Декларације кутија у сенци могу изгледати помало збуњујуће, али је заправо врло једноставно. бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0.8), инсет 0 2пк 2пк ргба (255, 255, 255, 1), 0 5пк 0 #ццц, 0 6пк 0 # 989898, 0 13пк 0 # дфдеде;
Преглед
3. Стилинг поља за унос
инпут [типе = "тект"] флоат: лево; видтх: 230пк; паддинг: 15пк 5пк 5пк 5пк; маргин-топ: 5пк; маргин-лефт: 3пк; бордер: 1пк солид # 999999; -моз-бордер-радиус: 5пк; -вебкит-бордер-радиус: 5пк; бордер-радиус: 5пк; -моз-бок-схадов: инсет 0 5пк 0 # цц, инсет 0 6пк 0 # 989898, инсет 0 13пк 0 #дфдеде; -вебкит-бок-схадов: инсет 0 5пк 0 # цц, инсет 0 6пк 0 # 989898, инсет 0 13пк 0 #дфдеде; бок-схадов: инсет 0 5пк 0 #ццц, инсет 0 6пк 0 # 989898, инсет 0 13пк 0 #дфдеде;
#главни. Користили смо исти радијус границе (5пк). Опет, вишеструке сенке су забележене. бок-схадов: инсет 0 5пк 0 #ццц, инсет 0 6пк 0 # 989898, инсет 0 13пк 0 #дфдеде;
Преглед
4. Стилинг дугме за слање
инпут [типе = "субмит"] солид флоат: лефт; курсор: показивач; видтх: 130пк; паддинг: 8пк 6пк; маргин-лефт: 20пк; бацкгроунд-цолор: # ф8б838; цолор: ргба (134, 79, 11, 0.8); тект-трансформ: велика слова; фонт-веигхт: болд; бордер: 1пк солид # 99631д; -моз-бордер-радиус: 5пк; -вебкит-бордер-радиус: 5пк; бордер-радиус: 5пк; тект-схадов: 0 1пк 2пк ргба (255, 255, 255, 0,7), 0 -1пк 0 ргба (64, 38, 5, 0.9); -моз-бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0,6), инсет 0 1пк 2пк ргба (255, 255, 255, 0,7), 0 5пк 0 # б8882а, 0 6пк 0 # 593а11, 0 13пк 0 #ццц; -вебкит-бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0,6), инсет 0 1пк 2пк ргба (255, 255, 255, 0,7), 0 5пк 0 # б8882а, 0 6пк 0 # 593а11, 0 13пк 0 #ццц; бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0,6), инсет 0 1пк 2пк ргба (255, 255, 255, 0,7), 0 5пк 0 # б8882а, 0 6пк 0 # 593а11, 0 13пк 0 # ццц; -вебкит-транситион: позадина 0.2с олакшава;
тект-схадов. тект-схадов: 0 1пк 2пк ргба (255, 255, 255, 0,7), 0 -1пк 0 ргба (64, 38, 5, 0.9);
тект-схадов Декларација, прве три нумеричке вредности су к-оффсет, и-оффсет и блур. Вредности ргба означавају боју сенке. У следећем скупу декларације (одвојено зарезом), и-оффсет добија вредност -1. Ово је учињено како би се дао текст “Унутрашња сенка” ефекат. Стање лебдења / фокуса на дугме за слање има различите вредности боје позадине и сенки. Преглед
"Активно" стање за дугме
инпут [типе = "субмит"] солид: ацтиве бацкгроунд: # ф6а000; позиција: релативна; топ: 5пк; бордер: 1пк солид # 702д00; -моз-бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0,6), инсет 0 1пк 2пк ргба (255, 255, 255, 0,7), 0 3пк 0 # б8882а, 0 4пк 0 # 593а11, 0 8пк 0 #ццц; -вебкит-бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0,6), инсет 0 1пк 2пк ргба (255, 255, 255, 0,7), 0 3пк 0 # б8882а, 0 4пк 0 # 593а11, 0 8пк 0 #ццц; бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0,6), инсет 0 1пк 2пк ргба (255, 255, 255, 0,7), 0 3пк 0 # б8882а, 0 4пк 0 # 593а11, 0 8пк 0 # ццц;
Комплетан (ЦСС) код
#маин видтх: 400пк; хеигхт: 50пк; бацкгроунд: # ф2ф2ф2; паддинг: 6пк 10пк; бордер: 1пк солид # б5б5б5; -моз-бордер-радиус: 5пк; -вебкит-бордер-радиус: 5пк; бордер-радиус: 5пк; -моз-бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0.8), инсет 0 2пк 2пк ргба (255, 255, 255, 1), 0 5пк 0 #ццц, 0 6пк 0 # 989898, 0 13пк 0 #дфдеде; -вебкит-бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0.8), инсет 0 2пк 2пк ргба (255, 255, 255, 1), 0 5пк 0 #ццц, 0 6пк 0 # 989898, 0 13пк 0 #дфдеде; бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0.8), инсет 0 2пк 2пк ргба (255, 255, 255, 1), 0 5пк 0 #ццц, 0 6пк 0 # 989898, 0 13пк 0 # дфдеде; инпут [типе = "тект"] флоат: лефт; видтх: 230пк; паддинг: 15пк 5пк 5пк 5пк; маргин-топ: 5пк; маргин-лефт: 3пк; бордер: 1пк солид # 999999; -моз-бордер-радиус: 5пк; -вебкит-бордер-радиус: 5пк; бордер-радиус: 5пк; -моз-бок-схадов: инсет 0 5пк 0 # цц, инсет 0 6пк 0 # 989898, инсет 0 13пк 0 #дфдеде; -вебкит-бок-схадов: инсет 0 5пк 0 # цц, инсет 0 6пк 0 # 989898, инсет 0 13пк 0 #дфдеде; бок-схадов: инсет 0 5пк 0 #ццц, инсет 0 6пк 0 # 989898, инсет 0 13пк 0 #дфдеде; инпут [типе = "субмит"] солид флоат: лефт; курсор: показивач; видтх: 130пк; паддинг: 8пк 6пк; маргин-лефт: 20пк; бацкгроунд-цолор: # ф8б838; цолор: ргба (134, 79, 11, 0.8); тект-трансформ: велика слова; фонт-веигхт: болд; бордер: 1пк солид # 99631д; -моз-бордер-радиус: 5пк; -вебкит-бордер-радиус: 5пк; бордер-радиус: 5пк; тект-схадов: 0 1пк 2пк ргба (255, 255, 255, 0,7), 0 -1пк 0 ргба (64, 38, 5, 0.9); -моз-бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0,6), инсет 0 1пк 2пк ргба (255, 255, 255, 0,7), 0 5пк 0 # б8882а, 0 6пк 0 # 593а11, 0 13пк 0 #ццц; -вебкит-бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0,6), инсет 0 1пк 2пк ргба (255, 255, 255, 0,7), 0 5пк 0 # б8882а, 0 6пк 0 # 593а11, 0 13пк 0 #ццц; бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0,6), инсет 0 1пк 2пк ргба (255, 255, 255, 0,7), 0 5пк 0 # б8882а, 0 6пк 0 # 593а11, 0 13пк 0 # ццц; -вебкит-транситион: позадина 0.2с олакшава; инпут [типе = "субмит"] солид: ховер, инпут [типе = "субмит"] солид: фоцус бацкгроунд: # ффд842; -моз-бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0.9), инсет 0 2пк 1пк ргба (255, 250, 76, 0.8), 0 5пк 0 # д8а031, 0 6пк 0 # 593а11, 0 13пк 0 #ццц; -вебкит-бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0.9), инсет 0 2пк 1пк ргба (255, 250, 76, 0.8), 0 5пк 0 # д8а031, 0 6пк 0 # 593а11, 0 13пк 0 #ццц; бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0.9), инсет 0 2пк 1пк ргба (255, 250, 76, 0.8), 0 5пк 0 # д8а031, 0 6пк 0 # 593а11, 0 13пк 0 # ццц; инпут [типе = "субмит"] солид: ацтиве бацкгроунд: # ф6а000; позиција: релативна; топ: 5пк; бордер: 1пк солид # 702д00; -моз-бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0,6), инсет 0 1пк 2пк ргба (255, 255, 255, 0,7), 0 3пк 0 # б8882а, 0 4пк 0 # 593а11, 0 8пк 0 #ццц; -вебкит-бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0,6), инсет 0 1пк 2пк ргба (255, 255, 255, 0,7), 0 3пк 0 # б8882а, 0 4пк 0 # 593а11, 0 8пк 0 #ццц; бок-схадов: инсет 0 0 3пк ргба (255, 255, 255, 0,6), инсет 0 1пк 2пк ргба (255, 255, 255, 0,7), 0 3пк 0 # б8882а, 0 4пк 0 # 593а11, 0 8пк 0 # ццц;
