Перша область блоку загорнута в тег секції, щоб ми могли плавати макет один за іншим. У лівій колонці містяться всі ці входи: текст, електронна пошта, URL та номер телефону. Під час перегляду вкладки на вашому телефоні дисплей мобільної клавіатури повинен адаптуватися залежно від типу введення. Є багато вагомих причин для підтримки цих функцій для мобільних пристроїв, оскільки в наші дні всі працюють на ходу.
Елемент textarea може також мати текст заповнювача, визначений на навантаженні. Це схоже на мітку, яка зникає після того, як користувач введе текст у поле. Атрибут, який не переноситься, є автозаповнення оскільки текстові поля зазвичай не заповнюють відповідний вміст.
Керування бічною панеллю Я хотів побудувати цю форму, щоб вона відповіла на зміну розмірів вікон. Коли вікно є достатньо повним, обидва вхідні стовпці плавають поруч один з одним. Але якщо ширина зрізається трохи нижче, права бічна панель падає нижче основного вмісту.
Ось мій HTML для бічної панелі:
Одержувач: Персонал сайту Головний редактор Технічний відділ Зв'язки з громадськістю Загальна підтримка Цей код насправді не є надто заплутаним. Просто простий варіант вибору меню і деяких перемикачів. Крім того, після цих об'єктів я помістив кнопку скидання та подання до кінця розділу.
Все це виглядає добре і добре, так що тепер давайте перейдемо до деяких властивостей CSS. Є багато налаштувань, які можна застосувати під час роботи над елементами форми. Постарайтеся не змусити себе занадто сильно мислити і весело провести час!
Анімовані коробки тіні Ви помітите, як ви пересуваєтеся по кожному з основних елементів введення, які я анімував барвисту зовнішню тінь. У Google Chrome є властивість структури, яка робить щось подібне, але не настільки екстравагантне. Ця невелика частина інтерфейсу приваблює відвідувачів, які почали відвідувати програму.
/ ** елементи форми ** / # hongkiat-форма box-sizing: border-box; # hongkiat-форма .txtinput display: block; сімейство шрифтів: "Helvetica Neue", Arial, sans-serif; стиль кордону: твердий; border-width: 1px; border-color: #dedede; margin-bottom: 20px; розмір шрифту: 1.55em; заповнення: 11px 25px; padding-left: 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-перехід: кордон 0.15s лінійний 0s, box-shadow 0.15s лінійний 0s, колір 0.15s лінійний 0s; -moz-перехід: кордон 0.15s лінійний 0s, box-shadow 0.15s лінійний 0s, колір 0.15s лінійний 0s; -o-перехід: кордон 0.15s лінійний 0s, box-shadow 0.15s лінійний 0s, колір 0.15s лінійний 0s; # hongkiat-форма .txtinput: focus color: # 333; border-color: 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; border-color: #dedede; margin-bottom: 15px; розмір шрифту: 1.5em; заповнення: 11px 25px; padding-left: 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-перехід: кордон 0.15s лінійний 0s, box-shadow 0.15s лінійний 0s, колір 0.15s лінійний 0s; -moz-перехід: кордон 0.15s лінійний 0s, box-shadow 0.15s лінійний 0s, колір 0.15s лінійний 0s; -o-перехід: кордон 0.15s лінійний 0s, box-shadow 0.15s лінійний 0s, колір 0.15s лінійний 0s; # hongkiat-форма textarea: фокус колір: # 333; border-color: 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 background: #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-код для кнопки "Відправити" на стандартному і наведеній стані.
#buttons #submitbtn display: block; поплавок: лівий; висота: 3em; заповнення: 0 1em; кордон: 1px твердий; контур: 0; font-weight: bold; розмір шрифту: 1.3em; колір: #fff; текстова тінь: 0px 1px 0px # 222; білий простір: nowrap; word-wrap: нормальний; вертикальне вирівнювання: середнє; курсор: покажчик; -moz-border-radius: 2px; -webkit-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-лінійний градієнт (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: -webkit-градієнт (лінійний, лівий верхній, лівий нижній, колір-стоп (3%, rgb (226,238,175)), колір-стоп (3%, rgb (188,216,77)), колір-стоп (100 %, rgb (144,176,38))); background-image: -webkit-лінійний градієнт (top, 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%); background-image: -ms-лінійний градієнт (зверху, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: лінійний градієнт (top, 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); фон: -моз-лінійний градієнт (верхній, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); фон: -вебкіт-градієнт (лінійний, лівий верхній, лівий нижній, колір-стоп (2%, rgb (228,237,189)), колір-стоп (3%, rgb (207,219,120)), колір-стоп (100%, rgb ( 149,175,54))); фон: -вебкіт-лінійний градієнт (верхній, 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 може навіть відтворювати ці градієнти за допомогою відповідного фільтра. Зверніть увагу на градієнти фону, я також включив новий колір кордону, закруглені кути, і тінь на коробці.
Кнопка скидання виглядає схожою, але я пройшов зовсім інший маршрут з колірною схемою. Світло-сірий має тенденцію потрапляти на задній план у порівнянні з яскраво-зеленими кольорами. Наша кнопка скидання ймовірно не буде використана дуже багато, тому вона не потребує всієї уваги.
#buttons #resetbtn display: block; поплавок: лівий; колір: # 515151; текстова тінь: -1px 1px 0px #fff; margin-right: 20px; висота: 3em; заповнення: 0 1em; контур: 0; font-weight: bold; розмір шрифту: 1.3em; білий простір: nowrap; word-wrap: нормальний; вертикальне вирівнювання: середнє; курсор: покажчик; -moz-border-radius: 2px; -webkit-border-radius: 2px; кордон-радіус: 2px; background-color: #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%); background-image: -о-лінійний градієнт (верхній, 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); text-shadow: 0 1px 1px rgba (255, 255, 255, 0,75); # кнопки #resetbtn: hover текст-тінь: 0 1px 1px rgba (255, 255, 255, 0,75); колір: # 818181; background-color: #fff; background-image: -moz-лінійний градієнт (top, 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-лінійний градієнт (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: -o-linear-gradient (top, 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); border-color: #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; По мірі наближення до розміру я намагаюся адаптувати кожну з форм введення. Властивість width може закінчитися довше, ніж сама веб-сторінка, а потім ми маємо форми введення, які стирчать над краєм. Це відбувається близько 550px, де я розбиваю наступний запит, а також обидві екрани екрану резолюції для портрета і ландшафту.
/ * менший екран dropoff ******* / @media тільки екран і (max-width: 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 переповнення: прихована; select.selmenu ширина: 160px; #recipientcase margin-right: 30px; Горизонтальний режим пейзажу все ще дуже добре тримає все разом. Я зробив лише випадаюче меню вибору трохи тонше, щоб звільнити місце для перемикачів. У портретному вигляді я змінив розміри всіх елементів на значно менші ширини. Тепер наш код не зламається навіть у змінених вікнах браузера. Але приємно мати підтримку смартфонів iOS / Android.
Демо Завантажити вихідний код Висновок Я сподіваюся, що цей підручник був інформативним у поясненні того, скільки можна зробити на ваших веб-формах. Нові властивості CSS3 є достатньо потужними, щоб побудувати повністю функціонуючі анімації лише за допомогою декількох рядків коду. Це дійсно захоплюючий час для роботи в веб-розробці і дотримання цих тенденцій.
Якщо у вас є ідеї або пропозиції щодо коду підручника, не забудьте поділитися ними з нами через поле коментарів нижче.
