Първата блокова област е опакована в раздел маркер, така че можем да плаваме оформлението рамо до рамо. Лявата колона съдържа всички тези входове: текст, електронна поща, URL адрес и телефонен номер. Докато прелиствате в телефона си, дисплеят на мобилната клавиатура трябва да се адаптира в зависимост от типа вход. Има много добри причини да се подкрепят тези функции за мобилни устройства, тъй като всички работят в движение в наши дни.
Елементът textarea може също така да има текст на контейнер, дефиниран върху натоварването. Това е подобно на етикет, който изчезва, след като потребителят въведе някакъв текст в полето. Атрибутът, който не се пренася, е функция за автоматично довършване защото текстовите полета обикновено не попълват свързано съдържание.
Контроли на страничната лента Исках да създам тази форма, така че да реагира адекватно на преоразмеряването на екраните. Когато прозорецът е достатъчно пълен, двете входящи колони са плаващи един до друг. Но ако ширината е изрязана леко след това, дясната странична лента пада под основното съдържание.
Ето моят HTML код за областта на страничната лента:
Получател: Персонал на сайта Главен редактор Технически отдел Връзки с обществеността Обща поддръжка Този код всъщност не е нещо твърде объркващо. Просто просто опция изберете меню и някои радио бутони. Освен това, след тези обекти поставих бутон за нулиране и подаване към края на секцията.
Всичко това изглежда добре и добре, така че сега ще преминем към някои CSS свойства. Има толкова много персонализации, които можете да приложите, когато работите върху елементи на формуляри. Опитайте се да не се забърквате с прекалено много мисли и да се забавлявате!
Анимирани сенки Ще забележите, докато прелиствате всеки от основните входни елементи, които съм анимирал цветна външна сянка. Google Chrome има свойство, което прави нещо подобно, но не е толкова екстравагантно. Тази малка част от интерфейса привлича посетители за първи път.
/ ** елементите на формата ** / # hongkiat-форма box-sizing: border-box; # hongkiat-форма .txtinput display: block; семейство шрифт: "Helvetica Neue", Arial, sans-serif; граничен стил: твърдо; border-width: 1px; граничен цвят: #dedede; margin-bottom: 20px; размер на шрифта: 1.55em; подложка: 11px 25px; подложка-ляво: 55px; ширина: 90%; цвят: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1); преход: граница 0.15s линейни 0s, кутия сянка 0.15s линейни 0s, цветни 0.15s линейни 0s; -webkit-transition: граница 0.15s линейни 0s, box-shadow 0.15s линейни 0s, цветни 0.15s линейни 0s; -moz-transition: граница 0.15s линейни 0s, box-shadow 0.15s линейни 0s, цветни 0.15s линейни 0s; -о-преход: граница 0.15s линейни 0s, box-shadow 0.15s линейни 0s, цветни 0.15s линейни 0s; # hongkiat-форма .txtinput: focus цвят: # 333; граничен цвят: rgba (41, 92, 161, 0.4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1), 0 0 8px rgba (41, 92, 161, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1), 0 0 8px rgba (41, 92, 161, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1), 0 0 8px rgba (41, 92, 161, 0.6); контур: 0 няма; За да насочите всеки елемент от текста, аз използвах класа .txtinput. Всяка от характеристиките на прехода работи на граница, кутия сянка и цвят. аз използвам оразмеряване на кашони: гранична кутия; върху контейнера за формуляри, така че подплата не нарушава нашия отзивчив дизайн.
Трябваше да копирам тези същите стилове и да ги редактирам леко за текстовата област. Промених някои от подложките и полетата и добавих уникална фонова икона.
# hongkiat-форма textarea display: block; семейство шрифт: "Helvetica Neue", Arial, sans-serif; граничен стил: твърдо; border-width: 1px; граничен цвят: #dedede; margin-bottom: 15px; размер на шрифта: 1.5em; подложка: 11px 25px; подложка-ляво: 55px; ширина: 90%; височина: 180px; цвят: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1); преход: граница 0.15s линейни 0s, кутия сянка 0.15s линейни 0s, цветни 0.15s линейни 0s; -webkit-transition: граница 0.15s линейни 0s, box-shadow 0.15s линейни 0s, цветни 0.15s линейни 0s; -moz-transition: граница 0.15s линейни 0s, box-shadow 0.15s линейни 0s, цветни 0.15s линейни 0s; -о-преход: граница 0.15s линейни 0s, box-shadow 0.15s линейни 0s, цветни 0.15s линейни 0s; # hongkiat-textarea: focus цвят: # 333; граничен цвят: rgba (41, 92, 161, 0.4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1), 0 0 8px rgba (40, 90, 160, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1), 0 0 8px rgba (40, 90, 160, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1), 0 0 8px rgba (40, 90, 160, 0.6); контур: 0 няма; # hongkiat-форма textarea.txtblock фон: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px без повторение; Входове на страничната лента Радио бутоните и елементите от менюто са много по-прости. Можете да приложите външни ефекти на сияние и подобни сенки за падане върху тези елементи, но не винаги изглежда добре. Алтернативно, дизайнерите ще създадат потребителски потребителски интерфейси и ще ги прикачат като фонови изображения. Но това може да изисква обходен начин на jQuery, за да се запазят правилно показваните опции.
span.radiobadge display: block; margin-bottom: 8px; етикет span.radiobadge font-size: 1.2em; подложка-дъно: 4px; select.selmenu font-size: 17px; цвят: # 676767; подложка: 9px! граница: 1px твърдо #aaa; ширина: 200px; Не съм направил много, за да ги отблъсна от основните входни елементи. Изобилието от допълнителни подложки е важно, така че потребителите да се чувстват комфортно във взаимодействието с формуляра. Когато текстът е супер малък, това може да бъде борба само за попълване на всяка част. Дръжте шрифта си голям, но не толкова голям, че надделява страницата.
Персонализирани бутони Бутоните за нулиране и подаване са проектирани в свой собствен клас. Направих набор от светлинни градиенти, които да съвпадат добре със сините акценти в полетата за формуляри.
По-долу е моят CSS код за бутона за подаване на стандартното състояние и състоянието на мишката.
# бутони #submitbtn display: block; поплавък: наляво; височина: 3em; подложка: 0 1em; граница: 1px твърдо; контур: 0; тегло на шрифта: удебелен; размер на шрифта: 1.3em; цвят: #fff; текстова сянка: 0px 1px 0px # 222; бяло пространство: nowrap; пренос на думи: нормално; вертикално подравняване: средно; курсор: указател; -moz-border-radius: 2px; -bubkit-border-radius: 2px; граничен радиус: 2px; border-color: # 5e890a # 5e890a # 000; -moz-box-shadow: вмъкване 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow: вмъкване 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: вмъкване 0 1px 0 rgba (256,256,256, .35); box-shadow: вмъкване 0 1px 0 rgba (256,256,256, .35); фонов цвят: rgb (226,238,175); background-image: -moz-линеен градиент (отгоре, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: -webkit-gradient (линеен, ляв отгоре, ляво долу, цветен стоп (3%, rgb (226,238,175)), цветен стоп (3%, rgb (188,216,77)), цветен стоп (100 %, RGB (144,176,38))); background-image: -webkit-линеен градиент (отгоре, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); фонов образ: -о-линеен градиент (отгоре, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: -ms-линеен градиент (отгоре, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: линеен градиент (отгоре, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); # бутони #submitbtn: hover, #butons #submitbtn: active border-color: # 7c9826 # 7c9826 # 000; цвят: #fff; -moz-box-shadow: вмъкване 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); -ms-box-shadow: вмъкване 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-shadow: вмъкване 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); box-shadow: вмъкване 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); фон: rgb (228,237,189); фон: -moz-линеен градиент (отгоре, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); фон: -webkit-градиент (линеен, ляв отгоре, ляво дъно, цветен стоп (2%, rgb (228,237,189)), цветен стоп (3%, rgb (207,219,120)), цветен стоп (100%, rgb ( 149,175,54))); фон: -wekkit-линеен градиент (отгоре, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); фон: -о-линеен градиент (отгоре, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); фон: -ms-линеен градиент (отгоре, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); фон: линеен градиент (отгоре, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); Това е почти невъзможно да се поддържа този тип селектор чист! Има твърде много свойства, от които се нуждаете, за да изброите и поддържате много по-стари браузъри. Internet Explorer може дори да направи тези градиенти с правилния филтър. Забележете, освен градиентите на фона, също и нов цвят на границата, закръглени ъгли и кутия за сянка върху мишката.
Бутонът за рестартиране изглежда подобен, но аз отидох по съвсем различен маршрут с цветовата схема. Светлосивият цвят има тенденция да пада на заден план в сравнение с ярко зелените цветове. Нашият бутон за нулиране вероятно няма да се използва много, така че не се нуждае от цялото внимание.
# бутони #resetbtn display: block; поплавък: наляво; цвят: # 515151; текстова сянка: -1px 1px 0px #fff; margin-right: 20px; височина: 3em; подложка: 0 1em; контур: 0; тегло на шрифта: удебелен; размер на шрифта: 1.3em; бяло пространство: nowrap; пренос на думи: нормално; вертикално подравняване: средно; курсор: указател; -moz-border-radius: 2px; -bubkit-border-radius: 2px; граничен радиус: 2px; фонов цвят: #fff; background-image: -moz-линеен градиент (отгоре, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: -webkit-gradient (линеен, ляв отгоре, ляво долу, цветен стоп (2%, rgb (255,255,255)), цветен стоп (2%, rgb (240,240,240)), цветен стоп (100%, RGB (222,222,222))); background-image: -webkit-линеен градиент (отгоре, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); фонов образ: -о-линеен градиент (отгоре, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: -ms-линеен градиент (отгоре, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: линеен градиент (отгоре, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); граница: 1px твърдо # 969696; box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); -moz-box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); -webkit-box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); текстова сянка: 0 1px 1px rgba (255, 255, 255, 0.75); # бутони #resetbtn: hover текстова сянка: 0 1px 1px rgba (255, 255, 255, 0.75); цвят: # 818181; фонов цвят: #fff; background-image: -moz-линеен градиент (отгоре, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: -webkit-gradient (линеен, ляв отгоре, ляво долу, цветен стоп (2%, rgb (255,255,255)), цветен стоп (2%, rgb (244,244,244)), цветен стоп (100%, RGB (229,229,229))); background-image: -webkit-linear-gradient (отгоре, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%) background-image: -o-linear-gradient (горе, rgb 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: -ms-линеен градиент (отгоре, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: линеен градиент (отгоре, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); граничен цвят: #aeaeae; box-shadow: вмъкване 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); Можете дори да изпуснете типа за нулиране и да използвате тази бяла / сива цветова схема като основен бутон за подаване. Използвал съм много от същите градиентни стилове и ефекти на сянка, както и текстова сянка за вътрешния етикет. Това определено дава различно усещане на потребителския опит.
Отзивчиви промени в оформлението Придвижвайки се в другия ми CSS файл, можем да разгледаме простите отзиви на медиите, които съм настроил. Всеки прозорец на браузъра над 800 пиксела ще има пълния интерфейс на страничната лента. Докато достигате този праг, лявата колона се разширява до 100% ширина и виждате елементите на страничната лента, които пада надолу.
@media екран и (max-width: 800px) body padding: 10px 15px; #container ширина: 100%; # hongkiat-форма #aligned width: 100%; плувка: няма; дисплей: блок; # hongkiat-форма #aside ширина: 100%; дисплей: блок; плувка: няма; # hongkiat-форма .txtinput, # hongkiat-форма textarea ширина: 85%; #prioritycase float: left; дисплей: блок; #recipientcase float: left; дисплей: блок; margin-right: 55px; Когато се приближим по-близо до размера, се опитвам да адаптирам всяка от формите за въвеждане. Свойството на ширината може да се окаже по-дълго от самата уеб страница и след това има форми за вмъкване, които се задържат над ръба. Това се случва около 550px, което е мястото, където прекъсвам следващата заявка, заедно с двете резолюции на екрана на iPhone за портрет и пейзаж.
/ * по-малък екран dropoff ******* / @media само екран и (макс-ширина: 550px) # hongkiat-форма .txtinput, # hongkiat-форма textarea ширина: 80%; / * iPhone Landscape ******** / @media само екран и (max-width: 480px) body padding: 10px 0px; select.selmenu ширина: 190px; / * iPhone портрет ******* / @media само екран и (max-width: 320px) body padding: 10px 0px; # hongkiat-форма .txtinput, # hongkiat-форма textarea ширина: 70%; # hongkiat-форма #aligned overflow: hidden; select.selmenu width: 160px; #recipientcase margin-right: 30px; Хоризонталният пейзажен режим все още държи всичко заедно много добре. Направих само падащото меню за избор малко по-тънки, за да освободя място за радио бутоните. В портретен изглед преоразмерявах всички елементи до много по-малки ширини. Сега нашият код няма да се счупи дори в преоразмерените прозорци на браузъра. Но е хубаво да има и поддръжка за смартфони с iOS / Android.
Демонстрация Изтегляне на изходния код заключение Надявам се, че този урок е информативен в обяснението на това колко много може да се направи на вашите уеб форми. Новите CSS3 свойства са достатъчно мощни за изграждане на напълно функциониращи анимации само с няколко реда код. Това е наистина вълнуващо време да работите в уеб разработката и да следвате тези тенденции.
Ако имате идеи или предложения за учебния код, можете да ги споделите с нас чрез полето за коментари по-долу.
