Как изменить цвет кнопки в css
Перейти к содержимому

Как изменить цвет кнопки в css

  • автор:

Как изменить цвет кнопки в форме?

Оформление кнопки зависит от параметров операционной системы и выбранного браузера. Поэтому одна и та же кнопка может различаться по своему виду в браузере Internet Explorer и Opera. Применение стилевого свойства background не только изменяет цвет фона у кнопки, но также меняет и ее вид, делая кнопку одинаковой в разных браузерах (пример 1).

Пример 1. Цвет кнопки

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Вид обычной и цветной кнопки в браузере Safari

Рис. 1. Вид обычной и цветной кнопки в браузере Safari

В данном примере стиль кнопки определяется с помощью пользовательского класса b1 , который задается в теге с помощью атрибута class .

Изменение вида кнопки обусловлено применением свойства background или background-color . Смена цвета текста или шрифта на кнопке оставляет исходным вид кнопки, в частности, ее форму и цвет фона.

Рассказываю как можно задавать цвет в css: шрифта, фона, кнопок, событий и т.д

Доброго времени суток всем, кто изучает каскадные таблицы стилей. Текущая статья поможет разобраться с тем, как задается цвет в css, а также как его можно изменить для шрифта, фона, кнопок и других элементов веб-страницы. Помимо этого, я охарактеризую бесплатные удобные сервисы с перечнем большинства существующих цветов, их кодов и названий, и бесплатную программу для определения конкретных оттенков на сайтах.

В добавок к этому в публикацию я включу описание инструментов и свойств для установки цветовой палитры и конечно же приведу программный код примеров. Ну а теперь давайте перейдем к основной части статьи!

Определение конкретного цвета в CSS

Так как css – это каскадные стилевые таблицы, которые при помощи предусмотренных команд, называемых свойствами, описывают дизайн веб-страниц, то понятное дело, что вся работа с установкой внешнего вида элементов лежит на них. Определение палитры также сюда входит.

Поэтому разработчиками было предусмотрено несколько способов указания цветовых характеристик объектов, среди которых распространенными считаются варианты описания:

  • При помощи шестнадцатеричной системы;
  • Форматом RGB или RGBA (в этом случае можно указать прозрачность);
  • Прописав название цвета на латинице.

Для тех, кто не знает, в шестнадцатеричной системе используются цифры от 0 до 9, а после цифры от 10 до 15 заменяются на латинские буквы A- F соответственно. Таким образом, если вам нужно поменять число, к примеру, 26 с десятичной системы, т.е. с той, которой мы привыкли пользоваться, в шестнадцатеричную, то стоит число 26 поделить на 16, а результаты деления с каждого этапа, начиная справа и двигаясь влево, записать слитно.

Получается 26/16 = 1 и остаток 10. В итоге, выйдет 1А.

Каждый цвет задается шестью (предпочтительней) или тремя символами описанной системы. В первом случае два символа, а во втором один отвечают за определенный канал цветовой модели RGB (R – красный, G – зеленый и B – синий). При этом, чем меньше значения, тем темнее цвет. Следовательно, код #FF7F50 описывает коралловый оттенок, а #00008B – темно-синий.

Что касается записи rgb, то здесь вместо 16-ричного значения указывается значение в диапазоне [0-255] для каждого канала: красного, зеленого и синего.

Например, rgb (0, 0, 128) определит синий цвет.

Я также выше оговорился об rgba. Параметр «A» отвечает за альфа-канал, что задает прозрачность в интервале от нуля до единицы ([0-1]), где 0 – полностью прозрачный, а 1 – полностью видимый.

В этом случае для определения полупрозрачного синего цвета стоит прописать rgba (0, 0, 128, 0.5).

Что касается наименования цвета, то вместо последних описанных значений можно просто вставить «navy».

Ниже я прикрепил таблицу с полным описанием небольшой палитры.

Цвет Наименование 16-ричный код RGB
white #ffffff or #fff rgb (255, 255, 255)
black #000000 or #000 rgb (0, 0, 0)
Red #ff0000 rgb (255, 0, 0)
Yellow #ffff00 rgb (255, 255, 0)
Blue #0000ff rgb (0, 0, 255)
Aqua #00ffff rgb (0, 255, 255)
LawnGreen #7CFC00 rgb (124, 252, 0)
Brown #A52A2A rgb (165, 42. 42)
Orchid2 #EE7AE9 rgb (238, 122, 233)
GoustWhite #F8F8FF rgb (248, 248, 255)
Moccasin #FFE4B5 rgb (255, 228, 181)

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

Если же вам необходима более полная палитра, то загляните на мой любимый сайт, перейдя по ссылке http://www.stm.dp.ua/web-design/color-html.php. Там можно найти картинку практически любого оттенка и все вышеперечисленные в таблице характеристики.

Дополнительные средства для определения цветов

Иногда возникают ситуации, когда просто необходимо узнать определенный оттенок на выбранном изображении. Для этого в наше время используют специальные программы, которые вытаскивают из цветового пикселя его характеристики. В интернете можно найти множество различных приложений.

ColorMania

Однако, среди таких программных продуктов я хочу посоветовать вам ColorMania. Это удобный механизм для работы художников, дизайнеров и других специалистов в схожих областях. Программа поддерживает несколько цветовых моделей: RGB, HLS, CMYK и другие. При помощи пипетки и лупы можно вытащить из картинки точный образец цвета и определить его характеристики.

Примерчики! Наконец-то примерчики!

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

Изменение стандартного текста

В html-коде можно выделить некий фрагмент контента с помощью увеличения шрифта и изменением цвета символов. Для этого в описании стилей выбранного тега задают свойство color. На всякий случай напоминаю, чтобы поменять размер шрифта, толщину или его начертание, стоит использовать свойства класса font.

Контент

Внимание! Внимание!

Сегодня во Дворце Студентов, который расположен по адресу: ул. ****, 19, в 17:00 будет проведено голосование за принятие новых реформ в Университете ****! Голосовать за или против могут только студенты данного университета. При себе иметь студенческий билет.

Оживим веб-страницу

Владельцы сайтов очень редко решают оставить фон своего сервиса белым. Для привлекательности в дизайне всегда предусмотрено фоновое изображение или однотонная заливка. Этого можно достичь, использовав свойство background, background- color или для картинок background- image.

Я решил добавить красок в предыдущий пример и прописал дополнительные стилевые правила:

В класс attention я также добавил еще одно свойство:

Еще одно нововведение

Чтобы пользователи смогли ознакомиться с «новыми реформами» я решил внедрить ссылку, выделенную другим цветом и тенью. Для этого основной текст измените на:

Сегодня во Дворце Студентов, который расположен по адресу: ул. ****, 19, в 17:00 будет проведено голосование за принятие новых реформ в Университете ****! Голосовать за или против могут только студенты данного университета. При себе иметь студенческий билет.

А в css добавьте:

Такой элемент сразу бросается в глаза, будто наведен маркером.

Переместите на ссылку курсор мышки и проанализируйте изменения текста при наведении.

И последний штрих!

Ну вот мы и дошли к обещанной кнопке. Мой button будет использоваться для совершения репостов. В html-документе перед блоком «footer» добавьте код:

Вот теперь мы подошли к логическому завершению публикации. Буду рад, если вы вступите в подписчики блога и расскажете о нем своим друзьям. До новых встреч. Пока-пока!

С уважением, Роман Чуешов

Как вот для меня это сложно пока — css , хотя если начинаю вчитываться — многое становится понятно. Но, видимо, нужно сразу же искать практическое применение этим знаниям, тогда будет более результативно.

Как изменить цвет кнопки CSS при нажатии

У меня есть следующие кнопки, которые меняются при наведении на них курсора.

Как установить цвет фона при выборе одной из кнопок, не теряя выбора при нажатии в другом месте экрана?

В текущем случае нажатие кнопки делает его выбранным цветом, но нажатие на другое поле экрана возвращает исходный цвет.

3 ответа

У меня есть приложение с кнопкой и панелью инструментов. Я хочу изменить цвет панели инструментов при нажатии кнопки. Я не хочу запускать какие-либо другие действия, я просто хочу, чтобы при нажатии пользователем кнопки цвет моей панели инструментов менялся.

https:/ / www.w3schools.com/code/tryit.asp? filename=FG1ZE0NJ4ZX7 Итак, я сделал хлебную крошку прогресса, но я хочу, чтобы цвет фона каждого прогресса менялся при нажатии на него с помощью knockout.js css-binding. Как я могу применить .selected стиль при.

Нет никакой возможности достичь этого без использования JavaScript, не испытывая неожиданных побочных эффектов.

Если состояние visited не имеет значения или даже желательно, пожалуйста, взгляните на ответ @Blazemonger’s.

CSS псевдоклассы focus и active определяются путем потери своего состояния при щелчке в другом месте страницы.

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

Однако вы можете сделать это с , добавив стиль :visited :

Недостатком является то, что они останутся черными, даже если вы покинете страницу и вернетесь (если пользователь не очистит историю своего браузера).

Вот второй подход, который использует невидимые флажки вместо кнопок. Однако это также имеет обратную сторону, когда пользователь может нажать кнопку еще раз, чтобы отменить изменение цвета:

Я новичок css, и мне трудно изменить цвет кнопки при нажатии. Обычно при нажатии кнопки цвет кнопки становится синим в течение очень короткого периода времени. Я хочу, чтобы она вместо того, чтобы быть желтым. Как я могу этого достичь? html

Я хочу изменить цвет кнопки material mat-mini-fab при нажатии кнопки. Моя попытка выглядит так, как показано ниже. Но это не работает. @ViewChild(‘btn’) btn: ElementRef; clicked()

Как поменять цвет кнопки в css

Сегодня рассмотрим примеры стилей самого часто использующего веб-элемента, такого как кнопки CSS. Они используются абсолютно во всех веб-технологиях, начиная от сайта заканчивая веб-программами и приложениями. В зависимости от создаваемого проекта и его дизайна, CSS кнопки должны иметь свой характер внешнего вида и парой хочется, чтобы он заходил за пределы обычных стандартов. А сейчас судя по развитию и возможностей каскадной таблицы CSS, добиться креативного оформления не так трудно. Кроме того, это под силу только одними средствами CSS.

Псевдоэлементы ссылок

Еще немаловажную деталь в стилях buttons css играет hover эффект – это когда курсор мыши наводится на веб-элемент и при этом действие меняются его стили. То есть, допустим, есть кнопка с красным фоном и с надписью белого цвета. Это идет вид по умолчанию, когда к кнопке не применяются какие-либо действия. Но если мы наведём стрелку мышки на наш объект, то ее стили, заданные через псевдоэлемент hover, преобразовываются в иные, к примеру, белый фон и красный текст.

Таких псевдоэлементов ссылки насчитывается всего четыре, а прописываются они через двоеточие с тегом ссылки a:

