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

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

Трудно стилизовать основные веб-компоненты, если вы никогда не делали этого раньше. Вы хотите, чтобы ваши кнопки и формы выглядели хорошо, а также были совместимы с разными браузерами. Самое простое решение - использовать такую ​​среду, как 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 других разработчиков, чтобы не отставать от моего контента. Отписаться всякий раз, когда. Никогда не спам, реклама или партнерские ссылки.