Компоненты пользовательского интерфейса Styling с нуля: кнопки и формы

  1. Предпосылки
  2. CSS Reset
  3. Пограничная коробка
  4. Кнопки
  5. HTML
  6. CSS
  7. Sass Optimization
  8. HTML
  9. CSS
  10. Sass Optimization
  11. демос
  12. Заключение

Трудно стилизовать основные веб-компоненты, если вы никогда не делали этого раньше. Вы хотите, чтобы ваши кнопки и формы выглядели хорошо, а также были совместимы с разными браузерами. Самое простое решение - использовать такую ​​среду, как Bootstrap или Foundation, но это не поможет вам понять основы. На самом деле это не так сложно, как кажется, и в этой статье я покажу вам, как это сделать.

Чтобы облегчить себе жизнь, я собрал все это в свои собственные рамки, Примитивный (который также включает в себя Sass и Gulp), и я призываю вас сделать свой собственный, даже если только для учебных целей.

Предпосылки

цели

  • Кнопки стиля в виде элементов div, link (a), input и button.
  • Формы стилей, включая ввод HTML5, текстовую область и элементы выбора.

подготовка

Я ссылался на мой основы Эта статья включает в себя несколько вещей, которые мне нравятся во всех моих веб-проектах: сброс CSS и сброс границ. По сути, эти две вещи позволят вам иметь немного больше согласованности и контроля над макетом.

CSS Reset

Я связываюсь с CDN нормировать ,

<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />

Пограничная коробка

Я заставляю рамку на всех элементах, если в явном виде не указано иное.

html {box-sizing: border-box; } *, * :: before, * :: after {box-sizing: наследовать; }

И это все, что касается установки. Лично мне нравится ставить -webkit-font-smoothing: antialiased; на HTML-селектор, чтобы сделать текст более четким и приятным.

Кнопки

Сначала мы будем стилизовать кнопки. Вот наша цель:

Что именно кнопка? Это может быть одно из следующих:

  • <кнопка> - элемент кнопки
  • <input type = "button"> - элемент ввода, тип которого установлен либо на кнопку, либо на отправку, либо на сброс.
  • <a class="button"> - гиперссылка, выполненная в виде кнопки.

Если вам интересно, какие существуют варианты использования для каждого типа, гиперссылка будет идти на URL-адрес, отправка ввода будет частью формы, а <button> часто будет триггером JavaScript. Обычный div с классом .button просто для стиля без функциональности.

HTML

Вот HTML-код для них, рядом:

<div class = "button"> Div </ div> <a class = "button" href = "#!"> Ссылка </ a> <button> Button </ button> <input type = "button" value = " Ввод "/>

CSS

Вот селектор CSS для всех этих типов кнопок:

.button, a.button, button, [type = 'button'], [type = 'submit'] {}

Вот несколько примеров того, как это выглядит без стилей:

Я собираюсь установить все основные стили здесь.