псевдоэлемент Описание
a:link Стиль ссылки, которую еще не посещали (по умолчанию)
a:visited Стиль ссылки, которую уже посетили
a:active Стиль ссылки во время клика по ней
a:hover Стиль ссылки при наведение мыши на нее
Как сделать CSS кнопку

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

Для примера сделаем простенькую кнопку, чтобы на начальном этапе был понятен принцип ее создания. Мы будем использовать тег ссылки , а еще можно задействовать тег button или input, но у них немного другая специализация. Поэтому будем работать с тегом ссылки.

Первым делом идет разметка HTML, то есть тег ссылки. И для лучшей определенности дадим нашему элементу класс, к примеру, wsbutton.

Сейчас ссылка имеет вид обычного текста с подчеркиванием, нас такой результат не устраивает. Вот что мы делаем, прописываем стили оформления согласно своим пожеланиям.

Довольно все просто: в первом состоянии элемента (по умолчанию) задаем статичные стили. Это вид кнопки, которая будет находиться в нетронутом состоянии. Дальше для псевдоэлемента hover прописываем стили, которые будут применяться при наведении курсора мыши на нее.

Примеры кнопок CSS

Я собрал небольшую коллекцию самых разных оформлений кнопок, которым можно найти применения на своих сайтах или на других проектах. В состав сборки входит многие разновидности buttons css, включая и с библиотекой Bootstrap.

Как изменить цвет фона «посещенной» кнопки в CSS?

Я пытаюсь изменить цвет фона кнопки после ее нажатия (и, возможно, сделать так, чтобы вы не могли щелкнуть ее снова), но не могу понять, как изменить цвет. Я бы хотел использовать для этого только HTML и CSS. Как мне это сделать?

Ответы 2

Вы не можете использовать только HTML и CSS; вам нужен JavaScript. Обратите внимание, что в вашей кнопке onclick=»onClick()» был Функция JavaScript.

Используя JavaScript, вы можете изменить имя класса кнопки на button visited , что заставит работать CSS-селектор .button и .visited .

Обратите внимание, что :visited используется в теге a , а не в кнопке. См. фрагмент, например:

Обновлять

Если у вас было более 1 элемента для события onclick , вы можете использовать:

затем изменить на

Я попробовал это, и мой код все еще не работает. У меня есть функция java script в полном коде, я просто не публиковал ее здесь. Все, что я хочу, это чтобы кто-то щелкнул кнопку, и цвет фона изменился. Я не хочу, чтобы кнопка была связана с чем-либо или делала что-то еще. Как я могу это сделать?

Можете ли вы добавить свой код javascript или сделать фрагмент/скрипку?

Код javascript находится в HTML. В основном я пытаюсь сделать викторину, в которой есть кнопки с вариантами, и когда вы нажимаете на неправильный ответ, он меняет цвет и ничего не делает. Вот javascript: var clicks = 0; function onClick() клики += 1; document.getElementById(«клики»).innerHTML = клики; >;

Я не вижу никакой проблемы. Вы видите обновленный фрагмент? (Обратите внимание, что я закомментировал 2 части, которые вам тоже не нужно комментировать). Возможно, вам не хватает некоторых объяснений выше. Если у вас есть какие-либо вопросы, просто прокомментируйте снова ��

Часть, которую вы закомментировали, необходима в javascript и не должна влиять на css. Все, что я хочу, это иметь кнопку, которая ничего не делает и при нажатии на нее меняются цвета. Это не обязательно должно быть с кодом, который у меня есть, я просто хочу иметь возможность использовать его в коде.

Вот почему я сказал, что вам не нужно это комментировать �� Это было просто для демонстрации, так как там нет index.html и элемента с clicks как id. Текущий фрагмент уже сделал то, что вы просили. Просто удалите console.log , и все готово. Вероятно, вам не хватает CSS-части .visited .

Это вроде работает с удаленной закомментированной частью. Кнопки меняют цвет после трехкратного нажатия, но есть ли способ изменить его после одного раза?

переместите его выше части if . см. обновленный фрагмент

Я попытался переместить его выше части if, но это все равно не сработало. Это работает, если кнопка нажата 3 раза, а не один раз.

@MaxMuchnick правда? вы видели обновленный фрагмент? Я не вижу проблемы.

Это работает на данный момент. Я помещу это в свой полный код, чтобы убедиться.

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

Либо отделите функцию, либо идентификатор селектора. Предположим, что вы хотите изменить только цвет. Затем дал другой кнопке другой идентификатор.

Хорошо, а что значит воздействовать на других? И какой из них вы хотите отличаться от остальных и как? Обратите внимание, что при использовании HTML button onclick они выполняют ту же функцию, что и onClick() .

Когда вы нажимаете любую из кнопок с идентификаторами button1, button2 и button3, все эти кнопки меняют цвет. Я пытаюсь сделать так, чтобы менялась только кнопка, на которую вы нажимаете.

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

До сих пор не могу понять, как изменить только одну кнопку, когда нажимается только эта кнопка. Разве нет простого ответа, например, что-то с javascript или HTML? Он работает, он просто изменил все кнопки при нажатии одной. Добавил бы весь код, он просто очень большой и на несколько страниц.

Вы ссылались на обновленный фрагмент? Это всего лишь 3 строки изменения с onclick=»onClick()» на onclick=»onClick(this)» и с function onClick()

Как изменить цвет кнопки в css

Чтобы получить готовый css код кнопки нажми на нее и скопируй.

Все параметры кнопки

Выбери шрифт у кнопки

Как сделать кнопку в генераторе css

Чтобы сделать красивую кнопку css воспользуемся генератором. У кнопки есть параметры.

  • Размер кнопки css. Изменяем форму кнопки высоту и ширину кнопки.
  • Размер текста у кнопки. Задается свойством font-size.
  • Закругление краев. Если нужна круглая кнопка используем свойство border-radius: 50%.
Зададим все цвета кнопки css.
  1. Верхний цвет градиента. Установим цвет в позиции top.
  2. Нижний цвет градиента. Задаем в позиции bottom.
  3. Полоса сверху кнопки. Дополнительная функция украшения.
  4. Цвет при наведении. Используем класс hover.
  5. Цвет текста. Подбираем цвет контрастный цвету кнопки.
  6. Цвет текста кнопки после наведения. Если изменим фон со светлого на темный, то и цвет должен стать другим.
  7. Цвет кнопки при нажатии. Установим третий цвет для класса active.

После установки всех параметров наживаем на скопировать код кнопки css и переносим в проект. В файле индекса зададим html код для кнопки с классом button. Теперь можно с генерировать тень box shadow и добавить ее при наведении на кнопку, получится красивый эффект.

Как сделать кнопку html

оформление кнопок css

Чтобы сделать красивую html кнопку воспользуемся псевдоклассами.

  1. &:active момент нажатия на кнопку добавляем свойство изменение цвета.
  2. &:hover навели курсор мышки на кнопку и она изменила цвет текста и фона.

Чтобы сделать кнопку по центру используем свойство margin: 0 auto. Подробно о позиционирование элементов написано тут.

Сменить цвет текста кнопки

Изменить цвет текста и кнопки через CSS на стороннюю тему WordPress
Доброго времени! Установила на Denwer Worpress, после чего на последний установила тему. Теперь.

Сменить цвет
Нужно создать квадрат и закрасить определённым цветом, но ни знаю что быстрее будет работать, что.

Сменить цвет бг слайдера
В общем поставил шаблон на wordpress. Все нормально, но одно не устраивает — цвет фона под.

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

Как изменить цвет кнопки CSS при нажатии

У меня есть следующие кнопки, которые меняются при наведении на них.

Как установить цвет фона при выборе одной из кнопок, не теряя выделения при нажатии в другом месте экрана?

В текущем способе нажатие на кнопку делает его тем цветом, который вы выбираете, но нажатие на другое поле экрана возвращает к исходному цвету.

3 ответа

Если вы не хотите использовать javascript и ваш щелчок кнопки не публикуется назад, я бы изменил это так, чтобы вместо него использовались переключатели и метки (при условии, что за один раз можно выбрать только одну — если можно несколько, затем измените радио для галочки):

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

Однако вы можете сделать это с помощью , добавив стиль :visited :

Недостатком является то, что они останутся черными, даже если вы покинете страницу и вернетесь (если пользователь не очистит историю своего браузера).

Вот второй подход, который использует невидимые флажки вместо кнопок. Однако это также имеет недостаток, когда пользователь может снова нажать кнопку, чтобы отменить изменение цвета:

Невозможно достичь этого без использования JavaScript без неожиданных побочных эффектов.

Если состояние visited не имеет значения или даже является желательным, ознакомьтесь с ответом @ Blazemonger’s.

Псевдоклассы CSS focus и active определяются потерей своего состояния при нажатии в другом месте на странице.

Как изменить цвет кнопки в css

При помощи CSS можно создавать различные кнопки с разнообразными эффектами не прибегая к использованию картинок и JavaScript.

Стандартная кнопка, в вашем браузере, выглядит следующим образом:

Причём внешний вид кнопки будет зависеть не, только от браузера пользователя, но и от «темы» рабочего стола. Например, так выглядит кнопка в самых популярных браузерах (IE, Mozilla и Opera соответственно) в стандартном стиле Windows XP

А так она уже будет выглядеть, если пользователь предпочитает для своего рабочего стола использовать «классический стиль»

И конечно кнопка может измениться при применении какого-нибудь другого пользовательского стиля, например, так

Чтобы кнопки на Вашем сайте выглядели одинаково у всех пользователей, не нарушая задуманного дизайна, проще всего задать их внешний вид при помощи CSS.

Давайте пропишем в CSS такие параметры для тега

Теперь кнопка, у всех пользователей, будет выглядеть следующим образом

Параметры кода можно менять в самых широких пределах, например, для придания объёма кнопке, давайте изменим параметры рамки кнопки, заменим

code CSS border: solid 1px #73C8F0;

На такие параметры

code CSS border: outset 2px #73C8F0;

И кнопка примет такой вид

Теперь давайте займёмся более серьёзным «украшением» нашей кнопки. Широкие возможности даёт применение CSS3, который понимают все современные браузеры. У тех же, кто испльзует браузеры ещё не адаптированные под CSS3, просто не будут видны некоторые эффекты, что ни как не скажется на работе кнопки, поскольку все «украшательства» идут как дополнение к внешнему виду кнопки.

Для разнообразия примера, и чтоб наш код сделать более уневирсальным, давайте создадим какой-нибудь класс, например .blue и пропишем для него всё то же самое, что мы писали для в первом варианте.

Теперь наш код CSS будет выглядеть следующим образом

code CSS .blue

