Стили HTML форм
В этой статье Вы узнает, как использовать CSS с HTML-формами, чтобы сделать их (надеюсь) более красивыми. Удивительно, но это может быть немного сложнее. По историческим и техническим причинам виджеты форм плохо сочетаются с CSS. Из-за этих трудностей многие разработчики предпочитают создавать свои собственные HTML-виджеты, чтобы получить контроль над своим внешним видом. Однако в современных браузерах веб-дизайнеры все больше контролируют дизайн элементов формы. Давайте приступим!
Почему так сложно стилизовать виджеты форм с помощью CSS?
На заре Интернета, примерно в 1995 году, в HTML 2 были добавлены элементы управления формой. Из-за сложности виджетов форм разработчики решили полагаться на базовую операционную систему для управления ими и их рендеринга.
Несколько лет спустя был создан CSS, и то, что было технической необходимостью, то есть использование собственных виджетов для реализации элементов управления формой, стало требованием к стилю. В первые дни CSS, стилизация элементов управления формы не была приоритетом.
Поскольку пользователи привыкли к внешнему виду своих соответствующих платформ, поставщики браузеров неохотно делают элементы управления формами стилевыми; и по сей день все ещё чрезвычайно трудно перестроить все элементы управления, чтобы сделать их стилизованными.
Даже сегодня ни один браузер полностью не реализует CSS 2.1. Однако со временем поставщики браузеров улучшили свою поддержку CSS для элементов формы, и, несмотря на плохую репутацию в отношении удобства использования, теперь вы можете использовать CSS для стилизации HTML форм.
Не все виджеты созданы равными, когда задействован CSS
В настоящее время некоторые трудности остаются при использовании CSS с формами. Эти проблемы можно разделить на три категории:
Хорошая
Некоторые элементы могут быть стилизованы с небольшим количеством проблем на разных платформах. К ним относятся следующие структурные элементы:
Стилизация формы
Стилизация означает декоративное обобщение и подчеркивание особенностей формы предметов с помощью ряда условных приемов. Можно упростить или усложнить форму, цвет, детали объекта, а также отказаться от передачи объема.
60. Принципы стилизации: а – превращение объемной формы в плоскостную и упрощение конструкции, б – обобщение формы с изменением абриса, в – обобщение формы в ее границах, г – обобщение и усложнение формы, добавление деталей, отсутствующих в натуре
Однако упростить форму вовсе не значит обеднить ее, упростить – лишь подчеркнуть выразительные стороны, опустив малозначащие детали.
В основе любого художественного произведения лежит органическая связь между его составными элементами. Принципы стилизации имеют свои особенности в народном и декоративно-прикладном искусстве, в живописи и графике.
Народные орнаменты создаются, как правило, на основе стилизации реальных природных форм. Беря основное, мастер преобразует предмет, подчиняя его форму и цвет ритмическому строю орнамента. Народный мастер творит на основе эмо- ционально-ассоциативного восприятия (ил. 61-62).
61. Конец полотенца. Браное узорное ткачество. XIX в.
62. Орнамент цветного коклюшечного кружева конца XVIII-XIX вв.
63. Элементы построения орнамента: а – крито-микенский орнамент, б – орнамент эпохи модерн, в – листья и цветы орнамента северодвинской росписи
Общее стилевое решение орнамента, его линейная и цветовая композиции подскажут творческое переосмысление натуры. Мотив для орнамента можно найти, изучая формы и раскраску насекомых, ящериц, минералов, морских раковин и др.
64. Объекты природы
65. Обобщение формы живописными средствами: а – реалистическое изображение, б – декоративное изображение, в – абстрактное изображение
Чтобы не допускать слепого копирования натуры, полезно поработать на основе сохранившихся у вас впечатлений или ассоциаций. Самостоятельное восприятие, его изучение помогут сложиться определенному отношению к натуре, которое создает основу для фантазии.
В станковом (живопись, графика) и декоративном искусстве процесс обобщения формы имеет много общего. Художник, сохраняя ее пластическую выразительность, выделяет главное и типичное, отказываясь от второстепенных деталей. Все наблюдаемые в реальной форме оттенки, как правило, приводятся к нескольким цветам. Возможен и полный отказ от реального цвета. Поиски образа подсказывают то или иное решение.
Художник может изменять предмет в любой степени, отход от натуры бывает очень значительным. Цветок, лист, ветку можно трактовать почти как геометрические формы или сохранить природные плавные очертания. Например, преобразовать живописными средствами реальный образ цветка в декоративный и даже абстрактный можно так, как на ил. 65.
Рассмотрите пример стилизации формы птицы в графике и определите, с помощью каких средств реальное изображение превращается в декоративное (ил. 66-70).
66-70. Стилизация формы графическими средствами
Иногда в характеристике предмета деталь может играть ведущую роль. Сознательно акцентируя внимание на детали, как бы преувеличивая ее значение, можно «заострить» образ. Форма тела, клюва, оперение птицы и другие детали влияют на выразительность изображения и характер целого.
В каждом из вариантов использованы разные качества натуры и способы штриховки. Степень обобщенности формы и выбор средств художественной выразительности определяются поставленной задачей, задуманным образом.
Одним из примеров стилизации может быть процесс создания знаковых изображений в графическом дизайне. Отличительные особенности знака – обобщенность и условность в изображении предметных форм, обозначающих какую-либо фигуру или явление окружающего мира.
Знак коренным образом отличается от конкретно-предметного изображения, он только указывает или обозначает внешние признаки какого-нибудь объекта.
Знак можно назвать абстрактным символом.
71. Варианты изображения герба г. Смоленска
72. Знаковые изображения морского конька, коровы, крокодила и летучей мыши (из книги В. И. Волошко)
73. Пограничные состояния знака. Переход в другую форму (из книги В. И. Волошко)
Изображение фигуры морского конька доведено до такой степени обобщения, что последний знак при отсутствии элемента, изображающего глаз, вызывает иные ассоциации.
Кроме изображения внешнего вида, знаком можно выразить и другие особенности изображаемого существа. Например, можно нарисовать мычащую или смотрящую корову, агрессивного крокодила, передать то, что летучая мышь обладает локационными свойствами.
Нередко в двух или нескольких знаках заложен один и тот же изобразительный элемент, но они несут различный смысл.
Например, в знаках улитки и музыкального духового инструмента заложен такой изобразительный элемент, как спираль, и только специфические элементы формы наполняют каждый знак своим смыслом. Существуют пограничные состояния, когда знак либо не напоминает ничего, либо ассоциируется с другим предметом. Форма одного объекта может переходить в форму другого за счет добавления или исключения какого- нибудь изобразительного элемента.
Обобщенное изображение, напоминающее знак, получается в результате складывания бумаги в искусстве оригами.
Сравнение знакового и реалистического изображений развивает абстрактное мышление.
Читайте также
2. ФОРМЫ ЖИЗНИ АВТОРСКОЙ ПЕСНИ
2. ФОРМЫ ЖИЗНИ АВТОРСКОЙ ПЕСНИ Клубы авторской песни Клубы авторской песни (первоначально называвшиеся клубами самодеятельной песни — КСП) стали первой естественной формой жизни движения авторской песни, выросшей из постоянных встреч авторов, исполнителей и любителей
Глава 1 Зрительное восприятие формы и пространства
Глава 1 Зрительное восприятие формы и пространства Компьютер позволяет быстро трансформировать геометрию объекта, подобрать цвет, выполнить сложные графические построения, имитировать различные визуальные эффекты, анимировать изображение. К сожалению, кажущаяся
Стилизация и упрощение форм, классические каноны
Стилизация и упрощение форм, классические каноны Самыми важными приемами иллюстратора являются стилизация и упрощение. Существует множество вариантов изображения любых объектов, от реалистичного до схематичного. Пытаясь свести очертания людей, животных и предметов к
Изображение объемной и контурной формы фигур и предметов
Изображение объемной и контурной формы фигур и предметов Изображение объемной формы фигур и предметов на плоскости снимка также связано с законами линейной и тональной перспективы и подчинено этим законам, поскольку перспективное изображение того или иного предмета
§2 Восприятие формы. Многообразие форм
§2 Восприятие формы. Многообразие форм Все, что нас окружает, поражает разнообразием форм: величественные очертания гор, громады многоэтажных зданий, обтекаемые формы самолетов и автомобилей, изящные очертания цветов, бабочек, птиц, пластика человеческого тела и
§4 Элементы формообразования. Простые и сложные формы
§4 Элементы формообразования. Простые и сложные формы Предметы простой формы в своей основе имеют одну геометрическую фигуру, а предметы сложной формы – несколько геометрических фигур.Более сложные объекты обычно называют комбинированными, имея в виду, что данный
4. Граф.дизайн. Стилизация предметов.
Цель сегодняшнего занятия: Изучить методы стилизации и применить знания на практике, выполнив два упражнения.
Стилизация
Психологическая работа над созданием обобщенного декоративного образа представляет собой процесс отвлечения от ряда частных подробностей. Как известно, обилие деталей в предмете мешает целостному его восприятию. Точно так же обилие частностей в одних образах затрудняет создание новых, более оригинальных образов. Значит, нужно стремиться к выделению самых общих признаков из частных образов и объединению их в новом образе. По такому пути должно идти декоративное рисование.
Далее переход от зарисовки к условной форме.Это второй этап — перевоплощения, трансформации, стилизации мотива. Из одной зарисовки можно извлечь различные орнаментальные решения.
Художник может изменять предмет в любой степени, отход от натуры бывает очень значительным. Цветок, лист, ветку можно трактовать почти как геометрические формы или сохранить природные плавные очертания. Например, преобразовать живописными средствами реальный образ цветка в декоративный и даже абстрактный можно так
Обобщение формы живописными средствами: а)реалистическое изображение, б)декоративное изображение,в)абстрактное изображение
Степень обобщенности формы и выбор средств художественной выразительности определяются поставленной задачей, задуманным образом.
Одним из примеров стилизации может быть процесс создания знаковых изображений в графическом дизайне. Отличительные особенности знака — обобщенность и условность в изображении предметных форм, обозначающих какую-либо фигуру или явление окружающего мира.
Знак коренным образом отличается от конкретно-предметного изображения, он только указывает или обозначает внешние признаки какого-нибудь объекта. Знак можно назвать абстрактным символом.
В декоративном искусстве стилизация – метод ритмической организации целого, благодаря которому изображение приобретает признаки повышенной декоративности и воспринимается своеобразным мотивом узора (тогда мы говорим о декоративной стилизации в композиции).
а) внешняя поверхностная, не имеющая индивидуального характера, а предполагающая наличие готового образца
для подражания или элементов уже созданного стиля (например, декоративное панно, выполненное с использованием приемов хохломской росписи);
б) декоративная, в которой все элементы произведения подчинены условиям уже имеющегося художественного ансамбля (например, декоративное панно, подчиненное среде интерьера, сложившегося ранее).
Под декоративностью принято понимать художественное качество произведения, которое возникает в результате осмысления автором связи его произведения с предметно-пространственной средой, для которой оно предназначено. В этом случае отдельное произведение задумывается и осуществляется как элемент более широкого композиционного целого.
Можно сказать, что стиль – это художественное переживание времени, а декоративная стилизация – художественное переживание пространства.
Для декоративной стилизации характерно абстрагирование – мысленное отвлечение от несущественных, случайных с точки зрения художника признаков с целью заострения внимания на более значимых, отражающих суть объекта деталях.
При декоративной стилизации изображаемого объекта необходимо стремиться, чтобы композиция (панно) отвечала принципу архитектоничности, т.е. нужно выстраивать систему связей отдельных частей и элементов в единую целостность произведения.
Роль стилизации как художественного метода в последнее время возросла, так как увеличилась потребность людей в создании стилистически цельной, эстетически значимой окружающей среды.
С развитием дизайна в области интерьера возникла необходимость создания произведений декоративно-прикладного искусства, которые без стилизации не будут отвечать современным эстетическим требованиям.
Упражнение №1.
Стилизация простого растения (лист, дерево) на формате А4 4-5 разными способами, используя черную ручку.
Этапы выполнения задания:
Стилизация объекта
Использование стилизованных природных образов имеет широкое распространение не только в декоративно-прикладном искусстве, но и в других областях, например, в разработке фирменного стиля. При создании логотипа используются запоминающиеся стилизованные образы природных форм.
Художники выполняют стилизацию рисунка традиционно – «от руки».
Дизайнеры используют различные компьютерные редакторы, преобразующие изображения с помощью инструментов трансформации, которые позволяют делать любой масштаб, вращать, зеркально отражать и искажать рисунок.
В дизайне и декоративноприкладном искусстве под стилизацией принято понимать процесс декоративного обобщения изображения на основе изменения формы, графической проработки, модификации цвета и объема.
В зависимости от степени изменения первоначальной формы стилизация подразделяется на три вида:
– внешняя поверхностная стилизация предполагает незначительные изменения и упрощения готового образца;
– декоративная стилизация подразумевает упрощение или трансформацию формы с сознательным отказом от несущественных элементов объекта изображения и его подробной деталировки;
Для проработки объекта стилизации необходимо его изучить и выявить характерные особенности. Процесс стилизации должен осуществляться не только на основе внешне воспринимаемого признака, но и по внутреннему свойству, который может даже не наблюдаться визуально. Основной целью стилизации считается достижение выразительности с частичным или полным отказом от достоверности изображения.
Первый прием стилизации – упрощение цветовых отношений. Все наблюдаемые в реальной форме оттенки, как правило, сводятся к нескольким цветам. Возможен и полный отказ от реального цвета, упрощение тональных и цветовых отношений и др.
Следующий прием стилизации – это ритмическая организация целого, которая подразумевает приведение формы или конструкции изображаемого предмета к определенной геометрической, орнаментальной или пластической конфигурации. В символических изображениях линии и пятна могут переходить в более сложные комбинации [1].
Использование одного и того же образа позволяет художнику прибегать к различным приемам и средствам стилизации, прорабатывая множество различных образов, тем самым позволяя воплощать свой творческий потенциал.
Стилизуем формы при помощи CSS: руководство для начинающих
Хочешь знать больше про веб?
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Перевод статьи «How to style forms with CSS: A beginner’s guide».
Приложения получают данные от пользователей, в основном, через формы. Возьмем для примера обычную форму регистрации. Там всегда будет несколько полей, куда пользователь может ввести нужную информацию (свое имя, email и т. д.).
Раньше на сайтах были простые, скучные HTML-формы без всякой стилизации. Но с появлением CSS все изменилось. Благодаря новейшим свойствам CSS мы сейчас можем создавать куда более интересные и красивые формы.
И это не мое личное мнение. На иллюстрации ниже вы видите, как выглядит обычная HTML-форма без CSS.
А вот та же форма, в оформлении которой использовали каскадные таблицы стилей.
В этом руководстве мы покажем вам, как воспроизвести такую форму, а также расскажем о нескольких модификациях, благодаря которым вы сможете создавать впечатляющие и дружественные к пользователю формы.
Наше руководство по стилизации форм при помощи CSS будет состоять из шести пунктов.
Прежде чем мы углубимся в нашу тему, важно понять, что нет никаких особенных стилей для форм. Ваши возможности в этом плане ограничены только вашим воображением. Это руководство лишь поможет вам начать создавать собственные уникальные варианты дизайна при помощи CSS.
1. Устанавливаем box-sizing
Я обычно устанавливаю *
Ниже приведена улучшенная версия нашего первоначального кода. В нее также добавлены псевдоэлементы :before и :after.
Совет: универсальный селектор * выбирает все элементы в документе.
2. Селекторы CSS для элементов ввода
Самый простой способ выбрать элементы ввода — использовать селекторы атрибутов.
Эти селекторы будут выбирать все элементы ввода в документе. Если вам нужно выбрать какие-то специфические селекторы, следует добавить классы:
3. Базовые методы стилизации для однострочных текстовых полей ввода
Чаще всего поля ввода в формах бывают однострочными. Обычно такое поле представляет собой простой блок с границей (его вид зависит от браузера).
Вот HTML-разметка для однострочного текстового поля с плейсхолдером.
Выглядеть это будет так:
Чтобы сделать это текстовое поле более привлекательным, можно использовать следующие свойства CSS:
Давайте пройдемся по каждому из этих свойств.
Padding
Добавление некоторого внутреннего пространства может повысить четкость. Чтобы это сделать, применяем свойство padding.
Margin
Если рядом с вашим полем ввода есть другие элементы, вы можете захотеть добавить внешний отступ, чтобы избежать слипания элементов.
Border
В большинстве браузеров текстовые поля ввода имеют границы, которые вы можете кастомизировать.
Совет: если убираете границу, обязательно добавьте цвет фона или тень. В противном случае пользователь просто не увидит ваше поле.
Некоторые веб-дизайнеры предпочитают оставлять только нижнюю границу. При таком варианте пользователь как бы будет писать на строчке, как в блокноте.
Box shadow
Свойство CSS box-shadow позволяет добавить тень элемента. Меняя 5 значений этого свойства, вы сможете добиться самых разнообразных эффектов.
Border radius
Свойство border-radius может очень сильно изменить вид ваших форм. Поля для ввода текста, имеющие скругление углов, выглядят совсем иначе.
Комбинируя box-shadow и border-radius, вы можете существенно изменить вид полей.
Width
Используйте свойство width, чтобы установить ширину поля ввода.
Большинство браузеров используют разные семейства шрифтов и размер шрифта для элементов форм. Если необходимо, можно установить наследование шрифта от документа.
4. Стилизация прочих типов полей ввода
Вы также можете прописывать стили и для других полей — области текста, радиокнопок, чек-боксов и пр.
Давайте рассмотрим подробнее каждое из них.
Текстовые области (text areas)
Текстовые области напоминают однострочные текстовые поля ввода, с той лишь разницей, что здесь пользователь может ввести не одну строку текста. Обычно они используются, если нужно принимать более «многословные» данные: комментарии, сообщения и т. п. Для стилизации этих областей вы можете использовать все свойства, о которых мы говорили ранее.
Также для текстовых областей применимо и очень полезно свойство resize. В большинстве браузеров текстовые области по умолчанию могут растягиваться как по оси x, так и по оси y (значение: both). Но вы можете установить для этого свойства также значение horizontal или vertical.
Посмотрите на пример:
Здесь я использовал resize:vertical, чтобы разрешить изменение размера исключительно по вертикали. Такая практика применяется в большинстве форм, поскольку позволяет избежать появления горизонтальной полосы прокрутки.
Примечание: если вам нужно создать текстовую область с автоматическим изменением размера, следует использовать JavaScript. Но в нашей статье мы не будем углубляться в эту тему.
Чекбоксы и радиокнопки
Дефолтные чекбоксы и радиокнопки очень сложно стилизовать, для этого требуется более сложный CSS-код (и HTML — тоже).
Для стилизации чекбокса используйте следующий HTML-код.
Несколько вещей, на которые нужно обратить внимание:
Вот пользовательский чекбокс (комментарии в CSS-коде поясняют происходящее более подробно):
See the Pen yLNKQBo by Supun Kavinda (@SupunKavinda) on CodePen.
Вот пользовательская радиокнопка:
See the Pen eYNMQNM by Supun Kavinda (@SupunKavinda) on CodePen.
В обоих примерах мы использовали одну и ту же концепцию (input:checked).
В браузерах чекбоксы отображаются квадратиками, а радиокнопки — кружочками. Это лучше не менять, чтобы не путать пользователя.
Раскрывающийся список
Раскрывающийся список позволяет пользователю выбрать элемент из нескольких предложенных вариантов.
Но вы не можете стилизовать выпадающие элементы, потому что их стили зависят от операционной системы. Единственный способ изменить их вид — использовать JavaScript.
Кнопки
Как и у большинства элементов, у кнопок есть стили, установленные по умолчанию.
Давайте немного украсим нашу кнопку.
5. Псевдоклассы UI
Ниже приведен список псевдоклассов, которые широко используются с элементами форм.
Эти псевдоклассы могут использоваться для показа уведомлений в зависимости от атрибутов элемента:
Эти могут использоваться для создания эффектов для каждого состояния:
Сообщения, генерируемые при помощи :required
Показываем сообщение о том, что заполнение поля является обязательным:
Если вы удалите атрибут required при помощи JavaScript, сообщение «Required» исчезнет автоматически.
Мы можем сделать то же самое с псевдоклассами :valid и :invalid.
:hover и :focus
:hover выбирает элемент, когда на него наводится курсор мыши. :focus выбирает элемент, когда тот в фокусе.
Эти псевдоклассы часто используются для создания переходов и легких визуальных изменений. Например, можно менять ширину, цвет фона, цвет границы, густоту тени и т. п. Если вместе с этими свойствами использовать свойство transition, изменения будут более плавными.
Вот несколько эффектов наведения для элементов формы (попробуйте навести курсор на разные поля):
See the Pen yLNKZqg by Supun Kavinda (@SupunKavinda) on CodePen.
Когда пользователь видит небольшие изменения в элементе, происходящие при наведении мыши, он понимает, что с элементом можно что-то делать. Это важно для дизайна элементов форм.
Вы замечали, что в некоторых браузерах вокруг элемента, находящегося в фокусе, появляется синяя внешняя граница? Вы можете использовать псевдокласс :focus, чтобы удалить ее и добавить другие эффекты для элемента в фокусе.
Следующий код удаляет внешнюю границу для всех элементов:
Добавляем внешнюю границу для элементов в фокусе:
6. Элементы ввода, недоступные для кастомизации
Стилизация элементов форм всегда была сложной задачей. Есть некоторые элементы, с которыми не многое можно сделать в плане изменения стиля. Например:
Эти элементы предоставляются браузером и стилизуются в зависимости от вашей ОС. Единственный способ изменить их стиль — использовать кастомные контролы (Custom Controls), созданные при помощи div, span и прочих HTML-элементов, поддающихся стилизации.
Кастомные контролы для элементов форм уже разработаны для основных JavaScript-библиотек. Найти их можно на GitHub.
Заключение
К этому моменту у вас уже должно появиться понимание того, как стилизуются простые элементы форм и как использовать кастомные контролы для стилизации остальных элементов. Конечно, это лишь основные строительные блоки, при помощи которых вы можете создавать стили, рисуемые вашим воображением.
В качестве совета напоследок: не забывайте делать все ваши формы отзывчивыми.