{дисплей: встроенный блок; фон: # 1e6bd6; граница: 1px solid # 1e6bd6; белый цвет ; текстовое оформление: нет; вес шрифта: 600; размер шрифта: 0,95 мм; семейство шрифтов: без засечек; набивка: 0,5рем 1рем; }

Эти стили несколько самоуверенные, но их легко изменить. Я устанавливаю дисплей для встроенного блока для ссылок и регулярных делений. Я выбрал цвет фона и границы. Я удалил подчеркивание ссылок, сделал текст без засечек (Arial или Helvetica), выделил жирным шрифтом и добавил некоторые отступы.

Если вы используете Normalize, он должен быть относительно согласованным во всех браузерах. Вот как его отображает Chrome (я упустил круглые границы, чтобы было легче сравнивать):

Вот как его отображает Chrome (я упустил круглые границы, чтобы было легче сравнивать):

Safari может делать такие вещи, как добавление дополнительного поля для входных данных, а Firefox может располагать текст на разных базовых линиях или иметь различную высоту строк, вызывая такие небольшие проблемы:

Safari может делать такие вещи, как добавление дополнительного поля для входных данных, а Firefox может располагать текст на разных базовых линиях или иметь различную высоту строк, вызывая такие небольшие проблемы:

{вертикальное выравнивание: среднее; пустое пространство: nowrap; курсор: указатель; высота строки: 1; маржа: 0,25рем 0; }

Я устанавливаю базовая линия текста, который должен быть по центру, подавляя разрывы строк в пределах текста, гарантируя, что курсор всегда является указателем, и устанавливая поля и высоту строки. Это должно сделать большинство браузеров счастливыми. Если вы не используете Normalize, вам также нужно добавить это, чтобы сделать Firefox счастливым.

button :: - moz-focus-inner, [type = 'button'] :: - moz-focus-inner, [type = 'submit'] :: - moz-focus-inner {border: 0; отступы: 0; }

Теперь я просто добавлю свои круглые углы с помощью border-radius: 18px, и все готово.

Теперь я просто добавлю свои круглые углы с помощью border-radius: 18px, и все готово

Sass Optimization

Если вы используете Sass, вы можете поместить все селекторы кнопок в одну переменную.

$ buttons: ('button, .button, a.button, [type = submit], [type = button]');

И вызвать переменную так:

Что позволяет очень легко добавлять стили наведения и фокусировки.

# {$ buttons} {&: hover {}}

Вот пример формы, которую мы собираемся сделать.

Вот пример формы, которую мы собираемся сделать

Формы немного сложнее, чем кнопки, потому что есть больше элементов для рассмотрения.

  • <input type = ""> - большинство элементов формы являются типами ввода, от стандартных текстовых полей, переключателей, флажков и кнопок, до элементов HTML5, таких как число, URL, электронная почта и дата.
  • <выберите> - раскрывающийся список параметров.
  • <textarea> - большое поле для текста.
  • <label> - определяет элемент формы.

Есть больше элементов формы, таких как легенда и fieldset, но они используются не так часто, поэтому я собираюсь их опустить.

HTML

Вот основной HTML-код для внешнего интерфейса формы, в которой записаны ваше имя, адрес электронной почты, пол и сообщение.

<form> <label for = "name"> Name </ label> <input type = "text" id = "name" placeholder = "Name" /> <label for = "email"> Email </ label> <input type = "email" id = "email" placeholder = "Адрес электронной почты" /> <метка для = "пол"> Пол </ label> <выберите идентификатор = "пол"> <значение параметра = "мужской"> мужской </ option> <option value = "female"> Female </ option> </ select> <label for = "message"> Message </ label> <textarea id = "message" cols = "30" row = "10" placeholder = "Сообщение"> </ textarea> <input type = "submit" value = "Submit" /> </ form>

CSS

Я не хочу просто стилизовать селектор ввода, потому что тогда он будет применяться для отправки кнопок, флажков, радио и т. Д. Вместо этого я буду стилизовать их по типу.

Если бы я только хотел стилизовать текстовые поля, выделения и текстовые поля, я мог бы просто использовать этот селектор:

[type = 'text'], select, textarea {}

Если бы я хотел включить все элементы формы HTML5, это был бы мой селектор.

[type = 'color'], [type = 'date'], [type = 'datetime'], [type = 'datetime-local'], [type = 'email'], [type = 'month'], [type = 'number'], [type = 'password'], [type = 'search'], [type = 'tel'], [type = 'text'], [type = 'url'], [type = 'week'], [type = 'time'], select, textarea {}

Таким образом, вы можете выбрать, что вы хотите стилизовать. Я не использую их все, поэтому я не включаю их все.

Вот как выглядит неустановленная форма до и после нормализации.

Это довольно далеко от того, к чему мы стремимся, но это не займет много времени, чтобы все выглядело так, как мы хотим. Сначала я собираюсь поместить всю форму внутри класса .container, чтобы он не занимал весь экран, и я собираюсь добавить стили рамки и кнопок из предыдущего урока.

.container {max-width: 600px; поле: 0 авто; набивка: 0 1рем; }

Уже немного лучше. Давайте добавим несколько стилей.

{дисплей: блок; набивка: 0,5рем; фон: прозрачный; выравнивание по вертикали: среднее; ширина: 100%; максимальная ширина: 100%; граница: 1px solid #cdcdcd; радиус границы: 4 пикселя; размер шрифта: 0,95 мм; }

Во-первых, я делаю все элементы на уровне блоков, чтобы они занимали всю ширину контейнера. Я собираюсь дать им все отступы и удалить цвет фона по умолчанию. Как и с кнопками, текст будет выровнен по вертикали. Я устанавливаю ширину и максимальную ширину на 100%, чтобы убедиться, что она заполняет весь контейнер, но не превышает его. Наконец, я добавляю свои самоуверенные стили, которые состоят из тонкой серой рамки и закругленных углов. Большая часть личности формы придет от границы формы и цвета.

Теперь у нас есть немного больше структуры к форме, но выборка не играет вообще. В его текущем состоянии он контролируется браузером, и я даже не могу изменить форму границ. Вот что я сделаю, чтобы он соответствовал другим полям.

выберите {-webkit-внешний вид: нет; -возможность появления: нет; фон: URL (данные: изображения / PNG; base64, iVBORw0KGgoAAAANSUhEUgAAABIAAAAJCAYAAAA / 33wPAAAAvklEQVQoFY2QMQqEMBBFv7ERa / EMXkGw11K8QbDXzuN4BHv7QO6ifUgj7v4UAdlVM8Uwf + b9YZJISnlqrfEUZVlinucnBGKaJgghbiHOyLyFKIoCbdvecpyReYvo / Ma2bajrGtbaC58kCdZ1RZ7nl / 4 / 4d5EsO / 7nzl7IUtodBexMMagaRrs + 06JLMvcNWmaOv2W / С / TMAyD58dxROgSmvxFFMdxoOs6lliWBXEcuzokXRbRoJRyvqqqQvye + QDMDz1D6yuj9wAAAABJRU5ErkJggg ==) 100% не повторять; высота строки: 1; }

Я удалил по умолчанию внешний вид select из mozilla и webkit и добавил закодированное изображение png для стрелки. Вы также можете использовать реальное изображение стрелки, png или svg, которое вы создали, но таким образом мне не нужно ничего загружать. Это работает в современных Chrome, Firefox, Safari, Edge и Opera. Вот как это выглядит:

Internet Explorer 9, 10 и 11 отобразит это так: (вы можете перейти к Страница разработчика Microsoft создавать скриншоты IE, если вы на Mac.)

Я не думаю, что это слишком плохо для запасного варианта. Теперь все, что осталось, это стилизация надписей:

label {font-weight: 600; размер шрифта: 0,9 мм; дисплей: блок; поле: 0.5rem 0; }

5rem 0;  }

Sass Optimization

Как и с кнопками, вы можете поместить все свои типы ввода в переменную.

$ input-fields: ('[type = color], [type = date], [type = datetime], [type = datetime-local], [type = email], [type = month], [type = число] , [type = пароль], [type = search], [type = tel], [type = text], [type = url], [type = week], [type = time], select, textarea '); # {$ input-fields} {}

демос

Вот полный код для HTML и CSS для форм и кнопок.

Заключение

Надеюсь, теперь вы чувствуете себя уверенно, стилизуя формы и кнопки, не полагаясь на CSS-фреймворк. Как я уже упоминал в начале статьи, я применил все это для создания мой собственный маленький каркас , который действительно помог мне, когда я учился, и теперь я использую для всех моих собственных проектов. Если есть положительный ответ на это руководство, я мог бы также выполнить дополнительные компоненты, такие как навигация, аккордеоны, карты и т. Д.

Я пишу о JavaScript, программировании и дизайне интерфейса. Присоединяйтесь к более чем 6000 других разработчиков, чтобы не отставать от моего контента. Отписаться всякий раз, когда. Никогда не спам, реклама или партнерские ссылки.

Похожие

Курс языка HTML: несколько слов об инструментах
... CSS должны быть на первом месте. Абсолютным лидером является редактор TopStyle, разработанный Ником Брэдбери (автор HomeSite), который после ухода из корпорации Allaire основал собственные компании. Bradsoft , Подробное описание функции можно найти в статья Анджея Туроса в веб-мастере. Существует не только условно-бесплатная профессиональная версия этой программы, но и бесплатная
Создание и стилизация индикатора выполнения с помощью HTML5
HTML5 введен элемент индикатора выполнения, который позволяет нам отображать ход выполнения определенных задач, таких как загрузка или загрузка, в основном все, что выполняется В этой статье мы обсудим, как добавить этот элемент в документ, как стилизовать его с помощью CSS и анимировать индикатор выполнения. Давайте начнем. Рекомендуемое
CSS Layout | слои, абсолютное и относительное позиционирование и плавающие элементы
Путь // → → CSS LAYOUT Одним из основных преимуществ использования CSS является то, что вы больше не обязаны размещать свои сайты в таблицы , Возможности компоновки CSS дают вам полный контроль над позициями и размерами всех элементов страницы. Если вы пытались разместить страницу с таблицами, в прошлом вы, вероятно, были раздражены неспособностью вашего браузера отображать вашу страницу именно так, как вы этого хотели.
Просмотр уровня приоритета стиля CSS
Каскадная таблица стилей ( CSS ) , я думаю, самый простой из языков по сравнению с другими языками, связанными с сетью, поэтому неудивительно, что многие люди только начинают научиться создавать сайт будет в основном изучать этот язык и HTML первый.
4 шага, чтобы добавить видео на фоне страницы WordPress
... HTML5 или формату H.264 . Этот процесс является автоматическим, независимым от других, хотя вы можете управлять им. Все это позволяет создавать креативные сайты с использованием видео. Добавление видеоклипа в фоновый режим позволяет трансформировать веб-сайт и сделать его интересным для пользователей. В то же время, такое любопытство может быть легко реализовано на веб-сайте на базе WordPress - процесс состоит из 4 простых шагов. Итак, мы покажем на практике, как добавить
Использование исходных карт для отладки Sass в Chrome
... CSS может быть как хлопотной, так и длительной. пререкаться предоставляет флаг включить номера строк (--line-numbers), которые включают в себя комментарии (как показано ниже) в вашем CSS. / * строка 303, молекулы \ аккордеоны \ _accordions.scss * / Хотя это полезно, вам все равно придется вручную отследить ошибку в вашем CSS до исходного файла. И редактирование CSS в браузере
Подключение и настройка роутера
Каждая эффективная сеть должна состоять из маршрутизатора, способного удовлетворить требования сети. Структуры, в которых мы намереваемся разделить интернет-соединение (предлагаемое одним из польских провайдеров), требуют использования маршрутизатора, оснащенного модемом ADSL, потому что устройства, предлагаемые интернет-провайдерами, обычно не позволяют разделение канала. Только когда нам нужно расширить существующую локальную сеть, просто используйте обычный маршрутизатор без модема или
ДАТАРТ | Частота обновления ТВ: когда вы не знаете, во что верить!
Подавляющее большинство производителей сегодня представляют свои воображаемые, вымышленные номера со своими телевизорами вместо реальной частоты обновления. Где это правда, и почему производители указывают значения, которые не соответствуют параметрам оборудования панели?
Настройка прокси Squid на прокси через родительский прокси
Здесь мы собираемся взглянуть на настройку двух Squid прокси серверы для пересылки запросов из внутренней сети без подключения к Интернету в сеть DMZ, а затем, при необходимости, в Интернет. Конфигурация позволит нам выбирать, какие домены следует или не следует пересылать на следующий прокси-сервер, позволяя не перенаправлять запросы, предназначенные для доменов во внутренней сети, следующему прокси-серверу Squid, а другие запросы в сеть DMZ
Сохраняйте записи формы в Google Sheets
Тебе понадобится: меры 1. Подготовка ваших аккаунтов 2. Подключение ваших аккаунтов Готовим ваши аккаунты Чтобы подключить свою учетную запись Typeform к Zapier, вам понадобится активная учетная запись Typeform и активная форма. Для получения дополнительной информации о начале работы с Typeform, перейдите Вот , Чтобы узнать больше о начале работы с Typeform на Zapier, начните
Обзор LG Optimus L7 II (видео)
LG Optimus L7 II (P710) является прямым преемником предыдущего года

Комментарии

Введите имя страницы и URL-адрес формы контакта (т.е. «Страница контакта» и «/ контакт»), затем в разделе «Требуется?
Введите имя страницы и URL-адрес формы контакта (т.е. «Страница контакта» и «/ контакт»), затем в разделе «Требуется?» Переключите тумблер на «Да». Нажмите «Сохранить» и все готово! Примечание. В Google Analytics в качестве целей можно выбрать все виды вещей. Например, посетитель провел пять минут на сайте или посетитель посетил три страницы. Я рекомендую против создания таких целей, если у вас нет веских причин для этого. Если вы создадите
Какими функциями должен обладать хороший редактор HTML?
Какими функциями должен обладать хороший редактор HTML? Повседневная практика показывает, что, прежде всего, должно быть множество сочетаний клавиш. Он богато оснащен такими программами, как HomeSite, Pajczek или Tiger98. Это ценная особенность, когда в редакторе мы работаем в основном в «текстовом» режиме (по аналогии с блокнотом-блокнотом в Windows) и гораздо удобнее использовать ярлыки и постоянно работать с мышью. Tiger98, Pajczek и HomeSite даже включают возможность переопределять
Что такое препроцессор CSS?
Что такое препроцессор CSS? Препроцессоры CSS не заменяют CSS. Фактически, препроцессоры просто предоставляют нам дополнительную функциональность, такую ​​как переменные, миксины, операции и функции, с помощью которых мы можем упростить процесс создания и управления файлами CSS. Препроцессоры позволяют нам определять свойства один раз, а затем повторно использовать их в нашем проекте гораздо более динамично, чем простой CSS. Что МЕНЬШЕ? LESS - относительно

Где это правда, и почему производители указывают значения, которые не соответствуют параметрам оборудования панели?
Введите имя страницы и URL-адрес формы контакта (т.е. «Страница контакта» и «/ контакт»), затем в разделе «Требуется?
Какими функциями должен обладать хороший редактор HTML?
Что такое препроцессор CSS?
Что МЕНЬШЕ?