Для чего создаются классы? Например на Вашем сайте есть два вида кнопок созданных с помощью разных тегов, и и Вы хотите чтоб в одном случае кнопка имела стандартный вид (по умолчанию определяемым браузером), а в другом случае отображалась как задумано Вами, или хотите создать кнопки разных цветов, или ещё что-то. Вот тогда, в нужном Вам месте просто проставляете «класс» и, в данном случае кнопка, примет такой вид как Вы задумали.

Для примера давайте создадим две кнопки, и в одном случае укажем класс, а в другом нет. Для наглядности я кнопки сделаю рабочими

Скруглить углы, в кнопке, можно добавив в таблицу стилей следующий код:

code CSS border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;

Можно так же добавить градиент:

code CSS background: -moz-linear-gradient(0% 100% 90deg, #2E8CE3, #73C2FD); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73C2FD), to(#2E8CE3));

То есть, полностью код будет теперь выглядеть так:

Для придания кнопке объёма можно добавить внутреннюю тень, путём добавления белой полоски в верхней её части:

code CSS box-shadow: inset 0 1px 0 0 #FFFFFF; -moz-box-shadow: inset 0 1px 0 0 # FFFFFF; -webkit-box-shadow: inset 0 1px 0 0 # FFFFFF;

А для контраста нижний край рамки сделаем более тёмным:

code CSS border-bottom-color: #196ebb;

Так же добавим тень для текста, что сделает кнопку более выразительной:

code CSS text-shadow: 0 -1px 0 #196ebb;

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

code CSS -moz-box-shadow: inset 0 1px 0 0 # FFFFFF; -webkit-box-shadow: inset 0 1px 0 0 # FFFFFF; border-bottom-color: #196EBB; text-shadow: 0 -1px 0 #196EBB;

На такие параметры

code CSS -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); border-bottom: 1px solid rgba(0,0,0,0.25); text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

А так, для сравнения возьму последний вариант, будет выглядеть данная кнопка в вашем браузере

Для ещё лучшего эффекта хорошо добавить параметры, чтоб кнопка меняла вид при наведению на неё курсора, а так же при нажатии на кнопку. Это делается с помощью псевдо классов :hover и :active

Добавим псевдо класс :hover к первому варианту кнопки, т.е. к тегу изменим цвет кнопки при наведении на неё курсора мыши. В таблице стилей сделаем такую запись.

С помощью псевдо класса :active создадим эффект нажатия, например, к коду использованному при наведении мыши добавим тёмную тень вверху и слева внутренней части кнопки, а так же сместим текст вправо и вниз:

То есть, окончательный вариант CSS для Вашей кнопки должен принять примерно такой вид (показан вариант самого последнего вида кнопки)

Похожие публикации:

  1. Как сделать обводку для текста в css
  2. Как сделать отступ между кнопками в css
  3. Как сделать переливающийся текст в css
  4. Как сделать подчеркнутый текст в css

Цвет html кнопки: Как изменить цвет кнопки в форме?

Чтобы получить «текст кнопки» вид, мы удаляем цвет фона по умолчанию и границы:

Пример

.btn <
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
display: inline-block;
>

/* On mouse-over */
.btn:hover

Текстовые кнопки с индивидуальным фоном

Текстовые кнопки с определенным цветом фона при наведении:

Пример

.btn <
border: none;
background-color: inherit;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
display: inline-block;
>

.success:hover background-color: #4CAF50;
color: white;
>

.info:hover background: #2196F3;
color: white;
>

.warning:hover background: #ff9800;
color: white;
>

.danger:hover background: #f44336;
color: white;
>

.default:hover background: #e7e7e7;
>

Перейдите на наш CSS кнопки учебник, чтобы узнать больше о том, как стиль кнопок.

— HTML | MDN

color предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет либо с помощью визуального интерфейса выбора цвета, либо путём ввода цвета в текстовое поле в шестнадцатеричном формате #rrggbb. Разрешены только простые цвета (без альфа-канала), хотя CSS colors имеет больше форматов, например названия цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.

Представление элемента может существенно отличаться от одного браузера и/или платформы к другой — это может быть простой текстовый ввод, который автоматически проверяет правильность ввода информации о цвете в соответствующем формате, или стандартный для платформы выбор цвета, или какое-то пользовательское окно выбора цвета.

value элемента типа color всегда является DOMString , который содержит 7-символьную строку, задающую цвет RGB в шестнадцатеричном формате. Хотя вы можете ввести цвет в верхнем или нижнем регистре, он будет сохранён в виде нижнего регистра. Value никогда не бывает в какой-либо другой форме и никогда не бывает пустым.

Примечание: установка значения на всё, что не является допустимым, полностью непрозрачным цветом RGB в шестнадцатеричной системе счисления, приведёт к тому, что значение будет установлено на #000000. В частности, вы не можете использовать стандартные имена цветов CSS или любой синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS-это отдельные языки и спецификации. Кроме того, цвета с альфа-каналом не поддерживаются; указание цвета в 9-символьной шестнадцатеричной системе счисления (например, #009900aa) также приведёт к тому, что цвет будет установлен на #000000.

Входные данные типа color просты из-за ограниченного числа атрибутов, которые они поддерживают.

Предоставление цвета по умолчанию

Вы можете обновить простой пример выше, чтобы установить значение по умолчанию, так что цветовая заливка будет предварительно заполнена цветом по умолчанию, и палитра цветов (если таковая имеется) также будет по умолчанию использовать этот цвет:

Если вы не зададите значение, то по умолчанию будет #000000 , то есть чёрный цвет. Значение должно быть в семизначной шестнадцатеричной системе счисления, то есть символ»#», за которым следуют две цифры, каждая из которых представляет красный, зелёный и синий цвета, например: #rrggbb. Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba ()), вам придётся преобразовать их в шестнадцатеричные перед установкой значения.

Отслеживание изменений цвета

Как и в случае с другими типами , есть два события, которые могут быть использованы для обнаружения изменения цвета значения: input (en-US) и change (en-US). input запускается на элементе каждый раз, когда меняется цвет. change событие запускается, когда пользователь отклоняет средство выбора цвета. В обоих случаях вы можете определить новое значение элемента, посмотрев на его value .

Вот пример, который наблюдает за изменениями со временем значения цвета:

colorPicker.addEventListener("input", updateFirst, false); colorPicker.addEventListener("change", watchColorPicker, false); function watchColorPicker(event) < document.querySelectorAll("p").forEach(function(p) < p.style.color = event.target.value; >); >
Выбор значения

Если реализация элемента типа color в браузере пользователя не поддерживается правильно, а вместо этого является текстовым полем для непосредственного ввода строки цвета, вы можете использовать select () (en-US) метод выбора текста, находящегося в данный момент в поле редактирования. Если браузер вместо этого верно использует

color , select () ничего не делает. Вы должны знать об этом, чтобы ваш код мог адекватно реагировать в любом случае.

Вариации внешнего вида

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

То же самое можно увидеть и в Firefox 55:

В этом случае при нажатии на цветовой колодец отображается палитра цветов платформы, из которой вы можете выбрать нужный цвет (в данном случае это палитра macOS):

Значение цветового ввода считается недопустимым, если user agent не может преобразовать пользовательский ввод в семизначную строчную шестнадцатеричную нотацию. В этом случае к элементу применяется псевдокласс :invalid

Давайте создадим пример, который делает немного больше с цветом входного сигнала путём отслеживания change (en-US) и input (en-US) событий, чтобы взять новый цвет и применить его к каждому элемента в документе.

HTML

HTML довольно прост — пара абзацев описательного материала с типа color с идентификатором colorWell , который мы будем использовать для изменения цвета текста абзацев.

An example demonstrating the use of the <input type="color"> control.
  
Watch the paragraph colors change when you adjust the color picker. As you make changes in the color picker, the first paragraph's color changes, as a preview (this uses the input event). When you close the color picker, the change event fires, and we detect that to change every paragraph to the selected color.
JavaScript

Во-первых, есть некоторые настройки. Здесь мы объявляем некоторые переменные. Объявляя переменную, содержащую цвет, который мы установим, когда загрузим страницу, а затем устанавливаем обработчик load для выполнения основной работы запуска, как только страница будет полностью загружена.

var colorWell; var defaultColor = "#0000ff"; window.addEventListener("load", startup, false);
Инициализация

Как только страница загружена, вызывается наш обработчик событий загрузки startup() :

function startup()

Это возвращает ссылку на элемент color в переменной colorWell , а затем устанавливает значение входного цвета в значение defaultColor . То цвет входное input (en-US) событие настроено, чтобы вызвать updateFirst() функцию и change (en-US) событие, вызывается updateAll() . Они оба видны ниже.

Наконец, мы вызываем select () (en-US) для выбора текстового содержимого цветового ввода, если элемент управления реализован в виде текстового поля (это не имеет никакого эффекта, если вместо него предусмотрен интерфейс выбора цвета).

Реакция на изменение цвета

Мы предоставляем две функции, которые имеют дело с изменением цвета. Функция updateFirst() вызывается в ответ на input событие. Он изменяет цвет первого элемента абзаца в документе, чтобы соответствовать новому значению входного цвета. Поскольку input

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

function updateFirst(event) < var p = document.querySelector("p"); if (p) < p.style.color = event.target.value; >>

Когда средство выбора цвета закрывается, указывая, что значение больше не будет меняться (если пользователь повторно не откроет средство выбора цвета), в элемент отправляется событие change . Мы обрабатываем это событие с помощью функции updateAll() , используя Event.target.value для получения окончательного выбранного цвета:

function updateAll(event) < document.querySelectorAll("p").forEach(function(p) < p.style.color = event.target.value; >); >

Это устанавливает цвет каждого элемента

таким образом, чтобы его атрибут color (en-US) соответствовал текущему значению входного цвета, на которое ссылаются с помощью event.target .

Результат

Финальный результат выглядит так:

Спецификация Статус Комментарий
HTML Living Standard Живой стандарт Первоначальное определение
HTML5 Рекомендация Первоначальное определение

BCD tables only load in the browser

Кнопка, изменяющая свой цвет при наведении на нее курсора

Примеры переливающихся и меняющих свой цвет текстов мы уже рассматривали ранее. Теперь на очереди стоят кнопки (input type=»button»). Рассмотрим JavaScript код, позволяющий изменять цвет кнопки при наведении на нее курсора мышки.

Собственно вот так выглядит пример работы рассматриваемого скрипта:

Для получения таких кнопок, изменяющих свой цвет текста при наведении курсора мышки, поместите следующий скрипт в начало Вашей странички:

Далее необходимо добавить форму, содержащую кнопки, цвет которых планируется менять, следующим образом:

Еще не забудьте вставить в заголовок странички (между тегами и ) стиль, который будет применен к нашим кнопкам при наведении на них курсора мышки:

В результате у Вас все кнопки, описанные, как показано Выше, должны изменять свой цвет, при наведении на них курсора мышки.

