Область первого блока заключена в тег раздела, чтобы мы могли перемещать макет рядом. В левом столбце содержатся все эти данные: текст, электронная почта, URL-адрес и номер телефона. Когда вы нажимаете на телефоне, экран мобильной клавиатуры должен адаптироваться в зависимости от типа ввода. Существует множество веских причин для поддержки этих функций для мобильных устройств, поскольку в наши дни все работают на ходу.
Элемент textarea также может иметь заполнитель, определенный для загрузки страницы. Это похоже на метку, которая исчезает, когда пользователь вводит текст в поле. Атрибут, который не переносится, автозаполнения потому что текстовые области обычно не заполняют связанный контент.
Элементы управления боковой панели Я хотел построить эту форму так, чтобы она соответствующим образом реагировала на изменение размеров окон. Когда окно достаточно полно, оба входных столбца плавают рядом друг с другом. Но если ширина урезана немного, то правая боковая панель опускается ниже основного содержимого.
Вот мой HTML для области боковой панели:
Получатель: Персонал сайта Главный редактор Технический отдел Связи с общественностью Общая поддержка Этот код на самом деле не слишком запутанный. Просто простая опция выбора меню и несколько переключателей. Кроме того, после этих объектов я поместил кнопку сброса и отправки в конце раздела.
Все это выглядит хорошо, так что теперь давайте перейдем к некоторым свойствам CSS. Есть так много настроек, которые вы можете применять при работе с элементами формы. Старайтесь не увязать в своих мыслях и веселиться!
Анимированные Box Shadows При переходе по каждому из основных элементов ввода вы заметите, что я анимировал красочную внешнюю тень. Google Chrome имеет свойство структуры, которое делает что-то похожее, но не настолько экстравагантное. Эта небольшая часть интерфейса привлекает новых посетителей.
/ ** элементы формы ** / # hongkiat-form box-sizing: border-box; # hongkiat-form .txtinput display: block; семейство шрифтов: "Helvetica Neue", Arial, без засечек; стиль границы: твердый; ширина границы: 1px; Цвет границы: #dedede; нижнее поле: 20 пикселей; размер шрифта: 1,55em; отступы: 11px 25px; отступ слева: 55 пикселей; ширина: 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,15 с, линейные 0 с, прямоугольник с тенью 0,15 с, линейные 0 с, цвет 0,15 с, линейные 0 с; -webkit-transition: граница 0,15 с, линейные 0 с, box-shadow 0,15 с, линейные 0 с, цвет 0,15 с, линейные 0 с; -moz-переход: границы 0,15 с, линейные 0 с, box-shadow 0,15 с, линейные 0 с, цвет 0,15 с, линейные 0 с; -переход: граница 0,15 с, линейные 0 с, прямоугольник с тенью 0,15 с, линейные 0 с, цвет 0,15 с, линейные 0 с; # hongkiat-form .txtinput: focus color: # 333; цвет рамки: rgba (41, 92, 161, 0,4); тень от рамки: 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-form textarea display: block; семейство шрифтов: "Helvetica Neue", Arial, без засечек; стиль границы: твердый; ширина границы: 1px; Цвет границы: #dedede; нижнее поле: 15 пикселей; размер шрифта: 1,5em; отступы: 11px 25px; отступ слева: 55 пикселей; ширина: 90%; высота: 180 пикселей; цвет: # 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,15 с, линейные 0 с, прямоугольник с тенью 0,15 с, линейные 0 с, цвет 0,15 с, линейные 0 с; -webkit-transition: граница 0,15 с, линейные 0 с, box-shadow 0,15 с, линейные 0 с, цвет 0,15 с, линейные 0 с; -moz-переход: границы 0,15 с, линейные 0 с, box-shadow 0,15 с, линейные 0 с, цвет 0,15 с, линейные 0 с; -переход: граница 0,15 с, линейные 0 с, прямоугольник с тенью 0,15 с, линейные 0 с, цвет 0,15 с, линейные 0 с; # hongkiat-form textarea: focus color: # 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-form textarea.txtblock background: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px без повторов; Входы боковой панели Переключатели и кнопки выбора меню оформлены гораздо проще. Вы можете применить внешние эффекты свечения и подобные тени на этих элементах, но это не всегда выглядит хорошо. В качестве альтернативы дизайнеры будут создавать пользовательские интерфейсы и прикреплять их в качестве фоновых изображений. Но для этого может потребоваться обходной путь jQuery для правильного отображения параметров.
span.radiobadge display: block; нижнее поле: 8 пикселей; span.radiobadge label font-size: 1.2em; нижний слой: 4px; select.selmenu font-size: 17px; цвет: # 676767; отступы: 9px! важно; граница: 1px solid #aaa; ширина: 200 пикселей; Я не сделал много, чтобы оттолкнуть их от основных элементов ввода. Большое количество дополнительных отступов важно, чтобы ваши пользователи чувствовали себя комфортно, взаимодействуя с формой. Когда текст очень маленький, может быть трудно просто заполнить каждую часть. Держите свой шрифт большим, но не таким большим, чтобы он переполнял страницу.
Индивидуальные кнопки Кнопки сброса и отправки разработаны в своем собственном классе. Я построил набор светлых градиентов, чтобы они хорошо сочетались с синими бликами в наших полях формы..
Ниже мой код CSS для кнопки отправки в стандартном и наведенном состоянии.
#buttons #submitbtn display: block; плыть налево; высота: 3em; заполнение: 0 1em; граница: 1px solid; контур: 0; вес шрифта: полужирный; размер шрифта: 1,3em; цвет: #fff; тень текста: 0px 1px 0px # 222; пустое пространство: nowrap; перенос слов: нормально; выравнивание по вертикали: среднее; курсор: указатель; -moz-border-radius: 2px; -webkit-border-radius: 2px; радиус границы: 2 пикселя; цвет границы: # 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-linear-Gradient (вверху, 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-linear-Gradient (вверху, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); фоновое изображение: -o-линейный градиент (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); фоновое изображение: -ms-линейный градиент (вверху, 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%); фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); #buttons #submitbtn: hover, #buttons #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); тень от рамки: врезка 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0.5); справочная информация: RGB (228 237 189); фон: -moz-linear-Градиент (вверху, RGB (228,237,189) 2%, RGB (207,219,120) 3%, RGB (149,175,54) 100%); background: -webkit-Gradient (линейный, слева вверху, слева внизу, Color-Stop (2%, RGB (228 237 189)), Color-Stop (3%, RGB (207 219 120)), Color-Stop (100%, RGB ( 149,175,54))); фон: -webkit-linear-Градиент (вверху, RGB (228,237,189) 2%, RGB (207,219,120) 3%, RGB (149,175,54) 100%); фон: -o-линейный градиент (вверху, 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%); фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); Почти невозможно содержать этот тип селектора в чистоте! Просто слишком много свойств, которые нужно перечислить, и поддерживать многие старые унаследованные браузеры. Internet Explorer может даже визуализировать эти градиенты с помощью соответствующего фильтра. Обратите внимание, что помимо градиентов фона я также включил новый цвет рамки, закругленные углы и тень от рамки при наведении.
Кнопка сброса выглядит аналогично, но я пошел совершенно другим путем с цветовой схемой. Светло-серый имеет тенденцию падать на задний план по сравнению с ярко-зелеными цветами. Наша кнопка сброса, вероятно, не будет использоваться очень, поэтому она не требует всего внимания.
#buttons #resetbtn display: block; плыть налево; цвет: # 515151; тень текста: -1px 1px 0px #fff; поле справа: 20 пикселей; высота: 3em; заполнение: 0 1em; контур: 0; вес шрифта: полужирный; размер шрифта: 1,3em; пустое пространство: nowrap; перенос слов: нормально; выравнивание по вертикали: среднее; курсор: указатель; -moz-border-radius: 2px; -webkit-border-radius: 2px; радиус границы: 2 пикселя; цвет фона: #fff; background-image: -moz-linear-Gradient (сверху, RGB (255 255 255) 2%, RGB (240 240 240) 2%, RGB (222 222 222) 100%); background-image: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (2%, rgb (255,255,255)), остановка цвета (2%, rgb (240,240,240)), остановка цвета (100%, RGB (222222222))); background-image: -webkit-linear-Gradient (сверху, RGB (255 255 255) 2%, RGB (240 240 240) 2%, RGB (222 222 222) 100%); фоновое изображение: -o-линейный градиент (top, rgb (255,225,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: -ms-linear-градиент (вверху, rgb (255,225,255) 2%, rgb (240,22,240) 2%, rgb (222,222,222) 100%); фоновое изображение: линейный градиент (вверху, rgb (255 255 255) 2%, rgb (240 240 240) 2%, rgb (222 222 222) 100%); фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); граница: 1px solid # 969696; тень от коробки: 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); #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); цвет: # 818181; цвет фона: #fff; background-image: -moz-linear-Gradient (сверху, RGB (255 255 255) 2%, RGB (244 244 244) 2%, RGB (229 229 229) 100%); background-image: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (2%, rgb (255,255,255)), остановка цвета (2%, rgb (244,244,244)), остановка цвета (100%, RGB (229229229))); background-image: -webkit-linear-Gradient (сверху, RGB (255 255 255) 2%, RGB (244 244 244) 2%, RGB (229 229 229) 100%); background-image: -o-Линейный градиент (top, RGB ( 255,255,255) 2%, RGB (244 244 244) 2%, RGB (229 229 229) 100%); background-image: -ms-linear-Градиент (вверху, RGB (255 255 255) 2%, RGB (244 244 244) 2%, RGB (229 229 229) 100%); фоновое изображение: линейный градиент (вверху, rgb (255,255,255) 2%, rgb (244 244 244) 2%, rgb (229 229 229) 100%); фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); цвет границы: #aeaeae; тень от рамки: врезка 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0.5); Вы даже можете сбросить тип сброса и использовать эту бело-серую цветовую схему в качестве основной кнопки отправки. Я использовал многие из тех же стилей градиента и эффектов теней, а также текстовую тень для внутренней метки. Это определенно дает другое ощущение для пользовательского опыта.
Адаптивные изменения макета Переходя к моему другому файлу CSS, мы можем взглянуть на простые адаптивные медиа-запросы, которые я настроил. Любое окно браузера выше 800px будет иметь полный интерфейс боковой панели. Когда вы опускаетесь ниже этого порога, левый столбец расширяется до 100% ширины, и вы видите элементы боковой панели, опускающиеся ниже..
экран @media и (max-width: 800px) body padding: 10px 15px; #container width: 100%; # hongkiat-form #aligned width: 100%; плавать: нет; дисплей: блок; # hongkiat-form #aside width: 100%; дисплей: блок; плавать: нет; # hongkiat-form .txtinput, # hongkiat-form textarea width: 85%; #prioritycase float: left; дисплей: блок; #recipientcase float: left; дисплей: блок; Поля справа: 55 пикселей; По мере приближения к размеру я стараюсь адаптировать каждую из форм ввода. Свойство width может оказаться длиннее, чем сама веб-страница, и тогда у нас есть формы ввода, торчащие через край. Это происходит около 550px, где я разбиваю следующий запрос, а также разрешение экрана iPhone для портретной и альбомной ориентации..
/ * меньший спад экрана ******* / @media только экран и (max-width: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea width: 80%; / * iPhone Пейзаж ******** / экран @media only и (max-width: 480px) body padding: 10px 0px; select.selmenu width: 190px; / * iPhone портрет ******* / @media только экран и (максимальная ширина: 320px) body padding: 10px 0px; # hongkiat-form .txtinput, # hongkiat-form textarea ширина: 70%; # hongkiat-form #aligned overflow: hidden; select.selmenu width: 160px; #recipientcase margin-right: 30px; Горизонтальный ландшафтный режим все еще очень хорошо держит все вместе. Я только сделал выпадающее меню выбора немного тоньше, чтобы освободить место для переключателей. В портретном виде я изменил размеры всех элементов до гораздо меньшей ширины. Теперь наш код не сломается даже в измененных окнах браузера. Но приятно иметь поддержку и для смартфонов на iOS / Android.
демонстрация Скачать исходный код Заключение Я надеюсь, что этот урок был информативным и объяснил, как много можно сделать в ваших веб-формах. Новые свойства CSS3 достаточно мощные, чтобы создавать полнофункциональные анимации всего за несколько строк кода. Это действительно захватывающее время, чтобы работать в веб-разработке и следовать этим тенденциям.
Если у вас есть идеи или предложения по учебному коду, не стесняйтесь поделиться ими с нами через поле для комментариев ниже.
