Css выделение при наведении: меню — Выделение в навигационном при наведении на подменю на CSS

ПРИ НАВЕДЕНИИ ТЕКСТ СТАНОВИТСЯ СИНИМ — Вопрос от DEN4IK

• Вопросы
• Горячие
• Пользователи
• Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

• Вопросы новичков (16352)
• Платные услуги (2089)
• Вопросы по uKit (81)

Контент-модули

• Интернет-магазин (1430)
• Редактор страниц (236)
• Новости сайта (497)
• Каталоги (805)
• Блог (дневник) (111)
• Объявления (294)
• Фотоальбомы (432)
• Видео (255)
• Тесты (60)
• Форум (575)

Продвижение сайта

• Монетизация сайта (218)
• Раскрутка сайта (2446)

Управление сайтом

• Работа с аккаунтом (5291)
• Поиск по сайту (425)
• Меню сайта (1755)
• Домен для сайта (1527)
• Дизайн сайта (13441)
• Безопасность сайта (1463)
• Доп. функции (1304)

Доп. модули

• SEO-модуль (225)
• Опросы (62)
• Гостевая книга (98)
• Пользователи (431)
• Почтовые формы (318)
• Статистика сайта (196)
• Соц. постинг (212)
• Мини-чат (91)

Вебмастеру

• JavaScript и пр. (642)
• PHP и API на uCoz (233)
• SMS сервисы (10)
• Вопросы по Narod.
  ru (422)
• Софт для вебмастера (39)

…

Новинки DevTools (Chrome 98) — Chrome Developers

Переводы предоставлены Alena Batitskaya. Редактор — Maxim Salnikov.

Заинтересованы в улучшении DevTools? Зарегистрируйтесь и примите участие в исследовании пользовательского опыта здесь.

# Ранний доступ: дерево доступности на всю страницу (Full-page accessibility tree)

Новая функция Дерево доступности на всю страницу (Full-page accessibility tree) облегчает обзор полностраничного дерева доступности и помогает лучше понять, как ваш веб-контент работает со вспомогательными технологиями.

Во вкладке Элементы (Elements) откройте панель Специальные возможности (Accessibility) и поставьте галочку в чекбоксе Дерево доступности на всю страницу (Full-page accessibility tree). После этого перезагрузите DevTools, и вы увидите новую кнопку во вкладке Элементы (Elements).

Вы можете нажать на нее, чтобы включить режим Дерево доступности на всю страницу. Вы можете развернуть отдельные узлы или посмотреть подробности в панели Специальные возможности (Accessibility).

Выберите узел и переключитесь обратно в представление дерева DOM. Теперь выбран соответствующий узел DOM. Это отличный способ понять, как отображается узел DOM в дереве доступности. Это работает и для дерева DOM ⬌ Представление дерева доступности!

Раньше дерево доступности было доступно в панели Специальные возможности (Accessibility). Область обзора была ограниченной, можно было исследовать только один элемент и его потомков.

Наша команда все еще активно работает над этой новой функцией. Мы ждем ваши отзывы для дальнейших улучшений.

Задача в трекере Chromium: 887173

# Явное отображение изменений на вкладке Изменения (Changes)

Изменения кода на вкладке Изменения (Changes) автоматически форматируются.

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

Задачи в трекере Chromium: 1238818, 1268754 , 1086491

# Устанавливайте более длительный тайм-аут для записи поведения пользователя

Теперь вы можете настроить параметр Timeout во вкладке Recorder для всех шагов или конкретного шага. Это особенно полезно для страниц с медленными сетевыми запросами и длительной анимацией.

Например, мы записали поведение пользователя на этой демо-странице при загрузке и клике на пункт меню. Однако загрузка пунктов меню происходит медленно (6 секунд). Воспроизведение replay этой записи не удалось, поскольку она превышает 5 секунд (тайм-аут по умолчанию).

Мы можем использовать новую настройку Timeout чтобы исправить это. Откройте детали шага, в котором мы нажимаем на пункт меню. Редактируйте шаг, нажав кнопку Add timeout и установите значение 6000 миллисекунд (равно 6 секундам).

По желанию вы можете настроить Timeout для всех шагов в меню Replay settings. Раскройте настройки Replay settings и измените значение Timeout.

Задача в трекере Chromium: 1257499

# Убедитесь, что ваши страницы кешируются с помощью вкладки Возвратный кеш (Back/forward cache)

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

Новая вкладка Возвратный кеш (Back/forward cache) поможет протестировать ваши страницы, чтобы убедиться, что они оптимизированы для возвратного кеша, или выявить проблемы, которые этому препятствуют.

Чтобы протестировать конкретную страницу, перейдите на неё в Chrome и затем в DevTools откройте Приложение (Application) > Возвратный кеш (Back-forward Cache). Далее, нажмите кнопку Test back/forward cache, и DevTools попытается произвести переход на предыдущую страницу и обратно, чтобы проверить, может ли страница быть восстановлена из кеша.

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

Задача в трекере Chromium: 1110752

# Новый фильтр в панели Свойства (Properties)

Если вы хотите сфокусироваться на конкретном свойстве в панели Свойства (Properties), вы теперь можете ввести название нужного свойства или его значение в новом текстовом поле Фильтр (Filter).

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

Эти нововведения позволят вам быстрее добраться до объектов, которые вам интересны, и тем самым повысить вашу продуктивность!

Задача в трекере Chromium: 1269674

# Эмулируйте CSS-медиафункцию forced-colors

Медиафункция forced-colors в CSS используется для определения того, активировал ли пользовательский агент режим принудительного выбора цветов в браузере (например, режим высокой контрастности в Windows). В этом режиме к странице применяется ограниченная пользовательская палитра.

Откройте пункт Выполнить команду, выполните команду Показать «Отрисовка» (Show Rendering) и затем установите значение Эмулировать медиафункцию CSS forced-colors (Emulate CSS media feature forced-colors) в выпадающем меню.

Задача в трекере Chromium: 1130859

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

Теперь вы можете открыть пункт Выполнить команду и запустить команду Показывать линейки при наведении курсора мыши (Show rulers on hover). Линейки на странице облегчают измерение ширины и высоты элемента.

Ранее линейки на странице можно было включить только с помощью чекбокса Настройки (Settings) > Показывать линейки.

Задача в трекере Chromium: 1270562

# Поддержка значений

row-reverse и column-reverse в редакторе флексбоксов

В редактор флексбоксов добавлены две новые кнопки для поддержки значений row-reverse и column-reverse в свойстве flex-direction.

Задача в трекере Chromium: 1263866

# Новые сочетания клавиш для повторения запроса XHR и расширения всех результатов поиска

# Шорткаты для повторения запроса XHR в панели Сеть (Network)

Выберите XHR-запрос во вкладке Сеть (Network) и нажмите R на клавиатуре, чтобы повторить запрос XHR. Ранее вы могли воспроизвести XHR только через контекстное меню (правый клик мыши > Повторить запрос XHR)

Задача в трекере Chromium: 1050021

# Шорткат для расширение всех результатов поиска

На вкладке Поиск (Search) добавлено новое сочетание клавищ, позволяющее разворачивать и сворачивать все результаты поиска. Ранее результаты поиска можно было разворачивать и сворачивать, щелкая только по одному файлу за раз.

Откройте вкладку, нажав последовательно Esc > три точки > Поиск (Search). Введите искомую строку (например, function) и нажмите Enter, чтобы увидеть список с результатами поиска. Переместите фокус на результаты поиска и нажмите следующее сочетания клавиш, чтобы развернуть/свернуть результаты поиска:

• Windows / Linux — Ctrl + Shift + { или }
• MacOS — Cmd + Options + { или }

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

Задача в трекере Chromium: 1255073

# Lighthouse 9 во вкладке Lighthouse

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