Дата создания: 14:10:21 03.07.2011 г.

Дата обновления: 22:36:47 08.03.2012 г.

Посещений: 20247 раз(а).

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

HTML и CSS с примерами кода

Тег (от англ. button — кнопка) создаёт на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью (с атрибутом type=»button | reset | submit» ).

В отличие от этого элемента, предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путём изменения шрифта, цвета фона, размеров и других параметров.

Синтаксис

Закрывающий тег обязателен.

Атрибуты

autofocus Устанавливает, что кнопка получает фокус после загрузки страницы. disabled Блокирует доступ и изменение элемента. form Связывает между собой форму и кнопку. formaction Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку. formenctype Способ кодирования данных формы. formmethod Указывает метод пересылки данных формы. formnovalidate Отменяет проверку формы на корректность. formtarget Открывает результат отправки формы в новом окне или фрейме. name Определяет уникальное имя кнопки. type Устанавливает тип кнопки: обычная; для отправки данных формы на сервер; для очистки формы. value Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого тега доступны универсальные атрибуты.

autofocus

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

Синтаксис

Значения

Значение по умолчанию

По умолчанию это значение выключено.

disabled

Блокирует доступ к кнопке и её изменение. Она в таком случае отображается серым цветом и недоступна для активации пользователем. Кроме того, такая кнопка не может получить фокус путём нажатия на клавишу Tab , мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передаётся на сервер.

Синтаксис

Значения

Значение по умолчанию

По умолчанию это значение выключено.

form

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

Синтаксис

Значения

Идентификатор формы (значение атрибута id элемента ).

Значение по умолчанию

formaction

Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента . Если одновременно указать action и formaction , то при нажатии на кнопку атрибут action игнорируется и данные пересылаются по адресу, указанному в formaction .

Синтаксис

Значения

formenctype

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла ( input type=»file» ). Этот атрибут по своему действию аналогичен атрибуту enctype элемента .

Синтаксис

Значения

application/x-www-form-urlencoded Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя). multipart/form-data Данные не кодируются. Это значение применяется при отправке файлов. text/plain Пробелы заменяются знаком + , буквы и другие символы не кодируются.

Значение по умолчанию

  • application/x-www-form-urlencoded
formmethod

Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.

Синтаксис

Значения

Различают два метода — GET и POST.

GET Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар « имя=значение », которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ & ). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup . Объём данных в методе ограничен 4 Кб. POST Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.

formnovalidate

Отменяет встроенную проверку данных введённых пользователем в форме на корректность при нажатии на кнопку. Такая проверка делается браузером автоматически при отправке формы на сервер для полей , , а также при наличии атрибута pattern или required у элемента .

Синтаксис

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

formtarget

Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы, в виде HTML-документа.

Синтаксис

Значения

В качестве значения используется имя фрейма, заданное атрибутом name элемента . Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных значений можно указывать следующие.

_blank Загружает страницу в новую вкладку браузера. _self Загружает страницу в текущую вкладку. _parent Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .

name

Определяет уникальное имя кнопки. Как правило, это имя используется при отправке значения кнопки на сервер или для доступа к кнопке через скрипты.

Синтаксис

Значения

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

Значение по умолчанию

type

Определяет тип кнопки, который устанавливает её поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.

Синтаксис

Значения

button Обычная кнопка. reset Кнопка для очистки введённых данных формы и возвращения значений в первоначальное состояние. submit Кнопка для отправки данных формы на сервер. menu Открывает меню, созданное с помощью элемента .

Значение по умолчанию

value

Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара « имя=значение », где имя задаётся атрибутом name элемента , а значение — атрибутом value . Значение может как совпадать с текстом на кнопке, так быть и самостоятельным. Также атрибут value применяется для доступа к данным через скрипты.

Синтаксис

Значения

Любая текстовая строка.

Значение по умолчанию

Спецификации

Описание и примеры

    BUTTON

Ссылки

Кнопки и размещения: Раздел «Кнопка»

В данном разделе пункта настроек Кнопки и размещения Вы можете настроить внешний вид кнопки вызова оператора под свои нужды. Сервис Webim предоставляет набор системных кнопок, но Вы также можете использовать свои.

Параметр Показывать офлайн-кнопку включает или выключает отображение кнопки чата статуса «Офлайн».

HTML-кнопка

Самая современная кнопка сервиса Webim. Кроме большого количества настроек внешнего вида кнопки, у неё есть одна особенность. При нажатии на эту кнопку, если у Вас настроен раздел «Каналы», у пользователя отобразятся кнопки для доступа к Вашим каналам.

  • Цвет фона кнопки — изменяет цвет фона чата. В настройках размещения сохраняется как параметр button.html.style.background-color.
  • Цвет границы кнопки — изменяет цвет границы кнопки. В настройках размещения сохраняется как параметр button.html.style.border-color.
  • Цвет изображения кнопки — изменяет цвет изображения кнопки. В настройках размещения сохраняется как параметр button.html.style.image-color.
  • Возможность перемещения кнопки — параметр разрешает или запрещает пользователю перемещать кнопку на сайте с помощью drag-n-drop. В настройках размещения сохраняется как параметр button.html.draggable.
  • Горизонтальное положение кнопки — изменяет стандартное положение кнопки чата по горизонтали.
  • Вертикальное положение кнопки — изменяет стандартное положение кнопки чата по вертикали.

Чтобы загрузить своё готовое изображение кнопки, которое вы хотите использовать, нажмите Загрузить свою кнопку. В появившемся окне загрузите с устройства файл с изображением кнопки в одном из следующих форматов: jpg, gif, png, jpeg, svg. Размер кнопки не должен превышать 10 Мб. Также осуществите следующие настройки кнопки:

  • Тип кнопки: укажите, должна кнопка быть обычной, выдвигающейся или угловой
  • Позиция: укажите, в каком углу страницы кнопка будет появляться на сайте

Загруженные кнопки
Здесь отображаются кнопки, которые были загружены Вами самостоятельно.

Системные кнопки
Стандартные кнопки сервиса Webim. В следующей таблице представлены все варианты изображений стандартных кнопок.

Форматирование текста тегами псевдо-HTML — Клеверенс

Последние изменения: 27.11.2018

Тексты в окнах на терминале можно форматировать при помощи тегов псевдо-HTML. Использование форматирования позволяет отобразить информацию на экране в удобном пользователям виде, выделить важные сообщения в тексте и т.п.

Список тегов, которые можно использовать при форматировании текста:

Обычный текст с возможностью задания цвета и размера.

Выделение текста жирным.

Текст написан курсивом (наклонный).

В качестве тега можно использовать имя цвета для текста.

Горизонтальная линия отчеркивания.

Переход на новую строку (устанавливает перевод строки в том месте, где этот тег находится).

Текст
С новой строки

Путь к картинке или шаблон

Вставка изображения. Читайте подробнее >>

Вставка кнопки. Читайте подробнее >>

Теги можно заключать друг в друга, например,

Обычный текст выделение текста жирным снова обычный текст.

Результат: Обычный текст выделение текста жирным снова обычный текст

При этом, вложенные тэги, если у них не задан размер или цвет, наследуют эти атрибуты у тега верхнего уровня, т.е. в приведенном примере жирный текст «выделение текста жирным» будет также иметь размер 12, как и остальной текст.

Задание размера текста

Для задания размера текста используется необязательный атрибут size=»…». Если атрибут не задан, то для вывода текста используется размер по умолчанию, в соответствии со стилем отображения.

Размер может задаваться двумя способами:

Абсолютное значение

Размер текста соответствует заданному в атрибуте size.

Относительное значение

Размер текст задается со знаком «+» или “–“ и определяет изменение относительно размера уровнем выше, или размера текста по умолчанию.

Примеры смотрите здесь.

Выводим 12м — Выведено 10м размером — снова 12

Размер по умолчанию = 10

Выводим 12м — Выведено 10м размером — снова 12

Размерами текстов в разных местах интерфейса по умолчанию Вы можете управлять, используя стиль клиентского приложения на ТСД. Подробнее про это читайте здесь.

Задание цвета текста

Для задания цвета текста используется тег с именем цвета или необязательный атрибут color=»…». Если атрибут не задан, то для вывода текста используется цвет по умолчанию, в соответствии со стилем отображения.

Цвет может задаваться тремя способами:

Тег – имя цвета

В качестве тега можно использовать имя цвета на английском языке

Название цвета на английском языке

Черный — Синий — Снова черный

Код цвета в шестнадцатеричном виде

Черный — Синий — Снова черный

Была ли статья полезна?

Введение в Chrome DevTools. Панель Elements — Блог HTML Academy

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

В этом цикле статей мы разберём базовые возможности Chrome DevTools, но их будет вполне достаточно для начала обучения.

Как открыть инструменты разработчика

Настройки DevTools

Тема интерфейса

Можно настроить инструменты разработчика и изменить их внешний вид — например, выбрать тёмное оформление интерфейса.

Горячие клавиши

В настройках есть список горячих клавиш — советуем с ними ознакомиться, знание этих комбинаций очень ускорит работу.

Расположение панелей

В правом верхнем углу находится кнопка, которая отвечает за расположение панелей. DevTools может находиться снизу, слева, справа, а ещё мы можем открепить отладчик и работать с ним в отдельном окне.

Вкладка Elements

С её помощью можно отслеживать элементы и их свойства на странице, можно редактировать стили и проверять вёрстку на переполнение. Как это делать? Давайте разбираться.

Как получить информацию об элементе

Есть три способа получить информацию о любом элементе на странице — выбирайте самый удобный для себя.

Через инспектор. Способ удобен, если вы точно видите элемент и можете кликнуть по нему правой кнопкой мыши. Выберите Inspect или «Посмотреть код». Заодно сразу откроется панель разработчика.

Поиск по элементам. При показанном отладчике нажимаем Ctrl+F, и внизу появится окно поиска по тегу, атрибуту, классу или текстовому содержимому элемента.

Введём, например, класс header , и увидим все подходящие элементы:

Визуальный поиск. При открытом отладчике открываем режим визуального поиска, находим нужный элемент и кликаем по нему.

Как внести изменения в элемент на странице

Если вы хотите отредактировать атрибут, класс или текст элемента, сделайте двойной щелчок в нужной точке и вносите изменения.

Чтобы переместиться вперёд, нажмите Tab, назад — Shift+Tab, а чтобы скрыть элемент, нажмите H.

Как изменить разметку страницы

Любители мыши кликают правой кнопкой на элемент и выбирают Edit as HTML, а фанаты клавиатуры нажимают F2. Результат сразу отображается на экране.

Проверка вёрстки на переполнение

Мы верстали, редактировали, а как проверить, что вёрстка не развалится, если количество элементов изменится? Сделаем тесты на переполнение.

Проверка на переполнение текстом. Есть два способа:

  1. Находим элемент, делаем двойной клик и добавляем текст. Проще всего скопировать содержимое и вставить его несколько раз.
  2. Открываем вкладку Console, вставляем команду document.body.contentEditable = true , нажимаем Enter. Теперь можно редактировать любой текстовый элемент на странице напрямую. Естественно, исправленный текст останется до перезагрузки страницы и никак не повлияет на сайт.

На что обращать внимание? При добавлении текста элементы должны растягиваться по вертикали, текст не должен вылезать за поля элемента, выпадать или обрезаться.

Переполнение потоковыми блоками. Находим родителя, в котором лежат нужные элементы и редактируем разметку, добавляем несколько блоков, применяем изменения и смотрим результат.

Сетка при переполнении не должна ломаться, а логика потока должна сохраняться.

Просмотр и тестовое редактирование стилей

Информация о стилях находится на вкладке Styles. Справа выводятся стили, указанные разработчиком, а справа от каждого стиля — файл и строка, где они прописаны.

На скриншоте выше — стили браузера, применяемые к элементу. Они могут отличаться в зависимости от выбранного браузера. А здесь находятся унаследованные стили.

Блок с метриками (на скриншоте) на самом деле находится в самом низу — нужно проскроллить список до конца.

Меняем стили прямо в браузере

Любое правило можно отредактировать, а размеры элементов менять прямо в блоке с метрикой. Например, переопределим значение размера шрифта, и результат сразу появится на экране.

Напишем правило с ошибкой. Правило не применится, потому что его не существует. Оно зачёркнуто, а слева появляется иконка с предупреждением.

А ещё мы можем разворачивать сокращённое правило, кликнув на стрелку. Например, так можно развернуть правило для border-style .

Слева у всех элементов есть чекбокс для включения и выключения стилей.

Данные о цвете

У элементов со свойством color легко меняется цвет — для этого нужно воспользоваться пипеткой. Можно выбрать любой цвет из интерфейса или указать цвет в RGBA или HSL.

Это далеко не все возможности Chrome DevTools, но рассказ обо всём сразу займёт не один час. Подпишитесь на рассылку, чтобы не пропустить следующие выпуски.

Гвозди можно заколачивать и микроскопом, но лучше не надо

Сила — в знании, какие инструменты когда применять. Знания — на интерактивных курсах и интенсивах.

Нажатие на кнопку — согласие на обработку персональных данных

Понимание тега HTML 4.0

Применение фона к кнопке

Для доработки различие между кнопкой обычной формы и кнопкой HTML 4.0, мы должны принудительно новая кнопка, чтобы избавиться от уродливого серого фона. Это можно сделать с небольшим прикосновением к CSS (каскадные таблицы стилей), например следующие правила:

Давайте начнем преобразование, ладно?

Спасите нашу планету!

Фон кнопки может быть даже прозрачным, указание цвета фона в объявлении стиля на «прозрачный»:
Управление шириной / высотой кнопки

По умолчанию размеры кнопки автоматически устанавливаются равными размеры, необходимые для размещения содержимого внутри, например изображения.Часто бывает, что вы захотите вручную управлять этим размером, чтобы соответствовать вашему дизайну. Используя другое объявление CSS, вы можете. Чтобы контролировать ширину / высоту кнопки используйте следующее объявление стиля:

Давайте создадим серию идеально прямоугольных кнопок, а затем используя вышеуказанные знания:

Пример — имитация кнопок браузера с использованием тега

Посмотрите внимательно на прямоугольные кнопки выше…что они напомнить вам о? Что ж, они напоминают мне кнопки по умолчанию, которые появляются на панель инструментов вашего браузера. Оба они прямоугольные, серого цвета. В В этом забавном примере мы создадим кнопки html 4.0, которые имитируют стандартные кнопки браузера.

Задний Вперед Дом Перезарядить Закрыть

— HTML: язык разметки гипертекста

элементы типа color предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет либо с помощью визуального интерфейса выбора цвета, либо путем ввода цвета в текстовое поле в шестнадцатеричном формате #rrggbb формат.Разрешены только простые цвета (без альфа-канала), хотя у цветов CSS больше форматов, например названия цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.

Представление элемента может существенно отличаться от одного браузера и / или платформы к другому — это может быть простой текстовый ввод, который автоматически проверяется, чтобы гарантировать, что информация о цвете введена в правильном формате, или стандартная для платформы палитра цветов, или что-то еще. вид настраиваемого окна выбора цвета.

Значение элемента типа color всегда является DOMString , которая содержит 7-символьную строку, определяющую цвет RGB в шестнадцатеричном формате. Хотя вы можете вводить цвет как в верхнем, так и в нижнем регистре, он будет сохранен в нижнем регистре. Значение никогда не бывает в какой-либо другой форме и никогда не бывает пустым.

Примечание : Установка значения, которое не является допустимым, полностью непрозрачным, цветом RGB в шестнадцатеричной системе счисления , приведет к установке значения # 000000 .В частности, вы не можете использовать стандартные названия цветов CSS или какой-либо синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS — это отдельные языки и спецификации. Кроме того, не поддерживаются цвета с альфа-каналом; указание цвета в 9-значном шестнадцатеричном формате (например, # 009900aa ) также приведет к установке цвета на # 000000 .

Вводы типа цвет просты из-за ограниченного числа поддерживаемых атрибутов.

Предоставление цвета по умолчанию

Вы можете обновить приведенный выше простой пример, чтобы установить значение по умолчанию, чтобы цветовая ячейка была предварительно заполнена цветом по умолчанию, а палитра цветов (если таковая имеется) также будет использовать этот цвет по умолчанию:

Если вы не укажете значение, значение по умолчанию — # 000000 , то есть черный цвет. Значение должно быть в семизначном шестнадцатеричном формате, то есть за символом «#» следует две цифры, каждая из которых представляет красный, зеленый и синий цвета, например: #rrggbb .Если у вас есть цвета в любом другом формате (например, имена цветов CSS или функции цвета CSS, такие как rgb () или rgba () ), вам придется преобразовать их в шестнадцатеричный формат, прежде чем устанавливать значение .

Отслеживание изменений цвета

Как и в случае с другими типами , есть два события, которые могут использоваться для обнаружения изменений значения цвета: input и change . input запускается в элементе каждый раз при изменении цвета.Событие change запускается, когда пользователь закрывает палитру цветов. В обоих случаях вы можете определить новое значение элемента, посмотрев на его значение .

Вот пример, который отслеживает изменения со временем на значение цвета:

 colorPicker.addEventListener («вход», updateFirst, false); colorPicker.addEventListener ("изменение", watchColorPicker, false); function watchColorPicker (event) < document.querySelectorAll ("p"). forEach (function (p) < п.style.color = event.target.value; >); >
Выбор значения

Если реализация элемента типа color в браузере пользователя не поддерживает цвет, а вместо этого является текстовым полем для непосредственного ввода строки цвета, вы можете используйте метод select () , чтобы выделить текст, находящийся в данный момент в поле редактирования. Если браузер вместо этого хорошо использует цвет, select () ничего не делает. Вы должны знать об этом поведении, чтобы ваш код мог правильно реагировать в любом случае.

Варианты внешнего вида

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

То же самое содержимое выглядит так в Firefox 55:

В этом случае щелчок по ячейке цвета представляет палитру цвета платформы, из которой вы можете выбрать цвет (в данном случае палитра macOS):

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

Давайте создадим пример, который делает немного больше с вводом цвета, отслеживая события change и input , чтобы взять новый цвет и применить его к каждому элементу

HTML

HTML довольно прост — пара параграфов описательного материала с типа color с идентификатором colorWell , который мы будем использовать для изменения цвета параграфов » текст.

  
Пример, демонстрирующий использование & lt; input type = "color" & gt; контроль.
   
Наблюдайте за изменением цвета абзаца при настройке палитры цветов. Когда вы вносите изменения в палитру цветов, первый абзац цвет меняется, как предварительный просмотр (здесь используется input мероприятие). Когда вы закрываете палитру цветов, изменение событие запускается, и мы обнаруживаем это, чтобы изменить каждый абзац на выбранный цвет.
JavaScript

Во-первых, есть некоторые настройки. Здесь мы устанавливаем некоторые переменные, настраивая переменную, которая содержит цвет, который мы установим для цвета при первой загрузке, а затем настраиваем обработчик load для выполнения основной работы при запуске после полной загрузки страницы.

 var colorWell; var defaultColor = "# 0000ff"; window.addEventListener ("загрузка", запуск, ложь);
Инициализация

После загрузки страницы вызывается наш обработчик событий load , startup () :

 function startup ()

Это получает ссылку на элемент color в переменной с именем colorWell , а затем устанавливает значение ввода цвета на значение в defaultColor . Затем событие input цветового ввода настраивается для вызова нашей функции updateFirst () , а событие change настраивается на вызов updateAll () .Оба они показаны ниже.

Наконец, мы вызываем select () для выбора текстового содержимого ввода цвета, если элемент управления реализован как текстовое поле (это не имеет никакого эффекта, если вместо него предоставляется интерфейс выбора цвета).

Реагирование на изменение цвета

Мы предоставляем две функции, которые имеют дело с изменением цвета. Функция updateFirst () вызывается в ответ на событие input . Он изменяет цвет первого элемента абзаца в документе, чтобы он соответствовал новому значению ввода цвета.Поскольку input события запускаются каждый раз, когда выполняется регулировка значения (например, если яркость цвета увеличивается), это будет происходить неоднократно, когда используется палитра цветов.

 function updateFirst (событие) < var p = document.querySelector ("p"); if (p) < p.style.color = event.target.value; >>

Когда средство выбора цвета закрывается, указывая, что значение больше не будет изменяться (если пользователь повторно не откроет средство выбора цвета), элементу отправляется событие изменения .Мы обрабатываем это событие с помощью функции updateAll () , используя Event.target.value для получения окончательного выбранного цвета:

 function updateAll (событие) < document.querySelectorAll ("p"). forEach (function (p) < p.style.color = event.target.value; >); >

Устанавливает цвет каждого блока

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

Результат

Окончательный результат выглядит так:

Таблицы BCD загружаются только в браузере

Применение цвета к элементам HTML с помощью CSS — HTML: язык разметки гипертекста

Использование цвета — фундаментальная форма человеческого самовыражения. Дети экспериментируют с цветом еще до того, как научатся рисовать руками. Может быть, поэтому цвет — одна из первых вещей, с которой люди часто хотят экспериментировать, когда учатся разрабатывать веб-сайты.С помощью CSS есть множество способов добавить цвет к вашим HTML-элементам, чтобы создать именно тот вид, который вам нужен. Эта статья представляет собой учебник, знакомящий с каждым из способов использования цвета CSS в HTML.

К счастью, добавить цвет к вашему HTML на самом деле очень просто, и вы можете добавить цвет практически ко всему.