Неуникальный идентификатор элемента — распространенная проблема доступности. Например, id, на который ссылается атрибут aria-labelledby, используется на [нескольких элементах] (https://web.dev/duplicate-id-aria/).

Перейдите на страницу What’s new in Lighthouse 9.0 для получения более подробной информации об обновлении.

Задача в трекере Chromium: 772558

# Улучшенная вкладка Источники (Sources)

Множество улучшений стабильности в панели Источники за счёт перехода на CodeMirror 6. Вот несколько заметных улучшений:

• Значительно ускорилось открытие больших файлов (например, WASM, JavaScript)
• Больше никакой случайной прокрутки при пошаговом выполнении кода
• Улучшены предложения автозаполнения для редактируемых источников (например, сниппеты, локальное переопределение)

Задача в трекере Chromium: 1241848

# Другие важные моменты

Вот несколько заслуживающих внимания исправлений в этом выпуске:

• Правильное отображение графика водопада сетевых запросов. Ранее стили был некорректны. (1275501)
• Выделение кода было неисправно при поиске в документах с очень длинными строками во вкладке Источники (Sources). Теперь это исправлено. (1275496)
• Больше не дублируется вкладка Полезная нагрузка (Payload) в сетевых запросах. (1273972)
• Исправлено отсутствие деталей сдвига макета в разделе Сводка (Summary) во вкладке Производительность (Performance). (1259606)
• Поддержка произвольных символов (например, ,, .) в запросах поиска на вкладке Сеть. (1267196)

# [Эксперимент] Эндпоинты во вкладке Reporting API

Чтобы включить эту экспериментальную функцию поставьте голочку в чекбоксе рядом с пунктом Enable Reporting API panel in the Application panel в Настройки (Settings) > Эксперименты (Experiments).

Экспериментальная панель Reporting API была представлена в Chrome 96, чтобы помочь вам отслеживать созданные на странице отчеты и их статус.

Секция Endpoints теперь доступна. Она показывает все эндпоинты, настроенные в заголовке Reporting-Endpoints.

Научитесь пользоваться Reporting API для отслеживания проблем безопасности, устаревших вызовов API и т.д.

Задача в трекере Chromium: 1200732

# Загрузите предварительные версии браузеров

Рассмотрите возможность использования Chrome Canary, Dev или Beta в качестве основного браузера для разработки. Они дают вам доступ к последним функциям DevTools, возможность протестировать новейшие API веб-платформы и найти проблемы на вашем сайте раньше, чем это сделают пользователи!

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

• Отправьте нам предложение или отзыв через crbug.com.
• Сообщите о проблеме, связанной с DevTools, используя Больше опций (More options)     > Справка (Help) > Сообщить о проблемах в инструментах разработчика (Report a DevTools issues) в DevTools.
• Твитните на @ChromeDevTools.
• Оставьте комментарии под What’s new in DevTools видео на YouTube.

# Больше новинок DevTools

Чтобы увидеть полный список обновлений, перейдите на английскую версию по ссылке What’s New In DevTools. Ниже перечислены материалы, переведенные на русский язык.

# Chrome 105

• Пошаговое воспроизведение в Recorder
• Поддержка события mouse over во вкладке Recorder
• Самое крупное существенное отображение (LCP) во вкладке Performance Insights
• Определение миганий текста (FOIT, FOUT) как потенциальных первопричин сдвигов раскладки
• Обработчик протоколов в панели Манифест
• Значок верхнего слоя во вкладке Элементы
• Прикрепление сведений для отладки Wasm во время исполнения
• Поддержка редактирования во время отладки
• Отображение и редактирование директивы @scope в панели Стили
• Улучшения карты источников
• Другие важные моменты

# Chrome 104

• Перезапуск фрейма во время отладки
• Опции замедленного воспроизведения во вкладке Recorder
• Создание расширений для вкладки Recorder
• Группировка по Авторским (Authored) и Развёрнутым (Deployed) файлам во вкладке Источники (Sources)
• Новый трек User Timings во вкладке Performance insights
• Отображение элемента с назначенным слотом
• Симуляция аппаратного параллелизма при записи Производительности (Performance)
• Предпросмотр нецветовых значений при автодополнении переменных CSS
• Определение блокирующего фрейма на панели Возвратного кэша (Back/forward cache)
• Улучшены подсказки автодополнения для объектов JavaScript
• Улучшение карт источников
• Другие важные моменты —>

# Chrome 103

• Запись событий двойного клика и клика правой кнопкой мыши во вкладке Recorder
• Новые режимы Анализа временного диапазона (timespan) и Сводки (snapshot) во вкладке Lighthouse
• Улучшено управление масштабированием во вкладке Performance Insights
• Подтверждение удаления записи производительности
• Изменение порядка панелей во вкладке Элементы (Elements)
• Выбор цвета вне браузера
• Улучшен предварительный просмотр значений в строке при отладке
• Поддержка больших объектов BLOB для виртуальных аутентификаторов
• Новые сочетания клавиш во вкладке Источники (Sources)
• Улучшения карты исходников

# Chrome 102

• Ранний доступ: Новая панель анализа производительности
• Новые горячие клавиши для эмуляции светлой и тёмной темы
• Улучшение безопасности на вкладке Предварительный просмотр (Preview) панели Сеть (Network)
• Улучшена перезагрузка в точке останова
• Обновления консоли
• Отмена записи пользовательского сценария в самом начале
• Отображение наследуемых псевдоэлементов выделения в панели Стили (Styles)
• Другие важные моменты
• [Эксперимент] Копирование изменений в CSS
• [Эксперимент] Выбор цвета вне браузера

# Chrome 101

• Импорт и экспорт записей действий пользователя в виде JSON файла
• Просмотр каскадных слоёв во вкладке Стили (Styles)
• Поддержка функции цвета hwb()
• Улучшено отображение приватных свойств
• Другие важные моменты
• [Эксперимент] Новые режимы временного промежутка и сводки во вкладке Lighthouse

# Chrome 100

• Просмотр и изменение директивы @supports в панели Стилей (Styles)
• Дефолтная поддержка распространённых селекторов
• Кастомизация селектора записи
• Переименование записи
• Предпросмотр свойств класса/функции при наведении курсора
• Частично представленные фреймы во вкладке Производительность (Performance)
• Другие важные моменты

# Chrome 99

• Троттлинг запросов WebSocket
• Новая панель Reporting API во вкладке Приложение (Application)
• Поддержка ожидания момента, когда элемент становится видимым/кликабельным во вкладке Recorder
• Улучшенный внешний вид, форматирование и фильтрация в консоли
• Отладка расширений Chrome с помощью карта источников
• Улучшено дерево папок источников во вкладке Источники (Sources)
• Отображение исходных файлов воркеров во вкладке Источники (Sources)
• Обновление автоматической тёмной темы Chrome
• Удобные сенсорные палитра цветов и разделитель панелей
• Другие важные моменты

# Chrome 98

• Ранний доступ: дерево доступности на всю страницу (Full-page accessibility tree)
• Явное отображение изменений на вкладке Изменения (Changes)
• Устанавливайте более длительный тайм-аут для записи поведения пользователя
• Убедитесь, что ваши страницы кешируются с помощью вкладки Возвратный кеш (Back/forward cache)
• Новый фильтр в панели Свойства (Properties)
• Эмулируйте CSS-медиафункцию forced-colors
• Показ линейки при наведении курсора мыши
• Поддержка значений row-reverse и column-reverse в редакторе флексбоксов
• Новые сочетания клавиш для повторения запроса XHR и расширения всех результатов поиска
• Lighthouse 9 во вкладке Lighthouse
• Улучшенная вкладка Источники (Sources)
• Другие важные моменты
• [Эксперимент] Эндпоинты во вкладке Reporting API

# Chrome 97

• Ранний доступ: новая вкладка Recorder
• Обновлён список устройств в панели инструментов устройства (Device Mode)
• Автодополнение в режиме Редактировать как HTML (Edit as HTML)
• Улучшен процесс отладки кода
• Синхронизация настроек DevTools между устройствами

# Chrome 96

• Ранний доступ: Новая вкладка Обзор CSS
• Восстановлен и улучшен опыт редактирования и копирования длины в CSS
• Эмуляция CSS-медиафункции prefers-contrast
• Эмулируйте функцию создания автоматической тёмной темы в Chrome
• Копируйте объявления как JavaScript в панели Стилей (Styles)
• Новая вкладка Полезная нагрузка (Payload) на вкладке Сеть
• Улучшенное отображение свойств в панели Свойства (Properties)
• Опция для скрытия ошибок CORS в Консоли
• Правильный предварительный просмотр и оценка объектов Intl в Консоли
• Консистентные асинхронные трассировки стека
• Сохранение боковой колонки в Консоли
• Устаревшая панель Кэш приложения на вкладке Приложение
• [Эксперимент] Новая панель Reporting API на вкладке Приложение

# Chrome 95

• Новый инструмент выбора единиц измерения длины в CSS
• Скрытие задач во вкладке Проблемы (Issues)
• Улучшенное отображение свойств
• Lighthouse 8. 4 во вкладке Lighthouse
• Сортировка снипетов во вкладке Источники (Sources)
• Новые ссылки на переводы обновлений и сообщение об ошибке в переводе
• Улучшенный UI для командного меню в DevTools

# Chrome 94

• Пользуйтесь DevTools на своём языке
• Новые устройства Nest Hub в списке девайсов
• Информация об origin trials в свойствах фрейма
• Новый значок для выражений от контейнера
• Новый чекбокс для инвертирования фильтров сети
• Предстоящее упразднение боковой колонки Console
• Отображение необработанных заголовков Set-Cookie во вкладках Issues и Network
• Последовательное отображение нативных аксессоров как собственных свойств в консоли
• Правильная трассировка стека ошибок для встроенных скриптов с #sourceURL
• Изменение формата цвета в панели Computed
• Замена кастомных всплывающих подсказок на нативные HTML-подсказки
• [Эксперимент] Скрытие задач во вкладке Issues

# Chrome 93

• Редактируемые выражения от контейнера в панели Styles
• Предварительный просмотр веб-бандлов во вкладке Network
• Отладка Attribution Reporting API
• Улучшенная работа со строками в консоли
• Улучшенная отладка CORS
• Lighthouse 8. 1
• Отображение new_note_url в панели Manifest
• Исправление соответствия селекторам CSS
• Форматирование ответов JSON во вкладке Network

Поведение курсора при наведении на текст — CSS-LIVE

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

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

При определении значения «text» для свойства cursor спецификация поясняет: «Указывает текст, который может быть выделен. Чаще всего отображается, как l-образный текстовый курсор.»

Но, как вы наверное знаете, это может быть переопределёно в CSS, поэтому вы можете отображать курсор, какой захотите и в любое время. Заметьте, например, на сайте SitePoint с помощью CSS переопределено поведение курсора, который находится над обычным текстом.

На данный момент я не могу припомнить другой сайт, где встречается курсор, который при наведении на текст не меняет своего поведения. Единственное, я помню, что когда на «A List Apart» был редизайн сайта, они изначально сделали точно так же, как сейчас мы наблюдаем на SitePoint, т.е. ипользовали курсов в виде стрелки (по умолчанию), но через некоторое время вернули поведение курсора назад, изменив его на курсор по умолчанию для текстов (в виде палочки)

Какое поведение правильное?

Если вы обратитесь к спецификации, то увидите, что «текстовый» курсор (вертикальный I-образный текстовый курсор) является правильным. И, если вы захотите узнать, к какому курсору привыкли люди, то вы получите точно такой же ответ, как и в спецификации — «текстовый» курсор.

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

Но я не могу отделаться от мысли: не идет ли это вразрез с поведением обычных приложений?

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

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

Заметьте, что на странице настроек в браузере Chrome (которая является простой веб-страницей, внутри которой вы можете проинспектировать элемент и посмотреть код) переопределено дефолтное поведение при помощи значения «default» свойства cursor, когда курсор находится над текстом.

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

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

Дополнение: Как было отмечено в комментариях, многие заметили, что родные приложения используют I-образный текстовый курсор не только для редактируемого, но также и для любого выделяемого текста. Это имеет место в большинстве случаев. Лично я думаю, что I-образный текстовый курсор больше подходит в качестве индикатора «вставки текста» или «редактирования этого текста», чем индикатор выбора. И так же я считаю, что есть «родные» приложения, включающие выделяемый текст, в которых курсор является простой дефолтной стрекой-указателем. Но это не очень частая вещь, так что я в какой-то мере снимаю свои аргументы насчет обычных приложений, если рассматривать I-образный курсор как универсальный индикатор для выделяемого и редактируемого текста.

Заключение

Я не знаю исторической причины, по которой браузеры используют «текстовый» курсор на нередактируемом тексте. Некоторые сайты, такие как SitePoint, признали, что в этом отношении, может быть, было бы лучше следовать общим правилам.

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

Что вы думаете? Браузеры всё время ошибались? Я не думаю, что мы сможем здесь повлиять на что-либо, но я полагаю, что если мы дождемся момента, когда используемые браузеры будут автообновляться, производители могли бы договориться использовать более интуитивное родное поведение в этом отношении.

Охх, и приношу извинения за все анимированные курсоры. Уверен, они ни у кого не вызвали раздражения 🙂

Оригинал статьи и автор

P.S. Это тоже может быть интересно:

Быстрое выделение в Photoshop

Руководство пользователя Отмена

Поиск

Последнее обновление Aug 18, 2022 03:27:05 AM GMT

1. Руководство пользователя Photoshop
2. Введение в Photoshop
   1. Мечтайте об этом. Сделайте это.
   2. Новые возможности Photoshop
   3. Редактирование первой фотографии
   4. Создание документов
   5. Photoshop | Часто задаваемые вопросы
   6. Системные требования Photoshop
   7. Перенос наборов настроек, операций и настроек
   8. Знакомство с Photoshop
3. Photoshop и другие продукты и услуги Adobe
   1. Работа с графическим объектом Illustrator в Photoshop
   2. Работа с файлами Photoshop в InDesign
      
   3. Материалы Substance 3D для Photoshop
   4. Photoshop и Adobe Stock
   5. Работа со встроенным расширением Capture в Photoshop
   6. Библиотеки Creative Cloud Libraries
   7. Библиотеки Creative Cloud в Photoshop
   8. Работа в Photoshop с использованием Touch Bar
   9. Сетка и направляющие
   10. Создание операций
   11. Отмена и история операций
4. Photoshop на iPad
   1. Photoshop на iPad | Общие вопросы
   2. Знакомство с рабочей средой
   3. Системные требования | Photoshop на iPad
   4. Создание, открытие и экспорт документов
   5. Добавление фотографий
   6. Работа со слоями
   7. Рисование и раскрашивание кистями
   8. Выделение участков и добавление масок
   9. Ретуширование композиций
   10. Работа с корректирующими слоями
   11. Настройка тональности композиции с помощью слоя «Кривые»
   12. Применение операций трансформирования
   13. Обрезка и поворот композиций
   14. Поворот, панорамирование, масштабирование и восстановление холста
   15. Работа с текстовыми слоями
   16. Работа с Photoshop и Lightroom
   17. Получение отсутствующих шрифтов в Photoshop на iPad
   18. Японский текст в Photoshop на iPad
   19. Управление параметрами приложения
   20. Сенсорные ярлыки и жесты
   21. Комбинации клавиш
   22. Изменение размера изображения
   23. Прямая трансляция творческого процесса в Photoshop на iPad
   24. Исправление недостатков с помощью восстанавливающей кисти
   25. Создание кистей в Capture и их использование в Photoshop
   26. Работа с файлами Camera Raw
   27. Создание и использование смарт-объектов
   28. Коррекция экспозиции изображений с помощью инструментов «Осветлитель» и «Затемнитель»
5. Бета-версия веб-приложения Photoshop
   1. Часто задаваемые вопросы | Бета-версия веб-приложения Photoshop 
   2. Общие сведения о рабочей среде
   3. Системные требования | Бета-версия веб-приложения Photoshop
   4. Комбинации клавиш | Бета-версия веб-приложения Photoshop
   5. Поддерживаемые форматы файлов | Бета-вервия веб-приложения Photoshop
   6. Открытие облачных документов и работа с ними
   7. Совместная работа с заинтересованными сторонами
   8. Ограниченные возможности редактирования облачных документов
6. Облачные документы
   1. Облачные документы Photoshop | Часто задаваемые вопросы
   2. Облачные документы Photoshop | Вопросы о рабочем процессе
   3. Работа с облачными документами и управление ими в Photoshop
   4. Обновление облачного хранилища для Photoshop
   5. Не удается создать или сохранить облачный документ
   6. Устранение ошибок с облачными документами Photoshop
   7. Сбор журналов синхронизации облачных документов
   8. Общий доступ к облачным документам и их редактирование
   9. Общий доступ к файлам и комментирование в приложении
7. Рабочая среда
   1. Основные сведения о рабочей среде
   2. Более быстрое обучение благодаря панели «Новые возможности» в Photoshop
   3. Создание документов
   4. Работа в Photoshop с использованием Touch Bar
   5. Галерея инструментов
   6. Установки производительности
   7. Использование инструментов
   8. Сенсорные жесты
   9. Возможности работы с сенсорными жестами и настраиваемые рабочие среды
   10. Обзорные версии технологии
   11. Метаданные и комментарии
   12. Комбинации клавиш по умолчанию
   13. Возможности работы с сенсорными жестами и настраиваемые рабочие среды
   14. Помещение изображений Photoshop в другие приложения
   15. Установки
   16. Комбинации клавиш по умолчанию
   17. Линейки
   18. Отображение или скрытие непечатных вспомогательных элементов
   19. Указание колонок для изображения
   20. Отмена и история операций
   21. Панели и меню
   22. Помещение файлов
   23. Позиционирование элементов с привязкой
   24. Позиционирование с помощью инструмента «Линейка»
   25. Наборы настроек
   26. Настройка комбинаций клавиш
   27. Сетка и направляющие
8. Разработка содержимого для Интернета, экрана и приложений
   1. Photoshop для дизайна
   2. Монтажные области
   3. Просмотр на устройстве
   4. Копирование CSS из слоев
   5. Разделение веб-страниц на фрагменты
   6. Параметры HTML для фрагментов
   7. Изменение компоновки фрагментов
   8. Работа с веб-графикой
   9. Создание веб-фотогалерей
9. Основные сведения об изображениях и работе с цветом
   1. Изменение размера изображений
   2. Работа с растровыми и векторными изображениями
   3. Размер и разрешение изображения
   4. Импорт изображений из камер и сканеров
   5. Создание, открытие и импорт изображений
   6. Просмотр изображений
   7. Ошибка «Недопустимый маркер JPEG» | Открытие изображений
   8. Просмотр нескольких изображений
   9. Настройка палитр цветов и образцов цвета
   10. HDR-изображения
   11. Подбор цветов на изображении
   12. Преобразование между цветовыми режимами
   13. Цветовые режимы
   14. Стирание фрагментов изображения
   15. Режимы наложения
   16. Выбор цветов
   17. Внесение изменений в таблицы индексированных цветов
   18. Информация об изображениях
   19. Фильтры искажения недоступны
   20. Сведения о цвете
   21. Цветные и монохромные коррекции с помощью каналов
   22. Выбор цветов на панелях «Цвет» и «Образцы»
   23. Образец
   24. Цветовой режим (или режим изображения)
   25. Цветовой оттенок
   26. Добавление изменения цветового режима в операцию
   27. Добавление образцов из CSS- и SVG-файлов HTML
   28. Битовая глубина и установки
10. Слои
    1. Основные сведения о слоях
    2. Обратимое редактирование
    3. Создание слоев и групп и управление ими
    4. Выделение, группировка и связывание слоев
    5. Помещение изображений в кадры
    6. Непрозрачность и наложение слоев
    7. Слои-маски
    8. Применение смарт-фильтров
    9. Композиции слоев
    10. Перемещение, упорядочение и блокировка слоев
    11. Маскирование слоев при помощи векторных масок
    12. Управление слоями и группами
    13. Эффекты и стили слоев
    14. Редактирование слоев-масок
    15. Извлечение ресурсов
    16. Отображение слоев с помощью обтравочных масок
    17. Формирование графических ресурсов из слоев
    18. Работа со смарт-объектами
    19. Режимы наложения
    20. Объединение нескольких фрагментов в одно изображение
    21. Объединение изображений с помощью функции «Автоналожение слоев»
    22. Выравнивание и распределение слоев
    23. Копирование CSS из слоев
    24. Загрузка выделенных областей на основе границ слоя или слоя-маски
    25. Просвечивание для отображения содержимого других слоев
    26. Слой
    27. Сведение
    28. Совмещенные изображения
    29. Фон
11. Выделения
    1. Рабочая среда «Выделение и маска»
    2. Быстрое выделение областей
    3. Начало работы с выделениями
    4. Выделение при помощи группы инструментов «Область»
    5. Выделение при помощи инструментов группы «Лассо»
    6. Выбор цветового диапазона в изображении
    7. Настройка выделения пикселей
    8. Преобразование между контурами и границами выделенной области
    9. Основы работы с каналами
    10. Перемещение, копирование и удаление выделенных пикселей
    11. Создание временной быстрой маски
    12. Сохранение выделенных областей и масок альфа-каналов
    13. Выбор областей фокусировки в изображении
    14. Дублирование, разделение и объединение каналов
    15. Вычисление каналов
    16. Выделение
    17. Ограничительная рамка
12. Коррекции изображений
    1. Деформация перспективы
    2. Уменьшение размытия в результате движения камеры
    3. Примеры использования инструмента «Восстанавливающая кисть»
    4. Экспорт таблиц поиска цвета
    5. Корректировка резкости и размытия изображения
    6. Общие сведения о цветокоррекции
    7. Применение настройки «Яркость/Контрастность»
    8. Коррекция деталей в тенях и на светлых участках
    9. Корректировка «Уровни»
    10. Коррекция тона и насыщенности
    11. Коррекция сочности
    12. Настройка насыщенности цвета в областях изображения
    13. Быстрая коррекция тона
    14. Применение специальных цветовых эффектов к изображениям
    15. Улучшение изображения при помощи корректировки цветового баланса
    16. HDR-изображения
    17. Просмотр гистограмм и значений пикселей
    18. Подбор цветов на изображении
    19. Кадрирование и выпрямление фотографий
    20. Преобразование цветного изображения в черно-белое
    21. Корректирующие слои и слои-заливки
    22. Корректировка «Кривые»
    23. Режимы наложения
    24. Целевая подготовка изображений для печатной машины
    25. Коррекция цвета и тона с помощью пипеток «Уровни» и «Кривые»
    26. Коррекция экспозиции и тонирования HDR
    27. Фильтр
    28. Размытие
    29. Осветление или затемнение областей изображения
    30. Избирательная корректировка цвета
    31. Замена цветов объекта
13. Adobe Camera Raw
    1. Системные требования Camera Raw
    2. Новые возможности Camera Raw
    3. Введение в Camera Raw
    4. Создание панорам
    5. Поддерживаемые объективы
    6. Виньетирование, зернистость и удаление дымки в Camera Raw
    7. Комбинации клавиш по умолчанию
    8. Автоматическая коррекция перспективы в Camera Raw
    9. Обратимое редактирование в Camera Raw
    10. Инструмент «Радиальный фильтр» в Camera Raw
    11. Управление настройками Camera Raw
    12. Обработка, сохранение и открытие изображений в Camera Raw
    13. Совершенствование изображений с улучшенным инструментом «Удаление точек» в Camera Raw
    14. Поворот, обрезка и изменение изображений
    15. Корректировка цветопередачи в Camera Raw
    16. Краткий обзор функций | Adobe Camera Raw | Выпуски за 2018 г.
    17. Обзор новых возможностей
    18. Версии обработки в Camera Raw
    19. Внесение локальных корректировок в Camera Raw
14. Исправление и восстановление изображений
    1. Удаление объектов с фотографий с помощью функции «Заливка с учетом содержимого»
    2. Заплатка и перемещение с учетом содержимого
    3. Ретуширование и исправление фотографий
    4. Коррекция искажений изображения и шума
    5. Основные этапы устранения неполадок для решения большинства проблем
15. Преобразование изображений
    1. Трансформирование объектов
    2. Настройка кадрирования, поворотов и холста
    3. Кадрирование и выпрямление фотографий
    4. Создание и редактирование панорамных изображений
    5. Деформация изображений, фигур и контуров
    6. Перспектива
    7. Использование фильтра «Пластика»
    8. Масштаб с учетом содержимого
    9. Трансформирование изображений, фигур и контуров
    10. Деформация
    11. Трансформирование
    12. Панорама
16. Рисование и живопись
    1. Рисование симметричных орнаментов
    2. Варианты рисования прямоугольника и изменения обводки
    3. Сведения о рисовании
    4. Рисование и редактирование фигур
    5. Инструменты рисования красками
    6. Создание и изменение кистей
    7. Режимы наложения
    8. Добавление цвета в контуры
    9. Редактирование контуров
    10. Рисование с помощью микс-кисти
    11. Наборы настроек кистей
    12. Градиенты
    13. Градиентная интерполяция
    14. Заливка и обводка выделенных областей, слоев и контуров
    15. Рисование с помощью группы инструментов «Перо»
    16. Создание узоров
    17. Создание узора с помощью фильтра «Конструктор узоров»
    18. Управление контурами
    19. Управление библиотеками узоров и наборами настроек
    20. Рисование при помощи графического планшета
    21. Создание текстурированных кистей
    22. Добавление динамических элементов к кистям
    23. Градиент
    24. Рисование стилизованных обводок с помощью архивной художественной кисти
    25. Рисование с помощью узора
    26. Синхронизация наборов настроек на нескольких устройствах
17. Текст
    1. Добавление и редактирование текста
       
    2. Универсальный текстовый редактор
    3. Работа со шрифтами OpenType SVG
    4. Форматирование символов
    5. Форматирование абзацев
    6. Создание эффектов текста
    7. Редактирование текста
    8. Интерлиньяж и межбуквенные интервалы
    9. Шрифт для арабского языка и иврита
    10. Шрифты
    11. Поиск и устранение неполадок, связанных со шрифтами
    12. Азиатский текст
    13. Создание текста
    14. Ошибка Text Engine при использовании инструмента «Текст» в Photoshop | Windows 8
18. Видео и анимация
    1. Видеомонтаж в Photoshop
    2. Редактирование слоев видео и анимации
    3. Общие сведения о видео и анимации
    4. Предварительный просмотр видео и анимации
    5. Рисование кадров в видеослоях
    6. Импорт видеофайлов и последовательностей изображений
    7. Создание анимации кадров
    8. 3D-анимация Creative Cloud (предварительная версия)
    9. Создание анимаций по временной шкале
    10. Создание изображений для видео
19. Фильтры и эффекты
    1. Использование фильтра «Пластика»
    2. Использование эффектов группы «Галерея размытия»
    3. Основные сведения о фильтрах
    4. Справочник по эффектам фильтров
    5. Добавление эффектов освещения
    6. Использование фильтра «Адаптивный широкий угол»
    7. Фильтр «Масляная краска»
    8. Эффекты и стили слоев
    9. Применение определенных фильтров
    10. Растушевка областей изображения
20. Сохранение и экспорт
    1. Сохранение файлов в Photoshop
       
    2. Экспорт файлов в Photoshop
    3. Поддерживаемые форматы файлов
       
    4. Сохранение файлов в других графических форматах
    5. Перемещение проектов между Photoshop и Illustrator
    6. Сохранение и экспорт видео и анимации
    7. Сохранение файлов PDF
    8. Защита авторских прав Digimarc
21. Печать
    1. Печать 3D-объектов
    2. Печать через Photoshop
    3. Печать и управление цветом
    4. Контрольные листы и PDF-презентации
    5. Печать фотографий в новом макете раскладки изображений
    6. Печать плашечных цветов
    7. Дуплексы
    8. Печать изображений на печатной машине
    9. Улучшение цветной печати в Photoshop
    10. Устранение неполадок при печати | Photoshop
22. Автоматизация
    1. Создание операций
    2. Создание изображений, управляемых данными
    3. Сценарии
    4. Обработка пакета файлов
    5. Воспроизведение операций и управление ими
    6. Добавление условных операций
    7. Сведения об операциях и панели «Операции»
    8. Запись инструментов в операциях
    9. Добавление изменения цветового режима в операцию
    10. Набор средств разработки пользовательского интерфейса Photoshop для внешних модулей и сценариев
23. Управление цветом
    1. Основные сведения об управлении цветом
    2. Обеспечение точной цветопередачи
    3. Настройки цвета
    4. Работа с цветовыми профилями
    5. Управление цветом документов для просмотра в Интернете
    6. Управление цветом при печати документов
    7. Управление цветом импортированных изображений
    8. Выполнение цветопробы
24. Подлинность контента
    1. Подробнее об учетных данных для содержимого
    2. Идентичность и происхождение токенов NFT
    3. Подключение учетных записей для творческой атрибуции
25. 3D-объекты и технические изображения
    1. 3D в Photoshop | Распространенные вопросы об упраздненных 3D-функциях
    2. 3D-анимация Creative Cloud (предварительная версия)
    3. Печать 3D-объектов
    4. 3D-рисование
    5. Усовершенствование панели «3D» | Photoshop
    6. Основные понятия и инструменты для работы с 3D-графикой
    7. Рендеринг и сохранение 3D-объектов
    8. Создание 3D-объектов и анимаций
    9. Стеки изображений
    10. Процесс работы с 3D-графикой
    11. Измерения
    12. Файлы формата DICOM
    13. Photoshop и MATLAB
    14. Подсчет объектов на изображении
    15. Объединение и преобразование 3D-объектов
    16. Редактирование 3D-текстур
    17. Коррекция экспозиции и тонирования HDR
    18. Настройки панели «3D»

Используйте инструменты «Выделение объектов», «Быстрое выделение» или «Волшебная палочка», чтобы быстро выделять области в Photoshop.

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

Обновите Photoshop

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

Вызвать инструмент Выделение объектов можно из следующих расположений:

• С главной панели инструментов приложения в Photoshop
• С панели инструментов в рабочей среде Выделение и маска

На панели инструментов не отображается инструмент Выделение объектов? См. раздел Инструменты, исчезнувшие с панели инструментов.

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

1. Выберите инструмент Выделение объектов на панели инструментов.

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

   На панели параметров убедитесь, что инструмент поиска объектов включен (поведение по умолчанию: ВКЛ). Затем просто наведите указатель на объект изображения, который требуется выделить. Photoshop автоматически выделяет объект при наведении указателя. Нажмите, чтобы создать выделение.

   Если вы не хотите использовать автоматическое выделение, отключите инструмент поиска объектов и выберите режим выделения Режим: Прямоугольникили Лассо и перетащите указатель мыши вдоль объекта, чтобы создать выделение.

   • Прямоугольник: перетащите указатель для определения прямоугольной области вокруг объекта.
   • Лассо: нарисуйте приблизительную линию лассо за пределами объекта.

3. Вычитание или добавление выделенной области

   На панели параметров выберите один из следующих вариантов выделения: Создать, Добавить к, Вычесть из или Пересечение с выделенной областью. Если никакой параметр не выбран, по умолчанию используется Создать. После завершения первоначального выделения значение параметра автоматически изменяется на Добавить к.

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

   Вычитание из выделенной области: есть два варианта вычитания из выделенной области. 

   • Используйте параметр «Вычитание из выделенной области» на панели параметров: удерживайте клавишу «OPTION» (Mac)/«ALT» (Win) или выберите команду Вычесть из выделенной области на панели параметров, затем наведите курсор или нарисуйте точный прямоугольник или лассо вокруг ненужной области.  
   • Активируйте параметр «Вычитание объекта» в разделе дополнительных параметров (значок шестеренки на панели параметров): в частности, рекомендуется использовать параметр Вычитание объекта при удалении фоновых областей внутри текущего выделенного объекта. Инструмент Вычитание объекта работает примерно так же, как инструмент Выделение объектов, только выполняет противоположную функцию. Выберите для параметра Вычитание объекта на панели параметров значение «ВКЛ». Удерживайте клавишу «OPTION» (Mac)/«ALT» (Win) или выберите команду Вычесть из выделенной области на панели параметров, затем наведите курсор или нарисуйте приблизительный прямоугольник или лассо вокруг ненужной области.

4. Выбор параметров выделения объекта

   Образец со всех слоев: создает выделенную область на основе всех слоев, а не только выделенного в данный момент слоя.

   Четкие края: включает четкие края на границе выделения.
   

5. Дальнейшее уточнение края выделения в рабочей среде «Выделение и маска»

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

Кроме того, используйте диалоговое окно Обратная связь для выделения, чтобы поделиться сведениями о выделении, выполненном с помощью инструмента «Выделение объекта». Это поможет нам улучшить продукт.

Улучшенная функция выделения волос

В выпуске Photoshop 23.4 (июнь 2022 г.) был изменен инструмент «Выделение объектов», позволяющий улучшить выделение волос на портретных изображениях человека. Инструмент «Выделение объектов» теперь может распознавать портреты и применять уточнение волос, чтобы получить такую же качественную маску, как и та, которую дает выполнение функции «Выделить предмет».

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

После выделения с помощью инструмента «Выделение объектов» можно дополнительно и более естественно улучшить результаты маски с помощью параметра «Уточнить волосы» в рабочей области «Выделение и маска» на панели «Параметры» для изображений, не являющихся портретами человека, таких как изображения домашних животных, диких животных или меховых изделий.

Маскировка всех объектов в слое одним щелчком мыши

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

Выберите Слой > Маска для всех объектов и посмотрите, как Photoshop легко создаст маски для всех объектов, обнаруженных в слое, одним щелчком мыши.

Выберите «Маска для всех объектов»Слой-маска создается для всех объектов, обнаруженных в слое, одним щелчком мыши.

Чем инструмент «Выделение объектов» отличается от команды «Выделить объект»?

Инструмент «Выделение объектов» полезен, когда требуется выделить только один из объектов или часть объекта в изображении, содержащем несколько объектов. А команда «Выделить предмет» предназначена для выделения всех основных предметов в изображении.

Дополнительные сведения о команде «Выделить предмет» приведены в следующем разделе этой статьи ниже.

Оптимизировано для улучшения выделения при обработке портретов в Photoshop 21. 2 (выпуск за июнь 2020 г.)

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

1. Автоматическое выделение объектов
   

   Команда Выделить предмет автоматически выделяет заметные предметы на изображении. Для доступа к команде «Выделить предмет» выполните указанные ниже действия.

   • В процессе редактирования изображения выберите Выделить > Предмет.
   • Когда активен инструмент Выделение объектов, Быстрое выделение или Волшебная палочка, щелкните Выделить предмет на панели параметров.
   • Когда активен инструмент Выделение объектов или Быстрое выделение в рабочей среде Выделение и маска, щелкните Выделить предмет на панели параметров.
     

   Начиная с Photoshop 21. 2 (выпуск за июнь 2020 г.), функция «Выделить предмет» работает с учетом содержимого и применяет новые пользовательские алгоритмы, когда обнаруживает человека на изображении. При создании выделения на портретных изображениях значительно улучшена обработка края вокруг волос для дополнительной детализации. Чтобы на время отключить обработку с учетом содержимого, нажмите и удерживайте клавишу Shift при использовании команды Выделить предмет. 
   

2. Добавление или вычитание выделенной области

   Используйте любой из инструментов группы «Выделение» с параметрами «Добавить к выделенной области» или «Вычитание из выделенной области», чтобы при необходимости подчистить первоначальное выделение. См. документ Настройка выделенных областей вручную.

3. Дальнейшее уточнение края выделения в рабочей среде «Выделение и маска»

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

   См. документ Рабочая среда «Выделение и маска».

Облачная служба «Выделить предмет»

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

Чтобы добиться нужных результатов, просто перейдите в раздел «Обработка изображений» в диалоговом окне «Настройки» и выберите наиболее подходящий вам режим —«Облако»или «Устройство».

Переход к облачной службе «Выделить предмет»Для обработки в службе «Выделить предмет» выберите режим «Устройство» или «Облако»

Выделение также можно сделать с помощью рабочей среды «Выделение и маска».

Инструмент «Быстрое выделение» позволяет быстро «нарисовать» выделенную область с помощью настраиваемого отпечатка круглой кисти. При перетаскивании курсора выделенная область расширяется наружу, автоматически определяет края изображения и следует им.

1. Выберите инструмент «Быстрое выделение» . (Если этот инструмент не отображается, нажмите и удерживайте инструмент «Волшебная палочка».)

2. Выберите на панели параметров один из следующих вариантов выделения: «Новый», «Добавить к» или «Вычесть из».

   Если никакой параметр не выбран, по умолчанию используется «Создать». После завершения первоначального выделения значение параметра автоматически изменяется на «Добавление к выделенной области».

3. Чтобы изменить размер отпечатка кисти, щелкните раскрывающееся меню «Кисть» на панели параметров и введите размер в пикселях или задайте его с помощью ползунка. С помощью параметров раскрывающегося меню «Размер» можно установить чувствительность размера отпечатка кисти к давлению пера или копировального колесика.

   При создании выделенной области нажмите кнопку с правой квадратной скобкой (]), чтобы увеличить размер отпечатка кисти инструмента «Быстрое выделение», нажмите кнопку с левой квадратной скобкой ([), чтобы уменьшить его.

4. Выберите параметры инструмента «Быстрое выделение».

   Образец со всех слоев: создает выделенную область на основе всех слоев, а не только выделенного в данный момент слоя.

   Улучшить край: уменьшает неровности и блочность границы выделенной области. Параметр «Улучшить край» автоматически передвигает границу выделенной области по направлению к краям изображения и применяет некоторые приемы уточнения краев, доступные для использования вручную в рабочей среде Выделение и маска.

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

   Рисование с помощью инструмента «Быстрое выделение» для расширения выделенной области
   • Чтобы вычесть часть из выделенной области, щелкните «Вычесть из» на панели параметров и перетащите курсор над существующей выделенной областью.
   • Чтобы временно переключиться между режимами добавления и вычитания, удерживайте нажатой клавишу Alt (Windows) или Option (Mac).
   • Чтобы изменить курсор инструмента, выберите команду Редактирование > Установки > Курсоры > Рисующие курсоры (Windows) или Photoshop > Установки> Курсоры > Рисующие курсоры (Mac). «Нормальный кончик кисти» представляет собой стандартный курсор для инструмента Быстрое выделение, при этом знаки плюса и минуса отображают режим выделения.

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

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

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

Инструмент «Волшебная палочка» нельзя применять к изображениям с 32 битами на канал или в битовом режиме.

1. Выберите инструмент «Волшебная палочка». (Если этот инструмент не отображается, доступ к нему можно получить, нажав и удерживая инструмент «Быстрое выделение» .)

2. Выберите параметр, определяющий режим работы выделения, на панели параметров. Курсор инструмента «Волшебная палочка» изменяется в зависимости от того, какой параметр выбран.

   Параметры выделения

   A. Новая выделенная область B. Добавление к выделенной области C. Вычитание из выделенной области D. Пересечение с выделенной областью 

3. На панели параметров можно выбрать один из следующих параметров:

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

   Сглаживание: создает выделенную область с гладкими краями.

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

   Образцы из всех слоев: выделяет цвета, используя данные всех видимых слоев. В противном случае инструмент «Волшебная палочка» выбирает цвета только с активного слоя.

4. Щелчком мыши на изображении выберите нужный цвет. Если выбран параметр «Смежные пиксели», то будут выбраны все смежные пиксели в допустимом цветовом диапазоне. В противном случае выделяются все пиксели из допустимого цветового диапазона.

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

Еще похожее

• Выделение областей
• Сохранение выделенных областей и масок альфа-каналов
• Преобразование контуров в границы выделенной области
• Галерея инструментов выделения

Вход в учетную запись

Войти

Управление учетной записью

Обработка наведения, фокусировки и других состояний

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

Например, чтобы применить класс bg-sky-700 при наведении курсора, используйте класс hover:bg-sky-700:

Наведите указатель мыши на эту кнопку, чтобы увидеть изменение цвета фона

<button>
  Сохранить изменения
</button>

Как это соотносится с традиционным CSS?

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

Традиционно одно и то же имя класса применяет разные стили при наведении курсора

.btn-primary {
  background-color: #0ea5e9;
}
.btn-primary:hover {
  background-color: #0369a1;
}

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

В Tailwind отдельные классы используются для состояния по умолчанию и состояния наведения

.bg-sky-500 {
  background-color: #0ea5e9;
}
.hover\:bg-sky-700:hover {
  background-color: #0369a1;
}

Обратите внимание, как hover:bg-sky-700 только определяет стили для состояния :hover? По умолчанию он ничего не делает, но как только вы наводите курсор на элемент с этим классом, цвет фона изменится на sky-700.

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

Tailwind включает в себя модификаторы практически для всего, что вам когда-либо понадобится, в том числе:

• Псевдоклассы, такие как :hover, :focus, :first-child, и :required
• Псевдоэлементы, такие как ::before, ::after, ::placeholder, и ::selection
• Медиа-запросы, такие как отзывчивые контрольные точки, темный режим и prefers-reduced-motion
• Селекторы атрибутов, такие как [dir="rtl"] и [open]

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

<button>
  Сохранить изменения
</button>

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

---

​Псевдоклассы

​Наведение, фокус и активность

Стилизуйте элементы при наведении, фокусе и активном с помощью модификаторов hover, focus и active:

Попробуйте взаимодействовать с этой кнопкой, чтобы увидеть наведение, фокус и активное состояние

<button>
  Сохранить изменения
</button>

Tailwind также включает модификаторы для других интерактивных состояний, таких как :visited, :focus-within, :focus-visible и другие.

Смотрите справку на псевдокласс для получения полного списка доступных модификаторов псевдокласса.

​Первый, последний, нечетный и четный

Стилизуйте элемент, когда он является первым или последним дочерним элементом, используя модификаторы first и last:

<ul role="list">
  {#each people as person}
    <!-- Удалите верхнюю / нижнюю прокладку, когда первый / последний ребенок -->
    <li>
      <img src="{person. imageUrl}" alt="" />
      <div>
        <p>{person.name}</p>
        <p>{person.email}</p>
      </div>
    </li>
  {/each}
</ul>

Вы также можете стилизовать элемент, если он является четным или нечетным, используя модификаторы odd и even:

Имя	Заголовок	Эл. почта
Jane Cooper	Regional Paradigm Technician	[email protected]
Cody Fisher	Product Directives Officer	cody. [email protected]
Leonard Krasner	Senior Designer	[email protected]
Emily Selman	VP, Hardware Engineering	[email protected]
Anna Roberts	Chief Strategy Officer	[email protected]

<table>
  <!-- ... -->
  <tbody>
    {#each people as person}
      <!-- Use a white background for odd rows, and slate-100 for even rows -->
      <tr>
        <td>{person. name}</td>
        <td>{person.title}</td>
        <td>{person.email}</td>
      </tr>
    {/each}
  </tbody>
</table>

Tailwind также включает модификаторы для других структурных псевдоклассов, таких как :only-child, :first-of-type, :empty, и другие.

Смотрите справку на псевдокласс для получения полного списка доступных модификаторов псевдокласса.

​Состояния формы

Стилизуйте элементы формы в разных состояниях с помощью таких модификаторов, как required, invalid и disabled:

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

Имя пользователя

Эл. почта

Пароль

<form>
  <label>
    <span>Имя пользователя</span>
    <!-- Using form state modifers, the classes can be identical for every input -->
    <input type="text" value="tbone" disabled/>
  </label>
  <!-- . .. -->
</form>

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

Tailwind также включает модификаторы для других состояний формы, таких как :read-only, :indeterminate, :checked и другие.

Смотрите справку на псевдокласс для получения полного списка доступных модификаторов псевдокласса.

​Стиль на основе родительского состояния

(group-{modifier})

Когда вам нужно стилизовать элемент на основе состояния некоторого родительского элемента, пометьте родителя классом group и используйте модификаторы group-*, такие как group-hover, для стилизации целевого элемента:

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

Новый проект

Создайте новый проект из множества начальных шаблонов.

<a href="#">
  <div>
    <svg fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
    <h4>Новый проект</h4>
  </div>
  <p>Создайте новый проект из множества начальных шаблонов.</p>
</a>

Этот шаблон работает со всеми модификаторами псевдокласса, например, group-focus, group-active или даже group-odd.

​Стиль на основе родственного состояния

(peer-{modifier})

Когда вам нужно стилизовать элемент на основе состояния элемента sibling, пометьте его с помощью класса peer и используйте модификаторы peer-*, такие как peer-invalid, для стилизации целевого элемента:

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

<form>
  <label>
    <span>Эл. почта</span>
    <input type="email"/>
    <p>
      Пожалуйста, укажите действующий адрес электронной почты. 
    </p>
  </label>
</form>

Это позволяет выполнять всевозможные изящные трюки, например плавающие метки, например, без какого-либо JS.

Этот шаблон работает со всеми модификаторами псевдокласса, например, peer-focus, peer-required и peer-disabled.

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

Не будет работать, только предыдущие братья и сестры могут быть отмечены как одноранговые

<label>
  <span>Эл. почта</span>
  <input type="email"/>
</label>

---

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

​До и после

Стилизуйте псевдоэлементы ::before и ::after, используя модификаторы before и after:

Эл. почта

<label>
  <span>
    Эл. почта
  </span>
  <input type="email" name="email" placeholder="you@example. com" />
</label>

При использовании этих модификаторов Tailwind по умолчанию автоматически добавит content: '', поэтому вам не нужно указывать его, если вы не хотите другое значение:

Когда вы все время выглядите раздраженным люди думают, что вы заняты.

<blockquote>
  Когда вы все время выглядите
  <span>
    <span>раздраженным</span>,
  </span>
  люди думают, что вы заняты.
</blockquote>

Стоит отметить, что вам действительно не нужны псевдоэлементы ::before и ::after для большинства вещей в проектах Tailwind — обычно проще просто использовать настоящий HTML-элемент.

Например, вот тот же дизайн сверху, но с использованием псевдоэлемента <span> вместо псевдоэлемента ::before, который немного легче читать и на самом деле содержит меньше кода:

<blockquote>
  Когда вы все время выглядите
  <span>
    <span aria-hidden="true"></span>
    <span>раздраженным</span>,
  </span>
  люди думают, что вы заняты. 
</blockquote>

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

Обратите внимание, что если вы отключили наши базовые стили предварительной проверки, свойство содержимого не будет установлено на пустую строку по умолчанию, и вам нужно будет включать content-[''] в любое время. вы используете модификаторы before и after.

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

<div>
  <!-- ... -->
</div>

​Текст-заполнитель

Стилизуйте текст заполнителя любого ввода или текстового поля, используя модификатор placeholder:

<label>
  <span>Поиск</span>
  <span>
    <svg viewBox="0 0 20 20"><!-- ... --></svg>
  </span>
  <input placeholder="Искать что угодно.. ." type="text" name="search"/>
</label>

​Кнопки ввода файлов

Стилизуйте кнопку в файловых входах с помощью модификатора file:

Выберите фото профиля

<form>
  <div>
    <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80" alt="Текущее фото профиля" />
  </div>
  <label>
    <span>Выберите фото профиля</span>
    <input type="file"/>
  </label>
</form>

Обратите внимание, что Tailwind сброс границы не применяется к кнопкам ввода файлов. Это означает, что для добавления границы к кнопке ввода файла вам необходимо явно установить border-style, используя такой класс, как file:border-solid, рядом с любым border-width:

<input type="file" />

​Маркеры списка

Примените стиль к счетчикам или маркерам в списках с помощью модификатора marker:

Ingredients

• 5 чашек нарезанных белых грибов
• 1/2 стакана оливкового масла
• 3 фунта сельдерея

<ul role="list">
  <li>5 чашек нарезанных белых грибов</li>
  <li>1/2 стакана оливкового масла</li>
  <li>3 фунта сельдерея</li>
</ul><ul role="list">
  <li>5 чашек нарезанных белых грибов</li>
  <li>1/2 стакана оливкового масла</li>
  <li>3 фунта сельдерея</li>
</ul>

Мы разработали модификатор marker как наследуемый, поэтому, хотя вы можете использовать его непосредственно в элементе <li>, вы также можете использовать его для родительского элемента, чтобы не повторяться.

​Выделенный текст

Стилизуйте активное выделение текста с помощью модификатора selection:

Попробуйте выделить часть этого текста с помощью мыши

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

<div>
  <p>
    Итак, я пошел в воду. Я не буду врать вам, мальчики, я был в ужасе.
    Но я продолжал настаивать, и когда я пробирался мимо прибоя, меня охватило странное спокойствие.
    Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но я говорю вам,
    Джерри, в тот момент я <em>был</em> морским биологом.
  </p>
</div>

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

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

<html>
<head>
  <!-- ... -->
</head>
<body>
  <!-- ... -->
</body>
</html>

​Первая строка и первая буква

Стилизуйте первую строку в блоке содержимого с помощью модификатора first-line, а первую букву — с помощью модификатора first-letter:

Что ж, позволь мне кое-что сказать, веселый мальчик. Вы знаете эту маленькую марку, на которой написано «Публичная библиотека Нью-Йорка»? Что ж, это может ничего не значить для вас, но для меня это много значит. Чертовски много.

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

<p>
  Что ж, позволь мне сказать тебе кое-что, смешной мальчик. 
  Знаешь эту маленькую марку, на которой написано "Публичная библиотека Нью-Йорка"?
  Ну, это может ничего не значить для вас, но это много значит для меня. Один чертовски много.
</p><p>
  Что ж, позволь мне сказать тебе кое-что, смешной мальчик.
  Знаешь эту маленькую марку, на которой написано "Публичная библиотека Нью-Йорка"?
  Ну, это может ничего не значить для вас, но это много значит для меня. Один чертовски много.
</p>

​Диалоговые фоны

Настройте фон собственного элемента <dialog>, используя модификатор backdrop:

<dialog>
  <form method="dialog">
    <!-- ... -->
  </form>
</dialog>

Если вы используете собственные элементы <dialog> в своем проекте, вы также можете прочитать о стилизации открытых/закрытых состояний, используя модификатор open.

---

​Медиа-запросы

​Отзывчивые контрольные точки

Чтобы стилизовать элемент в определенной контрольной точке, используйте адаптивные модификаторы, такие как md и lg.

Например, это будет отображать сетку из 3 столбцов на мобильных устройствах, сетку из 4 столбцов на экранах средней ширины и сетку из 6 столбцов на экранах большой ширины:

<div>
  <!-- ... -->
</div>

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

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

Медиа-запрос prefers-color-scheme сообщает вам, предпочитает ли пользователь светлую или темную тему, и обычно настраивается на уровне операционной системы.

Используйте утилиты без модификатора для выбора светлого режима и используйте модификатор dark для переопределения темного режима:

Светлый режим

Пишет вверх ногами

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

Темный режим

Пишет вверх ногами

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

<div>
  <div>
    <span>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
    </span>
  </div>
  <h4>Пишет вверх ногами</h4>
  <p>
    Перо в невесомости можно использовать для письма в любой ориентации, включая перевернутую. Работает даже в космосе.
  </p>
</div>

Ознакомьтесь с документацией Темного Режима, чтобы подробно изучить, как работает эта функция.

​Предпочитает ограниченные движения

Медиа-запрос prefers-reduced-motion сообщает вам, попросил ли пользователь минимизировать несущественное движение.

Используйте модификатор motion-reduce для условного добавления стилей, когда пользователь запросил уменьшение движения:

Попробуйте эмулировать `prefers-reduced-motion: reduce` в ваших инструментах разработчика, чтобы скрыть счетчик

<button type="button" disabled>
  <svg viewBox="0 0 24 24"><!-- . .. --></svg>
  Обработка...
</button>

Tailwind также включает модификатор motion-safe, который добавляет стили только тогда, когда пользователь не запросил уменьшение движения. Это может быть полезно, когда использование помощника motion-reduce означало бы «отменить» множество стилей:

<!-- Использование `motion-reduce` может означать множество «отменяющих» стилей. -->
<button>
  Сохранить изменения
</button>
<!-- Использование `motion-safe` - меньше кода в этих ситуациях -->
<button>
  Сохранить изменения
</button>

​Предпочитает контраст

Медиа-запрос prefers-contrast сообщает вам, запросил ли пользователь больше или меньше контраста.

Используйте модификатор contrast-more для условного добавления стилей, когда пользователь запросил больше контраста:

Попробуйте подражать `prefers-contrast: more` в инструментах разработчика, чтобы увидеть изменения

<form>
  <label>
    <span>Номер социального страхования</span>
    <input/>
    <p>
      Нам нужно это, чтобы украсть вашу личность. 
    </p>
  </label>
</form>

Tailwind также включает модификатор contrast-less, который вы можете использовать для условного добавления стилей, когда пользователь запросил меньший контраст.

​Ориентация области просмотра

Используйте модификаторы portrait и landscape для условного добавления стилей, когда область просмотра находится в определенной ориентации:

<div>
  <div>
    <!-- ... -->
  </div>
  <div>
    <p>
      Этот опыт предназначен для просмотра в ландшафте. Пожалуйста, поверните ваше устройство, чтобы просмотреть сайт.
    </p>
  </div>
</div>

​Стили печати

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

<div>
  <article>
    <h2>Мой секретный рецепт пиццы</h2>
    <p>Этот рецепт является секретным, и его нельзя никому передавать</p>
    <!-- . .. -->
  </article>
  <div>
    Вы серьезно пытаетесь это напечатать? Это секрет!
  </div>
</div>

---

​Селекторы атрибутов

​Поддержка RTL

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

Используйте модификаторы rtl и ltr для условного добавления стилей в режимах справа налево и слева направо соответственно при создании разнонаправленных макетов:

Left-to-right

Tom Cook

Director of Operations

Right-to-left

تامر كرم

الرئيس التنفيذي

<div>
  <img src="..." alt="" />
  <div>
    <p>...</p>
    <p>...</p>
  </div>
</div>
<div>
  <img src="..." alt="" />
  <div>
    <p>...</p>
    <p>...</p>
  </div>
</div>

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

Всегда задавайте направление, даже если по умолчанию слева направо

<html dir="ltr">
  <!-- ... -->
</html>

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

​Открытое / закрытое состояние

Используйте модификатор open для условного добавления стилей, когда элемент <details> или <dialog> находится в открытом состоянии:

Попробуйте переключить раскрытие, чтобы увидеть, как меняются стили

Почему они называют его Овальтином?

Кружка круглая. Баночка круглая. Они должны называть это Roundtine.

<div>
  <details open>
    <summary>
      Почему они называют его Овальтином?
    </summary>
    <div>
      <p>Кружка круглая.  Баночка круглая. Они должны называть это Roundtine.</p>
    </div>
  </details>
</div>

---

​Пользовательские модификаторы

​Использование произвольных вариантов

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

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

Строка формата такая же, как и для addVariant API плагина, с символом &, представляющим изменяемый селектор.

Произвольные варианты можно комбинировать со встроенными модификаторами или друг с другом, как и остальные модификаторы в Tailwind:

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

Вы также можете использовать at-правила, такие как @media или @supports в произвольных вариантах:

С пользовательскими модификаторами at-правила заполнитель & не нужен, как и при вложении с препроцессором.

Вы даже можете комбинировать at-правила и обычные модификаторы селектора, включив модификатор селектора в фигурные скобки после at-правила:

​Создание плагина

Если вы обнаружите, что используете один и тот же произвольный модификатор несколько раз в своем проекте, возможно, стоит извлечь его в плагин с помощью API addVariant:

tailwind.config.js

let plugin = require('tailwindcss/plugin')
module.exports = {
  // ...
  plugins: [
    plugin(function ({ addVariant }) {
      // Add a `third` variant, ie. `third:pb-0`
      addVariant('third', '&:nth-child(3)')
    })
  ]
}

Узнайте больше в документации добавление вариантов плагинов.

---

​Дополнительные темы

​Использование с вашими собственными классами

Все модификаторы Tailwind доступны для использования с вашими собственными пользовательскими классами, если вы определили их в одном из макетов Tailwind или добавили их с помощью a плагин:

main.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

<div>
  <!-- ... -->
</div>

​Порядок сложенных модификаторов

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

// Эти модификаторы:
'dark:group-hover:focus:opacity-100'
// ...применяются так:
dark(groupHover(focus('opacity-100')))

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

Например, если у вас настроен darkMode на class, сочетание модификаторов dark и group-hover дает разные результаты в зависимости от того, в каком порядке вы используете:

/* dark:group-hover:opacity-100 */
. dark .group:hover .dark\:group-hover\:opacity-100 {
  opacity: 1;
}
/* group-hover:dark:opacity-100 */
.group:hover .dark .group-hover\:dark\:opacity-100 {
  opacity: 1;
}

В первом примере элемент dark должен быть родительским элементом элемента group, но во втором примере он перевернут.

Еще одно место, где это важно, — это использование модификаторов, таких как prose-headings, которые включены в официальный плагин типографики:

/* prose-headings:hover:underline */
.prose-headings\:hover\:underline:hover :is(:where(h2, h3, h4, h5, th)) {
  text-decoration: underline;
}
/* hover:prose-headings:underline */
.hover\:prose-headings\:underline :is(:where(h2, h3, h4, h5, th)):hover {
  text-decoration: underline;
}

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

---

​Приложение

​Краткий справочник

Краткая справочная таблица по каждому модификатору, включенному в Tailwind по умолчанию.

​Справочник псевдоклассов

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

​hover

(:hover)

Стилизуйте элемент, когда пользователь наводит на него курсор мыши, используя модификатор hover:

<div>
  <!-- ... -->
</div>

​focus

(:focus)

Стилизуйте элемент, когда он находится в фокусе модификатора focus:

<input />

​focus-within

(:focus-within)

Стилизуйте элемент, когда он или один из его потомков имеет фокус, используя модификатор focus-within:

<div>
  <input type="text" />
</div>

​focus-visible

(:focus-visible)

Стилизуйте элемент, когда он был сфокусирован с помощью клавиатуры, используя модификатор focus-visible:

<button>
  Отправить
</button>

​active

(:active)

Стилизуйте элемент при нажатии с помощью модификатора active:

<button>
  Отправить
</button>

​visited

(:visited)

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

<a href="https://seinfeldquotes. com">
  Вдохновение
</a>

​target

(:target)

Примените стиль к элементу, если его идентификатор совпадает с текущим фрагментом URL-адреса, используя модификатор target:

<div>
  <!-- ... -->
</div>

​first

(:first-child)

Стилизуйте элемент, если это первый дочерний элемент, с помощью модификатора first:

<ul>
  {#each people as person}
    <li>
      <!-- ... -->
    </li>
  {/each}
</ul>

​last

(:last-child)

Стилизуйте элемент, если это последний дочерний элемент, используя модификатор last:

<ul>
  {#each people as person}
    <li>
      <!-- ... -->
    </li>
  {/each}
</ul>

​only

(:only-child)

Стилизуйте элемент, если это единственный дочерний элемент, использующий модификатор only:

<ul>
  {#each people as person}
    <li>
      <!-- . .. -->
    </li>
  {/each}
</ul>

​odd

(:nth-child(odd))

Создайте стиль для элемента, если это дочерний элемент со странным номером, используя модификатор odd:

<table>
  {#each people as person}
    <tr>
      <!-- ... -->
    </tr>
  {/each}
</table>

​even

(:nth-child(even))

Примените стиль к элементу, если он является дочерним элементом с четным номером, используя модификатор even:

<table>
  {#each people as person}
    <tr>
      <!-- ... -->
    </tr>
  {/each}
</table>

​first-of-type

(:first-of-type)

Стилизуйте элемент, если это первый дочерний элемент своего типа, используя модификатор first-of-type:

<nav>
  <img src="/logo.svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#">
      <!-- ... -->
    </a>
  {/each}
</table>

​last-of-type

(:last-of-type)

Стилизуйте элемент, если это последний дочерний элемент своего типа, используя модификатор last-of-type:

<nav>
  <img src="/logo. svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#">
      <!-- ... -->
    </a>
  {/each}
  <button>Больше</button>
</table>

​only-of-type

(:only-of-type)

Стилизуйте элемент, если это единственный дочерний элемент своего типа, используя модификатор only-of-type:

<nav>
  <img src="/logo.svg" alt="Vandelay Industries" />
  {#each links as link}
    <a href="#">
      <!-- ... -->
    </a>
  {/each}
  <button>Больше</button>
</table>

​empty

(:empty)

Примените стиль к элементу, если у него нет содержимого, используя модификатор empty:

<ul>
  {#each people as person}
    <li>{person.hobby}</li>
  {/each}
</ul>

​disabled

(:disabled)

Стиль ввода, когда он отключен, с помощью модификатора disabled:

<input />

​enabled

(:enabled)

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

<input />

​checked

(:checked)

Создайте стиль для флажка или переключателя, когда он установлен, с помощью модификатора checked:

<input type="checkbox" />

​indeterminate

(:indeterminate)

Установите флажок или переключатель в неопределенное состояние с помощью модификатора indeterminate:

<input type="checkbox" />

​default

(:default)

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

<input type="checkbox" />

​required

(:required)

Стиль ввода, когда это необходимо, с помощью модификатора required:

<input />

​valid

(:valid)

Создайте стиль для ввода, если он допустим, используя модификатор valid:

<input />

​invalid

(:invalid)

Стиль ввода, если он недействителен, с помощью модификатора invalid:

<input />

​in-range

(:in-range)

Стиль ввода, когда его значение находится в пределах указанного диапазона, с помощью модификатора in-range:

<input min="1" max="5" />

​out-of-range

(:out-of-range)

Стиль ввода, когда его значение выходит за пределы указанного диапазона, с помощью модификатора out-of-range:

<input min="1" max="5" />

​placeholder-shown

(:placeholder-shown)

Стиль ввода, когда заполнитель отображается, с помощью модификатора placeholder-shown:

<input placeholder="you@example. com" />

​autofill

(:autofill)

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

<input />

​read-only

(:read-only)

Стиль ввода, когда он доступен только для чтения, с помощью модификатора read-only:

<input />

CSS. Документация Bootstrap 2.3.2

Заголовки

HTML-заголовки, от <h2> through <h6>.

h3. Заголовок 2

h4. Заголовок 3

h5. Заголовок 4

h5. Заголовок 5

h6. Заголовок 6

Пример основного текста

В Bootstrap по умолчанию font-size равняется 14px, а line-height составляет 20px. Эти правила применяются к элементу <body> и всему тексту. В дополнение, элемент <p> (Параграф) имеет отступ снизу в половину line-height т.е. равен 10px по умолчанию.

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

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

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

<p>...</p>

Класс Lead

Выделите параграф добавив класс .lead.

Это письмо должен Вам доставить мой ключник Трофим ровно в 8 часов вечера.

<p>...</p>

Создано при помощи Less

Оформление основано на двух LESS-переменных в файле variables.less: @baseFontSize и @baseLineHeight. Первая задает font-size, вторая устанавливает line-height. Используя простые математические уравнения мы задаем внешние и внутренние отступы элементов, высоту строки и многое другое. Редактируйте их для оптимизации и создания своего персонального Bootstrap’а.

---

Выделение шрифта

Используйте стандартные HTML-теги для выделения шрифта.

<small>

Для уменьшения значения текста на странице используйте тег small.

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

<p>
  <small>Было восемь часов утра - время, когда офицеры, чиновники и приезжие обыкновенно после жаркой, душной ночи купались в море и потом шли в павильон пить кофе или чай.</small>
</p>

Выделение полужирным

Используется для выделения важного текста.

Следующие слова в предложении очень важные и требуют особого внимания со стороны читателя.

<strong>Это полужирный и очень важный текст</strong>

Выделение Курсивом

Используйте для выделения цитат и речи в тексте.

Используйте для выделения цитат и речи в тексте.

<em>Это чья-то речь</em>

Минуту внимания! Используйте тег <b> и <i> в HTML5. Используйте <b> для простого выделения текста, акцентируя на нем внимание, когда как тег <i> используется для выделения речи, технической информации и т.п.

Классы выравнивания

Легко выровнять текст с компонентами с помощью классов выравнивания текста.

Выровненный текст слева.

Выровненный по центру текст.

Выровненный справа текст.

<p>Выровненный текст слева.</p>
<p>Выровненный по центру текст.</p>
<p>Выровненный справа текст.</p>

Классы для выделения текста

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

Науки юношей питают

Отраду старым подают

В счастливой жизни украшают

В несчастный случай берегут

В домашних трудностях утеха

<p>Науки юношей питают</p>
<p>Отраду старым подают</p>
<p>В счастливой жизни украшают</p>
<p>В несчастный случай берегут</p>
<p>В домашних трудностях утеха</p>

---

Аббревиатура

Стилизованное представление стандартного HTML-тега <abbr>. Поместите слово внутрь элемента <abbr> для создания аббревиатуры или акронима — при наведении на который пользователь увидит расшифровку. Аббревиатуры с атрибутом title имеют точечное подчеркивание и курсор справки при наведении.

<abbr>

Используйте для аббревиатур и сокращений; объяснение сокращения отображается при наведении курсора, Вложите дополнительный атрибут title.

Аббревиатура «Комплексное Автомобильное Страхование Кроме Ответственности» — КАСКО.

<abbr title="attribute">attr</abbr>

<abbr>

Добавьте класс .initialism для выделения аббревиатуры ЗАГЛАВНЫМИ БУКВАМИ.

HTML лучшая вещь придуманная человеком после изобретения колеса.

<abbr title="HyperText Markup Language">HTML</abbr> лучшая вещь придуманная человеком после изобретения колеса. 

---

Адрес

Ниже два примера как тег <address> может быть использован: При форматировании используйте тег <br> для переноса строки. Present contact information for the nearest ancestor or the entire body of work.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

ФИО
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
  <strong>ФИО</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

---

Цитаты

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

Цитаты по умолчанию

Для использования цитат, поместите любой HTML-текст внутрь тега <blockquote>. Для однострочных цитат мы рекомендуем использовать тег <p>.

В горах этой ночью прохладно.

В разведке намаявшись днем…

<blockquote>
  <p>В горах этой ночью прохладно. В разведке намаявшись днем...</p>
</blockquote>

Дополнения в цитатах

Дополнительные стили и элементы для использования с цитатами.

Указание оригинального источника

Добавьте тег <small> для идентификации источника. Оберните имя исходной работы в <cite>.

В кофейнике кофе клокочет,

Солдаты усталые спят.

Над ним арагонские лавры

Тяжелой листвой шелестят.

Константин Симонов Всемирная библиотека поэзии. 1998

<blockquote>
  <p>В кофейнике кофе клокочет,
Солдаты усталые спят.
Над ним арагонские лавры
Тяжелой листвой шелестят.</p>
  <small>Константин Симонов <cite title="Всемирная библиотека поэзии">Всемирная библиотека поэзии</cite></small>
</blockquote>

Альтернативное расположение

ля выравнивания текста по правую сторону, добавьте класс .pull-right к тегу blockquote.

Я вас молю – утешьтесь, государь!

Спасенью радоваться надо больше,

Чем горевать о тягостных утратах.

Шекспир Уильям — Буря

<blockquote>
  ...
</blockquote>

---

Списки

Неупорядоченный

Список в котором расположение элементов не имеет особого значения.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

Упорядоченный

Список в котором нумерация элементов имеет особое значение.

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

<ol>
  <li>. ..</li>
</ol>

Не стилизованный

Список элементов без нумерации и стиля, где list-style.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

В одну строку

Поместите все элементы списка в одну строку inline-block с встроенным блоком и небольшим дополнением.

• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat

<ul>
  <li>...</li>
</ul>

Списки описания

Список элементов с дополнительным описанием.

Списки описаний

Списки описаний идеально подходят для определения терминов.

Термины

Описание терминов.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Горизонтальные списки описания

Термин и описание в элементе <dl> будут располагаться горизонтально относительно друг друга.

Списки описаний

Списки описаний идеально подходят для определения терминов.

Термины

Описание терминов.

Donec id elit non mi porta gravida at eget metus.

Очень длинный термин

Etiam porta sem malesuada magna mollis euismod.

Felis euismod semper eget lacinia

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Внимание! В горизонтальных списках описания «Термин» будет обрезан при помощи свойства text-overflow. На малых дисплеях (телефон, планшет и т.д.) размер списка будет изменяться в соответствии с сеткой шаблона.

Строчное выделение кода

Поместите строковый код в тег <code>.

Например: <section> выделен в строке.

Например: <code><section></code> выделен в строке.

Блочное выделение кода

Используйте <pre> для выделения 2-х и более строк кода. Избегайте использования угловых скобок , для корректного отображения фрагментов кода.

<p>Выделенный текст...</p>

<pre>
  &lt;p&gt;Выделенный текст...&lt;/p&gt;
</pre>

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

Вы можете дополнительно добавить класс .pre-scrollable, который задаст максимальную высоту (max-width) блока в 350px и добавит вертикальный скроллбар.

Таблица по умолчанию

Для добавления стандартного и минимального форматирования таблицы—просто добавьте класс .table к любому элементу <table>. Стандартное форматирование содержит минимальные отступы и только горизонтальные линии разделяющие строки.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table>
  …
</table>

---

Дополнительные классы

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

.table-striped

Дополняет каждую первую строку в таблице серым фоном (Зебра), при этом строки должны быть помещены в суб-элемент <tbody>, данный метод работает через CSS-селектор :nth-child, имейте в виду что селекторы не поддерживаются и не работают в IE7-IE8.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table>
  …
</table>

.table-bordered

Добавляет границы и закругленные углы к таблице.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
	Mark	Otto	@getbootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table>
  …
</table>

. table-hover

Добавляет подсветку строки при наведении, при условии что строки помещены в суб-элемент <tbody>.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table>
  …
</table>

.table-condensed

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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table>
  …
</table>

---

Опции выделения строк в таблице

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

Класс	Описание
.success	Зеленый — отображение успешного или положительного действия.
.error	Красный — отображение ошибки, опасного или потенциально негативного действия.
.warning	Желтый — отображение предупреждения или информации на которой пользователь должен сделать особый акцент.
.info	Голубой — альтернатива ко всем предыдущим классам. Используйте для вывода дополнительной информации.

#	Product	Payment Taken	Status
1	TB — Monthly	01/04/2012	Approved
2	TB — Monthly	02/04/2012	Declined
3	TB — Monthly	03/04/2012	Pending
4	TB — Monthly	04/04/2012	Call in to confirm

...
  <tr>
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
. ..

---

Структура и разметка таблицы

Список и описание стандартной HTML-разметки таблиц.

Тэг	Описание
<table>	Родительский тег таблиц
<thead>	Родительский тег строк заголовка таблицы (<tr>)
<tbody>	Родительский тег тела и строк таблицы (<tr>)
<tr>	Родительский тег (строка) для ячеек (колонок) таблицы (<td> или <th>)
<td>	Ячейка таблицы
<th>	Ячейка заголовка таблицы Должен использоваться внутри тега <thead>
<caption>	Описание или краткое содержание таблицы

<table>
  <caption>. ..</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Стандартные формы

Стандартное форматирование форм включено в Bootstrap и работает без дополнительных классов для <form> и без какого-либо изменения в стандартной HTML-разметке форм. По умолчанию: выровненные по левому краю, подписи элементов сверху от полей и компактные по размеру.

Пример редактора: Узнайте подробнее об используемом элементе label, о его свойствах и возможностях — label.

Название формы Описание поля (Подробнее о теге label) Подсказка или доп. информация. Нажми здесь и выдели checkbox

<form>
  <fieldset>
    <legend>Название формы</legend>
    <label>Описание поля</label>
    <input type="text" placeholder="Введите текст…">
    <span>Подсказка или доп.  информация.</span>
    <label>
      <input type="checkbox"> Нажми здесь и выдели checkbox
    </label>
    <button type="submit">Отправить</button>
  </fieldset>
</form>

---

Дополнительные классы форматирования

Bootstrap включает в себя четыре наиболее часто используемых стиля форм.

Форма поиска

Добавьте класс .form-search к форме, и класс .search-query к полю <input> для добавления поля с сильно закругленными углами.

<form>
  <input type="text">
  <button type="submit">Найти</button>
</form>

Линейная форма

Добавьте класс .form-inline для улучшения вида формы в горизонтальном положении и оптимизации отступов между элементами формы.

Запомнить меня

<form>
  <input type="text" placeholder="Email">
  <input type="password" placeholder="Пароль">
  <label>
    <input type="checkbox"> Запомнить меня
  </label>
  <button type="submit">Войти</button>
</form>

Горизонтальные формы

Выровненные по правому краю и расположенные слева подписи полей. Требует небольшое изменение в стандартной разметке формы:

• Добавьте класс .form-horizontal к форме
• Поместите лейблы и элементы формы в div с классом .control-group
• Добавьте класс .control-label к элементу label
• Поместите все дополнительные элементы управления (кнопки, чекбоксы и т.п.) в div с классом .controls это необходимо для правильного расположения элементов

<form>
  <div>
    <label for="inputEmail">Email</label>
    <div>
      <input type="text" placeholder="Email">
    </div>
  </div>
  <div>
    <label for="inputPassword">Пароль</label>
    <div>
      <input type="password" placeholder="Пароль">
    </div>
  </div>
  <div>
    <div>
      <label>
        <input type="checkbox"> Запомнить меня
      </label>
      <button type="submit">Войти</button>
    </div>
  </div>
</form>

---

Поддерживаемые элементы форм

Примеры использования стандартных элементов форм.

Input

Текстовое поле

Самый часто используемый элемент форм. Поддерживаемые типы в спецификации HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Подробнее о типах, поддержки в браузерах и возможностях — здесь.

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

<input type="text" placeholder="Введите текст">

Textarea

Поле поддерживаемое ввод текста в несколько строк. Изменяйте значение атрибута rows для задания минимального количества отображаемых строк.

<textarea rows="3"></textarea>

Пример редактора

Отключение изменения размера поля textarea через CSS:
Для отключения возможности изменять размер поля textarea в CSS-код описывающий свойства элемента необходимо прописать resize: none; (работает не во всех браузерах).

Ограничение максимального количества вводимых символов:
Для ограничения максимального количества вводимых символов в поле textarea используйте атрибут maxlength="число"

В данное поле возможно ввести не более 10 символов, размер данного поля не изменяется.
Несмотря на возможность ограничения ввода данных, типов символов и т.п. на стороне браузера ВСЕГДА осуществляйте повторную проверку на серверной стороне вашего приложения!

<textarea maxlength="10" rows="4"></textarea>
<style type="text/css">
  #redex { resize: none; }
</style>

Checkbox и radio

флажки и радио-кнопки

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

По умолчанию

Выберите—для бла бла бла…
Выберите пункт 1—для бла бла бла… Или выберите пункт 2—для бла бла бла…

<label>
  <input type="checkbox" value="">
  Выберите—для бла бла бла. ..
</label>
<label>
  <input type="radio" name="optionsRadios" value="option1" checked>
  Выберите пункт 1—для бла бла бла...
</label>
<label>
  <input type="radio" name="optionsRadios" value="option2">
  Или выберите пункт 2—для бла бла бла...
</label>

Линейные чек-боксы

Добавьте класс .inline к чек-боксам которые необходимо расположить в одну строку.

<label>
  <input type="checkbox" value="option1"> 1
</label>
<label>
  <input type="checkbox" value="option2"> 2
</label>
<label>
  <input type="checkbox" value="option3"> 3
</label>

Select

селектор

Используйте элемент по умолчанию или добавьте атрибут multiple="multiple" для множественного выбора из списка.

12345
12345

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

---

Дополнения к формам

Используйте дополнительные элементы в формах для наилучшего user experience.

Пред-идущие и Пост-идущие элементы

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

По умолчанию

Поместите span элемент с классом .add-on и элемент input с одним или двумя классами для добавления Пред- и Пост-идущих элементов.

<div>
  <span>@</span><input size="16" type="text" placeholder="Username">
</div>
<div>
  <input size="16" type="number"><span>.00</span>
</div>

Комбинированные

Используйте сразу два элемента с классом .add-on.

<div>
  <span>$</span><input size="16" type="number"><span>.00</span>
</div>

Кнопки вместо текста

Вместо <span>, используйте button с классом . btn для добавления Пред- и Пост-идущих кнопок.

<div>
  <input size="16" type="text"><button type="button">Go!</button>
</div>
<div>
  <input size="16" type="text"><button type="button">Найти</button><button type="button">Опции</button>
</div>

Форма поиска

<form>
  <div>
    <input type="text">
    <button type="submit">Найти</button>
  </div>
  <div>
    <button type="submit">Найти</button>
    <input type="text">
  </div>
</form>

Управление размерами полей

Используйте стандартные классы .input-large для контроля размеров, или .span* классы для соответствия размерам вашей сетки шаблона.

Стандартные классы

<input type="text" placeholder=".input-mini">
<input type="text" placeholder=".input-small">
<input type="text" placeholder=".input-medium">
<input type="text" placeholder=". input-large">
<input type="text" placeholder=".input-xlarge">
<input type="text" placeholder=".input-xxlarge">

Классы в соответствии с сеткой шаблона

Используйте классы начиная от .span1 до .span12 для создания полей ввода размером соответствующим размеру сетки шаблона.

123451234512345

<input type="text" placeholder=".span1">
<input type="text" placeholder=".span2">
<input type="text" placeholder=".span3">
<select>
  ...
</select>
<select>
  ...
</select>
<select>
  ...
</select>

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

<div>
  <input type="text" placeholder=".span5">
</div>
<div>
  <input type="text" placeholder=".span4">
  <input type="text" placeholder=". span1">
</div>
<div>
  <input type="text" placeholder=".span3">
  <input type="text" placeholder=".span2">
  <input type="text" placeholder=".span1">
</div>
...

Отключенное (неактивное) поле

Отключение элемента формы без изменения кода элемента и добавления дополнительных атрибутов.

<span>Текст</span>

Элементы управления формами

Закончить форму логичнее всего группой элементов контроля (кнопками). Используя .form-horizontal, кнопки и другие элементы будут автоматически помещены сразу после других элементов формы.

<div>
  <button type="submit">Сохранить</button>
  <button type="button">Отменить</button>
</div>

Вспомогательный текст

Строчный вспомогательный текст

Здесь строчный вспомогательный текст

<input type="text"><span>Здесь строчный вспомогательный текст</span>

Блочный вспомогательный текст

Здесь блочный вспомогательный текст.

<input type="text"><span>Здесь блочный вспомогательный текст.</span>

---

Контроль состояний элементов формы

Input focus

Bootstrap предоставляет стили для активных элементов форм и disabled (отключенные элементы). Мы отключили стандартные стили форм в Webkit, такие как outline, взамен добавив box-shadow для селектора :focus.

<input type="text" value="Поле в фокусе...">

Поля с неверно введенными данными

Стили поля через стандартный браузерный селектор :invalid. Укажите тип type поля через и добавьте атрибут required. Если ввести данные неверно, поле будет красным и форма не будет отправлена, если ввести email в поле ниже — поле будет выделено синим цветом и форма будет отправлена. Действия полей, работа формы и реакция браузера зависит от бренда и версии браузера.

<input type="email" required>

Отключенное (неактивное) поле

Добавьте атрибут disabled к полю input.

<input type="text" placeholder="Отключенное поле..." disabled>
<input type="checkbox" value="option1" disabled>Это неактивный (отключенный) флажок

Состояния элементов формы

валидация

Добавлены состояния для errors (ошибок), warnings (предупреждений) и success (успешных). Например, для отображения ошибки в заполнении поля добавьте класс .error к родительскому элементу носящему класс .control-group.

Поле с предупреждением

Что-то здесь не так

Поле с ошибкой

Пожалуйста исправьте ошибку в этом поле

Успешное поле

Здесь все правильно!

Успешный выпадающий список

12345 Правильно!

<div>
  <label for="inputWarning">Поле с предупреждением</label>
  <div>
    <input type="text">
    <span>Что-то здесь не так</span>
  </div>
</div>
<div>
  <label for="inputError">Поле с ошибкой</label>
  <div>
    <input type="text">
    <span>Пожалуйста исправьте ошибку в этом поле</span>
  </div>
</div>
<div>
  <label for="inputSuccess">Успешное поле</label>
  <div>
    <input type="text">
    <span>Здесь все правильно!</span>
  </div>
</div>

Стандартные кнопки

Стиль кнопки может быть применен к любому элементу с классом . btn. Но скорее всего Вы будете применить его к элементам <a> и <button>, для наилучшего результата.

Кнопка	Класс	Описание
	btn	Стандартная серая кнопка
	btn btn-primary	Синяя сильно заметная и выделяющаяся кнопка, используется для обозначения основного действия
	btn btn-info	Используйте как альтернативу кнопке по умолчанию
	btn btn-success	Обозначает позитивное действие или успешное выполнение
	btn btn-warning	Обозначает какое-либо предупреждение
	btn btn-danger	Обозначает негативное действие или какую-либо ошибку
	btn btn-inverse	Альтернативная темно-серая кнопка
	btn btn-link	Позволяет обратить кнопку в ссылку по стилю, при этом сохраняя весь функционал элемента button

Совместимость с браузерами

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

Различные размеры

Нужны большие и маленькие кнопки? Добавьте классы .btn-large, .btn-small, или .btn-mini для дополнительных размеров.

<p>
  <button type="button">Large button</button>
  <button type="button">Large button</button>
</p>
<p>
  <button type="button">Default button</button>
  <button type="button">Default button</button>
</p>
<p>
  <button type="button">Small button</button>
  <button type="button">Small button</button>
</p>
<p>
  <button type="button">Mini button</button>
  <button type="button">Mini button</button>
</p>

Нужна кнопка размер которой совпадает с шириной родительского элемента? — Добавьте класс . btn-block к нопке или любому элементу с классом .btn.

<button type="button">Block level button</button>
<button type="button">Block level button</button>

Отключенное состояние

Дополнительные стили кнопок, позволяют понять что они не кликабельные или отключены.

Элемент Anchor

Ссылка

Для отключения ссылок со стилем кнопок добавьте класс .disabled.

Primary link Link

<a href="#">Primary link</a>
<a href="#">Link</a>

Внимание! Используйте .disabled как дополнительный класс, так же как и класс .active, без префиксов. И имейте ввиду что для элемента >a< — это только применения стиля, Вы должны использовать JavaScript для полноценного отключения ссылок.

Элемент Button

Кнопка

Добавьте атрибут disabled к элементу <button> для отключения кнопки.

<button type="button" disabled="disabled">Primary button</button>
<button type="button" disabled>Button</button>

Один класс, несколько тегов

Используйте класс .btn для элементов <a>, <button>, или <input>.

Ссылка

<a href="">Link</a>
<button type="submit">Button</button>
<input type="button" value="Input">
<input type="submit" value="Submit">

Для наилучшей совместимости с браузерами, используйте элементы корректно обрабатываемые во всех браузерах. Например input, используйте как кнопку <input type="submit">.

Добавляйте классы к элементу <img> для задания различных стилей картинкам.

<img src="...">
<img src="...">
<img src="...">

Внимание! Классы .img-rounded и . img-circle не работают в IE7-8 из-за отсутвия поддержки border-radius в CSS.

Icon glyphs

140 иконок в едином спрайте, доступны в темном (по умолчанию) и белом исполнении, предоставлены Glyphicons.

• icon-glass
• icon-music
• icon-search
• icon-envelope
• icon-heart
• icon-star
• icon-star-empty
• icon-user
• icon-film
• icon-th-large
• icon-th
• icon-th-list
• icon-ok
• icon-remove
• icon-zoom-in
• icon-zoom-out
• icon-off
• icon-signal
• icon-cog
• icon-trash
• icon-home
• icon-file
• icon-time
• icon-road
• icon-download-alt
• icon-download
• icon-upload
• icon-inbox
• icon-play-circle
• icon-repeat
• icon-refresh
• icon-list-alt
• icon-lock
• icon-flag
• icon-headphones
• icon-volume-off
• icon-volume-down
• icon-volume-up
• icon-qrcode
• icon-barcode
• icon-tag
• icon-tags
• icon-book
• icon-bookmark
• icon-print
• icon-camera
• icon-font
• icon-bold
• icon-italic
• icon-text-height
• icon-text-width
• icon-align-left
• icon-align-center
• icon-align-right
• icon-align-justify
• icon-list
• icon-indent-left
• icon-indent-right
• icon-facetime-video
• icon-picture
• icon-pencil
• icon-map-marker
• icon-adjust
• icon-tint
• icon-edit
• icon-share
• icon-check
• icon-move
• icon-step-backward
• icon-fast-backward
• icon-backward
• icon-play
• icon-pause
• icon-stop
• icon-forward
• icon-fast-forward
• icon-step-forward
• icon-eject
• icon-chevron-left
• icon-chevron-right
• icon-plus-sign
• icon-minus-sign
• icon-remove-sign
• icon-ok-sign
• icon-question-sign
• icon-info-sign
• icon-screenshot
• icon-remove-circle
• icon-ok-circle
• icon-ban-circle
• icon-arrow-left
• icon-arrow-right
• icon-arrow-up
• icon-arrow-down
• icon-share-alt
• icon-resize-full
• icon-resize-small
• icon-plus
• icon-minus
• icon-asterisk
• icon-exclamation-sign
• icon-gift
• icon-leaf
• icon-fire
• icon-eye-open
• icon-eye-close
• icon-warning-sign
• icon-plane
• icon-calendar
• icon-random
• icon-comment
• icon-magnet
• icon-chevron-up
• icon-chevron-down
• icon-retweet
• icon-shopping-cart
• icon-folder-close
• icon-folder-open
• icon-resize-vertical
• icon-resize-horizontal
• icon-hdd
• icon-bullhorn
• icon-bell
• icon-certificate
• icon-thumbs-up
• icon-thumbs-down
• icon-hand-right
• icon-hand-left
• icon-hand-up
• icon-hand-down
• icon-circle-arrow-right
• icon-circle-arrow-left
• icon-circle-arrow-up
• icon-circle-arrow-down
• icon-globe
• icon-wrench
• icon-tasks
• icon-filter
• icon-briefcase
• icon-fullscreen

Glyphicons attribution

Glyphicons позволили нам использовать набор иконок Halflings, который является частью open-source проекта. По соглашению мы приводим ссылку на оригинал их проекта и на автора работы.

---

Как использовать?

Bootstrap использует тег <i> для всех иконок, они не имеют единого класса—только единый префикс класса icon-*. Для использования поместите код с примера ниже, куда Вам необходимо:

<i></i>

Так же иконки доступны в белом виде (inverted), и доступны при дополнительном классе:

<i></i>

Внимание! При использовании с текстом, кнопками, ссылками или навигацией не забудьте оставить пробел после тега <i> для корректного расположения элемента.

---

Примеры

Иконки это хорошо, но когда их стоит использовать? Вот вам идеи:

Кнопки

Группа кнопок в меню

<div>
  <div>
    <a href="#"><i></i></a>
    <a href="#"><i></i></a>
    <a href="#"><i></i></a>
    <a href="#"><i></i></a>
  </div>
</div>

Выпадающий список в группе кнопок

Пользователь

<div>
  <a href="#"><i></i> Пользователь</a>
  <a data-toggle="dropdown" href="#"><span></span></a>
  <ul>
    <li><a href="#"><i></i> Редактировать</a></li>
    <li><a href="#"><i></i> Удалить</a></li>
    <li><a href="#"><i></i> Забанить</a></li>
    <li></li>
    <li><a href="#"><i></i> Сделать админом</a></li>
  </ul>
</div>

Кнопки, иконки и их размеры

Star Star Star

<a href="#"><i></i> Star</a>
<a href="#"><i></i> Star</a>
<a href="#"><i></i> Star</a>

Навигация

• Домой
• Библиотека
• Приложения
• Дополнительно

<ul>
  <li><a href="#"><i></i> Домой</a></li>
  <li><a href="#"><i></i> Библиотека</a></li>
  <li><a href="#"><i></i> Приложения</a></li>
  <li><a href="#"><i></i> Дополнительно</a></li>
</ul>

Поле формы

Email address

<div>
  <label for="inputIcon">Email address</label>
  <div>
    <div>
      <span><i></i></span>
      <input type="text">
    </div>
  </div>
</div>

Html, CSS Фиксированная ширина фона при наведении курсора

Задавать вопрос

Спросил 4 года, 9 месяцев назад

Изменено 4 года, 9 месяцев назад

Просмотрено 834 раза

Я пытаюсь добиться полной ширины фона при наведении на элементы списка.

Мне также нужно получить серый фон на всю ширину слева.

Как мне это сделать:

HTML:

 

                 
Дополнительные ресурсы
 
                <ул>
                    
Войти/Зарегистрироваться
                    
Запрос образцов
                    
Техническая документация
                
            
 

CSS:

 .additional-resources-href:hover {
    фон: #1daeeb;
    непрозрачность: 4,5;
    background-color: #BFCDD5 !важно;
}
.дополнительные ресурсы-href {
    черный цвет;
    текстовое оформление: нет;
}
.additional-resrc-ul li: перед {
    содержание: "• ";
    вес шрифта: полужирный;
    цвет: #1DAEB;
}
.additional-resrc-ul li: hover {
    фон: #1daeeb;
    непрозрачность: 4,5;
    цвет фона: #BFCDD5;
}
.additional-resrc-ul {
    поле: 0px;
    отступ: 0px;
    поле слева: 10%;
    вес шрифта: 300;
    размер шрифта: 10 пикселей;
    высота строки: 3,5 em;
}
 

• HTML
• CSS

3

Вы можете использовать псевдоэлемент, который будет выходить за пределы li и покрывать всю ширину следующим образом:

 . additional-resources-href:hover {
  фон: #1daeeb;
  непрозрачность: 4,5;
  background-color: #BFCDD5 !важно;
}

.дополнительные ресурсы-href {
  черный цвет;
  текстовое оформление: нет;
}

.additional-resrc-ul li {
  должность: родственница;
}
.additional-resrc-ul li: перед {
  содержание: "• ";
  вес шрифта: полужирный;
  цвет: #1DAEB;
}

.additional-resrc-ul li: после {
  содержание: "";
  z-индекс: -1;
  положение: абсолютное;
  сверху: 0;
  внизу: 0;
  слева: -30%;
  справа: 0;
}

.additional-resrc-ul li: hover {
  
  непрозрачность: 4,5;
}

.additional-resrc-ul li:hover::after {
  фон: #BFCDD5;
}

.additional-resrc-ul {
  поле: 0px;
  отступ: 0px;
  поле слева: 10%;
  вес шрифта: 300;
  размер шрифта: 10 пикселей;
  высота строки: 3,5 em;
} 

 <дел>
   
Дополнительные ресурсы
 
  <ул>
    
Войти/Зарегистрироваться
    
Запрос образцов
    
Техническая документация
  
 

7

Здесь я создаю меню с гибким столбцом и применяю наведение к каждому элементу и добавляю переход.

 .контейнер{
  дисплей: гибкий;
  выравнивание содержимого: пробел между;
 }

.ресурсы-список {
  дисплей: гибкий;
  flex-направление: столбец;
  гибкий: 0 0 20%;
}

.ресурсы-элемент{
  переход: все 250 мс линейные;
}

.resources-item: hover {
  цвет фона: серый;
}

.resources-item:before{
  содержание: '• ';
}

.приложение-контент{
  гибкий: 0 0 75%;
} 

 <дел>
        <дел>
             
Список ресурсов
 
            
лорем3
            
лорем3
            
лорем3
        

 
  Сохранить изменения
 

 .btn-первичный {
  цвет фона: #0ea5e9;
}
.btn-основной: наведите {
  цвет фона: #0369a1;
} 

 .bg-sky-500 {
  цвет фона: #0ea5e9;
}
.hover\:bg-sky-700:hover {
  цвет фона: #0369a1;
} 

 <кнопка>
  Сохранить изменения
 

 <кнопка>
  Сохранить изменения
 

 

  {#каждый человек как человек}
    
    

       imageUrl}" alt="" />
      <дел>
        
{person.name}
        
{person.email}