Мы собираемся коснуться большей части того, что вам нужно знать при использовании цвета, включая список того, что вы можете раскрасить, и какие свойства CSS задействованы, как вы описываете цвета и как на самом деле использовать цвета как в таблицах стилей. и в скриптах.Мы также рассмотрим, как позволить пользователю выбирать цвет.

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

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

На фундаментальном уровне свойство color определяет цвет переднего плана содержимого HTML-элемента, а свойство background-color определяет цвет фона элемента. Их можно использовать практически для любого элемента.

Текст

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

цвет Цвет, используемый при рисовании текста и любых текстовых украшений (таких как добавление подчеркивания или надчеркивания, зачеркивание линий и т. Д.). цвет фона Цвет фона текста. тень текста Настраивает эффект тени для применения к тексту. Среди вариантов тени — основной цвет тени (который затем размывается и смешивается с фоном на основе других параметров). Дополнительные сведения см. В разделе «Тени отбрасываемого текста» в разделе «Основные стили текста и шрифтов». цвет текста-декорации По умолчанию для оформления текста (например, подчеркивания, зачеркивания и т. Д.) В качестве цвета используется свойство color .Однако вы можете переопределить это поведение и использовать для них другой цвет с помощью свойства text-decoration-color . цвет выделения текста Цвет, используемый при рисовании символов выделения рядом с каждым символом в тексте. Это используется в первую очередь при рисовании текста для языков Восточной Азии. каре Цвет, используемый при рисовании курсора (иногда называемого курсором ввода текста) внутри элемента.Это полезно только для редактируемых элементов, таких как и

или элементов, для которых установлен атрибут HTML contenteditable .

Коробки

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

Границы См. В разделе «Границы» список свойств CSS, которые можно использовать для установки цветов границ блока. цвет фона Цвет фона для использования в областях элемента, не имеющих содержимого переднего плана. столбец-линейка-цвет Цвет, используемый при рисовании линии, разделяющей столбцы текста. цвет контура Цвет, используемый при рисовании контура снаружи элемента. Этот контур отличается от границы тем, что для него не отведено место в документе (поэтому он может перекрывать другое содержимое).Обычно он используется как индикатор фокуса, чтобы показать, какой элемент будет получать события ввода.

Границы

Любой элемент может иметь границу. Граница базового элемента — это линия, проведенная по краям содержимого элемента. См. Свойства бокса в блочной модели, чтобы узнать о взаимосвязи между элементами и их границами, и статью «Стилизация границ с помощью CSS», чтобы узнать больше о применении стилей к границам.

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

цвет рамки Задает один цвет, который будет использоваться для каждой стороны границы элемента. цвет рамки слева , цвет рамки справа , цвет рамки сверху и цвет рамки снизу Позволяет установить цвет соответствующей стороны границы элемента. border-block-start-color и border-block-end-color С их помощью вы можете установить цвет, используемый для рисования границ, ближайших к началу и концу блока, который окружает граница.В режиме письма слева направо (например, при написании на английском языке) граница начала блока — это верхний край, а конец блока — нижний. Это отличается от встроенного начала и конца, которые представляют собой левый и правый края (соответствующие тому, где каждая строка текста в поле начинается и заканчивается). border-inline-start-color и border-inline-end-color Позволяют раскрасить края границы, ближайшей к началу и концу начала строк текста внутри поля.Какая это сторона будет варьироваться в зависимости от свойств режима письма , направления и ориентации текста , которые обычно (но не всегда) используются для настройки направленности текста в зависимости от отображаемого языка. Например, если текст поля отображается справа налево, то к правой стороне границы применяется border-inline-start-color .

Другие способы использования цвета

CSS — не единственная веб-технология, поддерживающая цвет.В Интернете доступны графические технологии, которые также поддерживают цвет.

API HTML Canvas Позволяет рисовать двухмерную растровую графику в элементе . См. Наше руководство по Canvas, чтобы узнать больше. SVG (масштабируемая векторная графика) Позволяет рисовать изображения с помощью команд, которые рисуют определенные формы, узоры и линии для создания изображения. Команды SVG отформатированы как XML и могут быть встроены непосредственно в веб-страницу или могут быть размещены на странице с помощью элемента , как и любой другой тип изображения. WebGL Библиотека веб-графики — это API-интерфейс на базе OpenGL ES для рисования высокопроизводительной 2D- и 3D-графики в Интернете. См. Наше руководство по WebGL, чтобы узнать больше.

Чтобы представить цвет в CSS, вы должны найти способ перевести аналоговое понятие «цвет» в цифровую форму, которую может использовать компьютер. Обычно это делается путем разделения цвета на компоненты, например, сколько из каждого набора основных цветов смешивать вместе или насколько ярким сделать цвет.Таким образом, существует несколько способов описания цвета в CSS.

Для более подробного обсуждения каждого из типов значений цвета см. Ссылку на модуль CSS .

Ключевые слова

Определен набор стандартных названий цветов, позволяющий использовать эти ключевые слова вместо числовых представлений цветов, если вы решите это сделать, и есть ключевое слово, представляющее точный цвет, который вы хотите использовать. Ключевые слова цвета включают стандартные основные и вторичные цвета (например, красный , синий или оранжевый ), оттенки серого (от черного до белого , включая такие цвета, как темно-серый и светло-серый ) и множество других смешанных цветов, включая светло-зеленый , васильковый и rebeccapurple .

Список всех доступных ключевых слов для цветов см. В разделе «Ключевые слова цвета» в .

Значения RGB

Существует три способа представления цвета RGB в CSS.

Шестнадцатеричное строковое представление

Шестнадцатеричная строка представляет цвет с использованием шестнадцатеричных цифр для представления каждого из компонентов цвета (красный, зеленый и синий). Он также может включать четвертый компонент: альфа-канал (или непрозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 и 0xFF) или, необязательно, как число от 0 до 15 (0x0 и 0xF).Все компоненты необходимо указать , используя одинаковое количество цифр. Если вы используете однозначное обозначение, окончательный цвет вычисляется с использованием цифры каждого компонента дважды; то есть «#D» становится «#DD» при рисовании.

Цвет в шестнадцатеричной системе счисления всегда начинается с символа «#» . После этого идут шестнадцатеричные цифры цветового кода. Строка нечувствительна к регистру.

«#rrggbb» Задает полностью непрозрачный цвет, красный компонент которого представляет собой шестнадцатеричное число 0xrr , зеленый компонент — 0xgg , а синий компонент — 0xbb . «#rrggbbaa» Задает цвет, красный компонент которого представляет собой шестнадцатеричное число 0xrr , зеленый компонент — 0xgg , а синий компонент — 0xbb . Альфа-канал указан 0xaa ; чем ниже это значение, тем более полупрозрачным становится цвет. «#rgb» Задает цвет, красный компонент которого представляет собой шестнадцатеричное число 0xrr , зеленый компонент — 0xgg , а синий компонент — 0xbb . «#rgba» Задает цвет, красный компонент которого представляет собой шестнадцатеричное число 0xrr , зеленый компонент — 0xgg , а синий компонент — 0xbb . Альфа-канал указан 0xaa ; чем ниже это значение, тем более полупрозрачным становится цвет.

В качестве примера можно представить ярко-синий непрозрачный цвет как «# 0000ff» или «# 00f» . Чтобы сделать его непрозрачным на 25%, вы можете использовать «# 0000ff44» или «# 00f4» .

Функциональное обозначение RGB

Функциональная нотация

RGB (красный / зеленый / синий), как и шестнадцатеричная строковая нотация, представляет цвета с использованием их красного, зеленого и синего компонентов (а также, необязательно, компонента альфа-канала для непрозрачности). Однако вместо использования строки цвет определяется с помощью функции CSS rgb () . Эта функция принимает в качестве входных параметров значения красного, зеленого и синего компонентов и необязательный четвертый параметр — значение альфа-канала.

Допустимые значения для каждого из этих параметров:

красный , зеленый и синий Каждое должно быть значением от 0 до 255 (включительно) или от 0% до 100%. альфа Альфа-канал — это число от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный). Вы также можете указать процент, где 0% соответствует 0,0, а 100% соответствует 1.0.

Например, ярко-красный цвет, непрозрачный на 50%, может быть представлен как rgb (255, 0, 0, 0,5) или rgb (100%, 0, 0, 50%) .

Функциональная нотация HSL

Дизайнеры и художники часто предпочитают работать с цветовым методом HSL (оттенок / насыщенность / яркость). В Интернете цвета HSL представлены с использованием функциональной нотации HSL. В остальном CSS-функция hsl () очень похожа на функцию rgb () .

Рисунок 1.Цветной цилиндр HSL. Hue определяет фактический цвет на основе положения на круговом цветовом круге, представляющем цвета видимого спектра. Насыщенность — это процентное значение расстояния между оттенком серого и максимально возможным количеством данного оттенка. По мере увеличения значения яркости (или яркости) цвет меняется от самого темного к самому яркому (от черного к белому). Изображение любезно предоставлено пользователем SharkD в Википедии, распространяется под лицензией CC BY-SA 3.0 лицензия.

Значение компонента оттенка (H) цвета HSL — это угол от красного вокруг до желтого, зеленого, голубого, синего и пурпурного (снова заканчивающийся красным на 360 °), который определяет, каков базовый цвет. Значение может быть указано в любых единицах , поддерживаемых CSS, включая градусы ( градусов, ), радианы ( рад, ), градиенты ( градусов, ) или повороты ( градусов, ). Но это не влияет на то, насколько ярким или тусклым, а также насколько ярким или темным будет цвет.

Компонент насыщенности (S) цвета определяет, какой процент окончательного цвета состоит из указанного оттенка. Остальное определяется уровнем серого, обеспечиваемым компонентом яркости (L).

Думайте об этом как о создании идеального цвета краски:

  1. Вы начинаете с базовой краски, которая имеет максимальную возможную интенсивность для данного цвета, например, самый интенсивный синий, который может быть представлен на экране пользователя. Это оттенок (H): значение, представляющее угол вокруг цветового круга для яркого оттенка, который мы хотим использовать в качестве основы.
  2. Затем выберите краску в оттенках серого, которая соответствует желаемой яркости цвета; это яркость. Вы хотите, чтобы он был очень ярким и почти белым, или очень темным и ближе к черному, или где-то посередине? Это указывается в процентах, где 0% — это идеально черный, а 100% — идеально белый. (независимо от насыщенности или оттенка). Между значениями — буквальная серая область.
  3. Теперь, когда у вас есть серая краска и совершенно яркий цвет, вам нужно смешать их вместе.Компонент насыщенности (S) цвета указывает, какой процент окончательного цвета должен состоять из этого идеально яркого цвета. Остальной окончательный цвет состоит из серой краски, которая представляет насыщенность.

Вы также можете дополнительно включить альфа-канал, чтобы сделать цвет менее 100% непрозрачным.

Вот несколько образцов цветов в нотации HSL:

Обратите внимание, что когда вы опускаете единицы измерения оттенка, предполагается, что они выражаются в градусах ( градусов, ).

Теперь, когда вы знаете, какие существуют свойства CSS, которые позволяют применять цвет к элементам, и форматы, которые вы можете использовать для описания цветов, вы можете собрать их вместе, чтобы начать использовать цвет. Как вы могли видеть из списка в разделе «Вещи, которые могут иметь цвет», есть много элементов, которые можно раскрасить с помощью CSS. Давайте посмотрим на это с двух сторон: использование цвета в таблице стилей и добавление и изменение цвета с помощью кода JavaScript для изменения стилей элементов.

Указание цветов в таблицах стилей

Самый простой способ применить цвет к элементам — и как вы это обычно делаете — это указать цвета в CSS, которые используются при рендеринге элементов.Хотя мы не будем использовать все упомянутые ранее свойства, мы рассмотрим несколько примеров. Концепция одинакова везде, где вы используете цвет.

Давайте рассмотрим пример, начав с результатов, которых мы пытаемся достичь:

HTML

HTML-код, ответственный за создание приведенного выше примера, показан здесь:

  
 
 
Это первая коробка.
 
 
 
Это вторая коробка.

Это довольно просто, используя

в качестве оболочки вокруг содержимого, которое состоит из еще двух
s, каждый из которых оформлен по-разному с одним абзацем (

Волшебство происходит, как обычно, в CSS, где мы применяем цвета, определяющие макет для HTML выше.

CSS

Мы посмотрим на CSS, чтобы создать вышеуказанные результаты по частям, чтобы мы могли просматривать интересные части одну за другой.

 .wrapper

Класс .wrapper используется для назначения стилей объекту

, который включает все остальное содержимое. Это устанавливает размер контейнера с использованием ширины и высоты , а также его поля и заполнения .

Более интересным для нашего обсуждения здесь является использование свойства border , чтобы установить границу вокруг внешнего края элемента.Эта граница представляет собой сплошную линию шириной 6 пикселей среднего бирюзового цвета цвета .

Наши два цветных поля имеют ряд общих свойств, поэтому теперь мы создаем класс .box , который определяет эти общие свойства:

Короче .box устанавливает размер каждого поля, а также конфигурацию шрифта, используемого в нем. Мы также используем CSS Flexbox, чтобы легко центрировать содержимое каждого поля. Мы включаем режим flex , используя display: flex , и устанавливаем как justify-content , так и align-items с на center . Затем мы можем создать класс для каждого из двух блоков, который определяет свойства, различающиеся между ними.

 .boxLeft

Модель .Класс boxLeft , который хитроумно используется для стилизации поля слева, перемещает поле слева, а затем устанавливает цвета:

  • Цвет фона блока устанавливается путем изменения значения свойства background-color CSS на rgb (245, 130, 130) .
  • Для коробки определен контур. В отличие от более часто используемой границы , контур вообще не влияет на макет; он рисует поверх всего, что может оказаться за пределами рамки элемента, вместо того, чтобы освобождать место, как это делает граница .Этот контур представляет собой сплошную темно-красную линию толщиной в два пикселя. Обратите внимание на использование ключевого слова darkred при указании цвета.
  • Обратите внимание, что мы не устанавливаем цвет текста явно. Это означает, что значение цвет будет унаследовано от ближайшего содержащего элемента, который его определяет. По умолчанию это черный цвет.
 .boxRight

Когда вы пытаетесь показать его в Safari, он не будет отображаться должным образом.Поскольку Safari не поддерживает text-decoration: подчеркивание волнистым # 88ff88 .

Наконец, класс .boxRight описывает уникальные свойства прямоугольника, нарисованного справа. Он настроен таким образом, чтобы поле перемещалось вправо, чтобы оно отображалось рядом с предыдущим полем. Затем устанавливаются следующие цвета:

  • Цвет фона устанавливается с использованием значения HSL, указанного с помощью hsl (270deg, 50%, 75%) . Это средний фиолетовый цвет.
  • Контур прямоугольника используется для указания, что прямоугольник должен быть заключен в пунктирную линию толщиной четыре пикселя, имеющую более глубокий фиолетовый цвет ( rgb (110, 20, 120) ).
  • Цвет переднего плана (текста) задается установкой для свойства color значения hsl (0deg, 100%, 100%) . Это один из многих способов указать белый цвет.
  • Добавляем зеленую волнистую линию под текстом с text-decoration .
  • Наконец, к тексту добавляется немного тени с помощью text-shadow .Его параметр цвета установлен на черный .

Во многих ситуациях на вашем веб-сайте может потребоваться предоставить пользователю возможность выбрать цвет. Возможно, у вас есть настраиваемый пользовательский интерфейс или вы реализуете приложение для рисования. Возможно, у вас есть редактируемый текст, и вам нужно разрешить пользователю выбирать цвет текста. Или, возможно, ваше приложение позволяет пользователю назначать цвета папкам или элементам. Хотя исторически было необходимо реализовать собственное средство выбора цвета, теперь HTML обеспечивает поддержку браузеров, чтобы предоставить его для использования через элемент , используя «цвет» в качестве значения его атрибута типа .

Элемент представляет цвет только в шестнадцатеричной системе счисления, описанной выше.

Пример: выбор цвета

Давайте рассмотрим простой пример, в котором пользователь может выбрать цвет. По мере того как пользователь настраивает цвет, граница вокруг примера изменяется, чтобы отразить новый цвет. После завершения и выбора окончательного цвета отображается значение палитры цветов.

В macOS вы указываете, что завершили выбор цвета, закрыв окно выбора цвета.

HTML

HTML здесь создает поле, содержащее элемент управления выбора цвета (с меткой, созданной с использованием элемента ) и пустой элемент абзаца (

), в который мы выведем текст из нашего JavaScript. код.
CSS

CSS устанавливает размер блока и некоторые базовые стили для внешнего вида.Граница также установлена ​​с шириной 2 пикселя и недолговечным цветом границы, благодаря приведенному ниже JavaScript …

JavaScript

Сценарий здесь обрабатывает задачу обновления начального цвета границы, чтобы он соответствовал значению средства выбора цвета. Затем добавляются два обработчика событий для обработки ввода от элемента .

 пусть colorPicker = document.getElementById ("colorPicker"); let box = document.getElementById («коробка»); пусть output = document.getElementById («вывод»); box.style.borderColor = colorPicker.value; colorPicker.addEventListener ("ввод", функция (событие) < box.style.borderColor = event.target.value; >, ложный); colorPicker.addEventListener ("изменение", функция (событие) < output.innerText = "Цвет установлен на" + colorPicker.value + "."; >, ложный);

Вход Событие отправляется каждый раз, когда значение элемента изменяется; то есть каждый раз, когда пользователь настраивает цвет в палитре цветов.Каждый раз, когда приходит это событие, мы устанавливаем цвет границы поля в соответствии с текущим значением средства выбора цвета.

Событие изменения получено, когда значение палитры цветов завершено. Мы отвечаем установкой содержимого элемента

с идентификатором «output» на строку, описывающую окончательно выбранный цвет.

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

Выбор подходящих цветов

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

Базовый цвет

Первый шаг — выбрать базовый цвет . Это цвет, который каким-то образом определяет ваш веб-сайт или его тематику. Так же, как мы ассоциируем зеленый цвет с напитком Mountain Dew, а синий цвет можно представить в связи с небом или океаном, выбор подходящего базового цвета для представления вашего сайта — хорошее место для начала.Есть много способов выбрать базовый цвет; несколько идей включают:

  • Цвет, который естественно связан с темой вашего контента, например, существующий цвет, идентифицируемый с продуктом или идеей, или цвет, представляющий эмоцию, которую вы хотите передать.
  • Цвет, который получается из изображений, связанных с тем, о чем ваш контент. Если вы создаете веб-сайт о данном предмете или продукте, выберите цвет, который физически присутствует на этом предмете.
  • Просматривайте веб-сайты, на которых можно найти вдохновение во множестве существующих цветовых палитр и изображений.

Когда вы пытаетесь выбрать базовый цвет, вы можете обнаружить, что расширения браузера, позволяющие выбирать цвета из веб-содержимого, могут оказаться особенно удобными. Некоторые из них даже специально разработаны для помощи в такого рода работе. Например, веб-сайт ColorZilla предлагает расширение (Chrome / Firefox), которое предлагает инструмент «пипетка» для выбора цветов из Интернета. Он также может принимать средние значения цветов пикселей в областях различного размера или даже в выбранной области страницы.

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

Реализация палитры

После того, как вы определились со своим основным цветом, существует множество онлайн-инструментов, которые помогут вам создать палитру подходящих цветов для использования вместе с вашим основным цветом, применив теорию цвета к вашему базовому цвету для определения подходящих добавленных цветов. Многие из этих инструментов также поддерживают просмотр отфильтрованных цветов, чтобы вы могли увидеть, как они будут выглядеть для людей с различными формами дальтонизма.См. Раздел Цвет и доступность для краткого объяснения того, почему это важно.

Несколько примеров (все бесплатные на момент последнего пересмотра этого списка):

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

Обычно лучше использовать как можно меньшее количество цветов.Используя цвет для выделения, а не добавления цвета ко всему на странице, вы сохраняете удобочитаемость вашего контента, а цвета, которые вы действительно используете, имеют гораздо большее влияние.

Ресурсы по теории цвета

Полный обзор теории цвета выходит за рамки данной статьи, но доступно множество статей по теории цвета, а также курсы, которые можно найти в близлежащих школах и университетах. Пара полезных ресурсов по теории цвета:

Color Science (Khan Academy совместно с Pixar) Онлайн-курс, который знакомит с такими понятиями, как цвет, как он воспринимается и как использовать цвета для выражения идей.Представлено художниками и дизайнерами Pixar. Теория цвета в Википедии Статья в Википедии по теории цвета, которая содержит много полезной информации с технической точки зрения. На самом деле это не ресурс, который поможет вам с выбором цвета, но все же он полон полезной информации.

Цвет и специальные возможности

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

Вы должны провести хотя бы базовое исследование дальтонизма. Есть несколько видов; наиболее распространенной является красно-зеленая дальтонизм, из-за которой люди не могут различать красный и зеленый цвета. Есть и другие, от неспособности различать определенные цвета до полной неспособности вообще видеть цвет.

Самое важное правило: никогда не используйте цвет как единственный способ узнать что-то.Если, например, вы указываете успех или неудачу операции, изменяя цвет фигуры с белого на зеленый для успеха и красного на неудачу, пользователи с красно-зеленой дальтонизмом не смогут правильно использовать ваш сайт. Вместо этого, возможно, используйте и текст, и цвет вместе, чтобы каждый мог понять, что происходит.

Дополнительные сведения о дальтонизме см. В следующих статьях:

Пример оформления палитры

Рассмотрим быстрый пример выбора подходящей цветовой палитры для сайта.Представьте, что вы создаете веб-сайт для новой игры, действие которой происходит на планете Марс. Итак, давайте поищем в Google фотографии Марса. Там много хороших примеров марсианской окраски. Мы старательно избегаем мокапов и фотографий из фильмов. И мы решили использовать фотографию, сделанную одним из марсианских посадочных устройств, которые человечество припарковало на поверхности в течение последних нескольких десятилетий, поскольку действие игры происходит на поверхности планеты. Мы используем инструмент выбора цвета, чтобы выбрать образец цвета, который мы выбираем.

Используя пипетку, мы определяем понравившийся нам цвет и определяем, что речь идет о цвете # D79C7A , который является подходящим ржавым оранжево-красным цветом, который так стереотипен для поверхности Марса.

Выбрав основной цвет, нам нужно построить нашу палитру. Мы решили использовать Paletton, чтобы подобрать другие цвета, которые нам нужны. Открыв Paletton, видим:

Затем мы вводим шестнадцатеричный код нашего цвета ( D79C7A ) в поле «Base RGB» в нижнем левом углу инструмента:

Теперь мы видим монохроматическую палитру, основанную на цвете, который мы выбрали на фотографии Марса. Если по какой-то причине вам нужно много родственных цветов, они, скорее всего, подойдут.Но что нам действительно нужно, так это акцентный цвет. Что-то, что появится рядом с основным цветом. Чтобы найти это, мы нажимаем на переключатель «добавить дополнительные» под меню, которое позволяет вам выбрать тип палитры (в настоящее время «Монохроматическая»). Paletton вычисляет подходящий цвет акцента; щелчок по цвету акцента в правом нижнем углу говорит нам, что это цвет # 508D7C .

Если вам не нравится предложенный вам цвет, вы можете изменить цветовую схему, чтобы увидеть, что вам больше нравится.Например, если нам не нравится предложенный зеленовато-синий цвет, мы можем щелкнуть значок цветовой схемы Triad, который представляет нам следующее:

Серо-синий в правом верхнем углу выглядит неплохо. Нажав на нее, мы обнаружим, что это # 556E8D . Это будет использоваться в качестве основного цвета, чтобы использовать его экономно, чтобы выделить вещи, например, в заголовках или при выделении вкладок или других индикаторов на сайте:

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

Когда у вас есть эти цвета, вам, вероятно, все равно нужно будет выбрать подходящие нейтральные цвета. Обычная практика дизайна — попытаться найти золотую середину, где контраст будет достаточно, чтобы текст был четким и читаемым, но не настолько контрастным, чтобы он стал резким для глаз. Так или иначе легко зайти слишком далеко, поэтому обязательно получайте отзывы о своих цветах после того, как вы выбрали их и у вас есть доступные примеры их использования.Если контраст слишком низкий, ваш текст будет размываться фоном, оставляя его нечитаемым, но если ваш контраст слишком высок, пользователь может найти ваш сайт ярким и неприятным для просмотра.

Цвет, фон, контраст и печать

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

Если ваши фоновые цвета и изображения были тщательно выбраны и / или имеют решающее значение для полезности контента, вы можете использовать свойство CSS color-adjust , чтобы сообщить браузеру, что он не должен изменять внешний вид контента.

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

Вы можете установить цветовая коррекция на точный , чтобы сообщить браузеру, что элемент или элементы, на которых вы его используете, были разработаны специально для наилучшей работы с цветами и изображениями, оставленными как есть. С этим набором браузер не будет вмешиваться в внешний вид элемента и будет рисовать его, как указано в вашем CSS.

Примечание: Тем не менее, нет никакой гарантии, что color-adjust: точный приведет к тому, что ваш CSS будет использоваться точно так, как указано.Если браузер предоставляет пользовательские настройки для изменения вывода (например, флажок «Не печатать фон» в диалоговом окне печати), это переопределяет значение Color-Adjust .

Bulma: Бесплатная современная CSS-фреймворк с открытым исходным кодом на основе Flexbox

Кнопка — неотъемлемый элемент любого дизайна. Он должен выглядеть и вести себя как интерактивный элемент вашей страницы.

Кнопка Класс может использоваться на:

привязка

Цвета #

Кнопка доступна во всех различных цветах , определенных картой Sass $ colors .

белый Свет Темный Чернить Текст Призрак

Начальный Ссылка на сайт

Информация Успех Предупреждение Опасность

Теперь каждый цвет представлен в своей светлой версии .Просто добавьте модификатор is-light к модификатору цвета, чтобы применить облегченную версию кнопки.

Начальный Ссылка на сайт

Информация Успех Предупреждение Опасность
Размеры #

Кнопка доступна в 4 разных размерах:

В то время как размер по умолчанию — , нормальный, , модификатор is-normal существует на тот случай, если вам нужно сбросить кнопку до нормального размера.

Небольшой По умолчанию Обычный Середина Большой

Вы можете изменить размер нескольких кнопок одновременно, заключив их в родительский элемент buttons и применив один из 3 модификаторов:

  • пуговицы маленькие
  • пуговицы средние
  • кнопки большие

Вы можете изменить размер только подмножества кнопок , просто применив к ним класс-модификатор.
Например, если вы хотите, чтобы все кнопки были маленькими , но при этом одна из них все еще имеет нормальный размер , просто выполните следующие действия:

Небольшой Небольшой Небольшой Обычный Небольшой
Дисплеи #

Небольшой Обычный Середина Большой
Стили #
Изложенный

Обрисовал в общих чертах Обрисовал в общих чертах Обрисовал в общих чертах Обрисовал в общих чертах Обрисовал в общих чертах Обрисовал в общих чертах
Инвертированный (цвет текста становится цветом фона, и наоборот)

Перевернутый Перевернутый Перевернутый Перевернутый Перевернутый
Инвертировать контур (инвертировать цвет становится цветом текста и границы)

Инвертировать контур Инвертировать контур Инвертировать контур Инвертировать контур Инвертировать контур
Пуговицы с закругленными краями

Закругленный Закругленный Закругленный Закругленный Закругленный Закругленный
состояния #

Bulma стилизует различные состояний своих кнопок.Каждое состояние доступно как псевдокласс и класс CSS:

  • : зависает и зависает
  • : фокус и сфокусирован
  • : активен и активен

Это позволяет вам получить стиль определенного состояния, не вызывая его.

Обычный

Обычный Обычный Обычный Обычный Обычный Обычный Обычный
Ховер

Парение Парение Парение Парение Парение Парение Парение
Фокус

Фокус Фокус Фокус Фокус Фокус Фокус Фокус
Активный

Активный Активный Активный Активный Активный Активный Активный
Загрузка

Вы можете очень легко превратить кнопку в ее версию , загружающую , добавив модификатор is-loading .Вам даже не нужно удалять внутренний текст, что позволяет кнопке сохранять исходный размер между состояниями по умолчанию и состояниями загрузки.

Загрузка Загрузка Загрузка Загрузка Загрузка Загрузка Загрузка

Поскольку счетчик загрузки реализован с использованием псевдоэлемента :: after , он не поддерживается элементом . Вместо этого рассмотрите возможность использования .
Статический

Вы можете создать неинтерактивную кнопку с помощью модификатора is-static . Это полезно для выравнивания текстовой метки с вводом, например, при использовании надстроек форм.

  Статический
Отключено

Bulma поддерживает использование логического HTML-атрибута disabled Boolean, который не позволяет пользователю взаимодействовать с кнопкой.

Отключено Отключено Отключено Отключено Отключено Отключено Отключено

Класс is-disabled CSS объявлен устаревшим и заменен HTML-атрибутом disabled .Узнать больше
с иконками Font Awesome

Кнопки Bulma можно легко улучшить, добавив значок Font Awesome .Для достижения наилучших результатов оберните внутренний текст в отдельный элемент .

GitHub @jgthms Сохранить Удалить

GitHub GitHub GitHub GitHub

  
  GitHub   @jgthms   Сохранить   Удалить  
 
  GitHub   GitHub   GitHub   GitHub

Если кнопка содержит только значок, Bulma будет следить за тем, чтобы кнопка оставалась квадратной , независимо от размера кнопки или значка.

Группа кнопок #

Если вы хотите, чтобы сгруппировала кнопки вместе в одной строке , используйте модификатор is-grouped в контейнере поля :

  
 
 Сохранить изменения 
 
 Отмена 
 
 Удалить сообщение
Дополнения к кнопкам #

Если вы хотите использовать кнопки в качестве дополнений , используйте модификатор has-addons в поле Контейнер :

  
 
  Влево  
 
  Центр  
 
  Вправо
Группа кнопок с надстройками #

Вы также можете сгруппировать аддоны:

  
 
  Полужирный  
 
  Курсив  
 
  Подчеркнутый  
 
 
 
  Влево  
 
  Центр  
 
  Вправо
Список кнопок #

Вы можете создать список кнопок с помощью контейнера кнопок .

Сохранить изменения Сохранить и продолжить Отмена

Если список очень длинный , он автоматически будет перенесен на нескольких строк , при этом все кнопки будут равномерно распределены .

Один Два Три Четыре Пять Шесть Семь Восемь Девять Десять Одиннадцать Двенадцать 13 Четырнадцать Пятнадцать Шестнадцать Семнадцать 18 19 Двадцать

Вы можете соединить кнопки вместе с модификатором has-addons .

Используйте модификаторы по центру или по правому краю , чтобы изменить выравнивание .

да Может быть Нет

да Может быть Нет

Вы можете использовать любой класс модификатора на каждой кнопке, чтобы различать их.Не забудьте добавить модификатор is-selected , чтобы убедиться, что выбранная кнопка находится на выше своих братьев и сестер.

да Может быть Нет

да Может быть Нет

да Может быть Нет

Хотя этот список стиля кнопок может быть достигнут либо с помощью поля , сгруппированного , либо с новым классом кнопок , есть несколько отличий:

  • кнопок имеет более простую разметку
  • кнопок может содержать только кнопок элементов
  • Поле сгруппировано. может содержать любой тип для управления входов
  • Поле сгруппировано можно принудительно разместить все элементы управления в одной строке
  • с помощью поля сгруппировано , вы можете развернуть один из элементов управления

В принципе, если вам нужен только список из кнопок , рекомендуется использовать кнопок .Если вам нужно больше контроля над стилем и элементами, используйте группу форм.

Переменные #
 расчет (0.5em - # ) 
 $ пуговица-набивка горизонтальная
Похожие публикации:
  1. Где собирают mazda cx 5
  2. Как включить авто переводчик в opera gx
  3. Как проверить установлен ли java
  4. Как создать программу на python с интерфейсом

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *