Как изменить горизонтальный курсор на вертикальный
Перейти к содержимому

Как изменить горизонтальный курсор на вертикальный

  • автор:

Изменение параметров мыши

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

Как изменить функции кнопок мыши

Значок кнопки

  1. Откройте окно свойств: нажмите кнопку Пуск ,
  • Чтобы поменять функции правой и левой кнопок мыши, в разделе Конфигурация кнопок установите флажок Обменять назначение кнопок.
  • Чтобы изменить скорость выполнения двойного щелчка, в разделе Скорость выполнения двойного щелчка переместите ползунок Скорость к значению Ниже или Выше.
  • Чтобы включить залипание кнопки мыши, которое позволяет выделять или перетаскивать элементы, не удерживая кнопку мыши, в разделе Залипание кнопки мыши установите флажок Включить залипание.

Как изменить указатель мыши

Значок кнопки

  1. Откройте окно свойств: нажмите кнопку Пуск ,
  • Чтобы изменить внешний вид всех указателей, в раскрывающемся списке Схема выберите новую схему.
  • Чтобы изменить отдельный указатель, в списке Настройка выберите указатель, нажмите кнопку Обзор, выберите нужный указатель и нажмите кнопку Открыть.

Как настроить указатель мыши

Значок кнопки

  1. Откройте окно свойств: нажмите кнопку Пуск ,
  • Чтобы изменить скорость перемещения указателя, в разделе Перемещение переместите ползунок Задайте скорость движения указателя к значению Ниже или Выше.
  • Чтобы указатель работал точнее при медленном перемещении мыши, в разделе Перемещение установите флажок Включить повышенную точность установки указателя.
  • Чтобы ускорить выбор элементов в диалоговом окне, в разделе Исходное положение в диалоговом окне установите флажок На кнопке, выбираемой по умолчанию. (Не все программы поддерживают этот параметр. В некоторых программах необходимо переместить указатель мыши к нужной кнопке).
  • Чтобы указатель было заметнее при перемещении, в разделе Видимость установите флажок Отображать след указателя мыши и перетащите ползунок к значению Короче или Длиннее, чтобы уменьшить или увеличить след указателя.
  • Чтобы указатель не мешал при вводе текста, в разделе Видимость установите флажок Скрывать указатель во время ввода с клавиатуры.
  • Чтобы указатель можно было найти, нажав клавишу Ctrl, в разделе Видимость установите флажок Обозначить расположение указателя при нажатии CTRL.

Как настроить колесико мыши

Значок кнопки

  1. Откройте окно свойств: нажмите кнопку Пуск ,
  • Чтобы задать количество строк, прокручиваемое одним движением колесика мыши, в разделе Вертикальная прокрутка выберите на указанное количество строк, а затем введите нужное количество строк.
  • Чтобы прокручивать весь экран одним движением колесика, в разделе Вертикальная прокрутка выберите на один экран.
  • Если колесико мыши поддерживает горизонтальную прокрутку, в разделе Горизонтальная прокрутка, в поле Наклон колесика в сторону служит для горизонтальной прокрутки на следующее число знаков, введите количество символов, прокручиваемое при наклоне колесика влево или вправо.

Курсор

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

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

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

Синтаксис

/* Ключевые слова */ cursor: auto; cursor: pointer; /* … */ cursor: zoom-out; /* Использование с обязательным резервным ключевым словом */ cursor: url(hand.cur), pointer; /* Использование URL и координат с обязательным резервным ключевым словом */ cursor: url(cursor_1.png) 4 12, auto; cursor: url(cursor_2.png) 2 2, pointer; /* Использование URL с резервными URL (иногда с координатами) с обязательным резервным ключевым словом */ cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), /* …, */ url(cursor_n.cur) 5 5, progress; /* Глобальные значения */ cursor: inherit; cursor: initial; cursor: revert; cursor: revert-layer; cursor: unset; 

Значения

url() или разделенный запятыми список url(), url(), … , указывающий на файл изображения. В качестве запасного варианта можно указать несколько url() на случай, если некоторые типы изображений курсора не поддерживаются. Резервный вариант, отличный от URL-адреса (одно или несколько ключевых слов), должен находиться в конце резервного списка.

Необязательные координаты X и Y, задающие указательную точку курсора.

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

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

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

Указывает на возможность перемещения объекта.

Приближение или уменьшение.

Указывает на возможность схватить и переместить объект.

Формальное определение

Начальное значение auto
Применяется к все элементы
Наследуется да
Обработка значения как указано, но с абсолютными значениями url
Animation type discrete

Формальный синтаксис

cursor =
[ [ | ] [ ]? ]#? [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ]

=
|

=
x

=
y

=
url( * ) |

=
src( * )

Примеры

Задание типа курсора

.foo  cursor: crosshair; > .bar  cursor: zoom-in; > /* Использование резервного ключевого слова обязательно при использовании URL */ .baz  cursor: url("hyper.cur"), auto; > 

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

Specification
CSS Basic User Interface Module Level 4
# cursor

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

BCD tables only load in the browser

Смотрите также

  • pointer-events
  • url() function

7 лайфхаков в Figma, которые упростят вам работу

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

Катя Павловская для Skillbox Media

Вячеслав Лазарев

Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

Рассказываем о семи простых лайфхаках, которые помогут вам быстрее работать в Figma.

Свернуть вложенные фреймы и группы

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

Чтобы моментально свернуть все фреймы, группы и компоненты, нажмите сочетание клавиш Alt (⌥) + L.

Предпросмотр цвета

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

Переименование фреймов

По умолчанию Figma создаёт новые фреймы с названием Frame 1 — оно ничего не говорит о содержимом фрейма, особенно для тех, кто в ваш макет заходит впервые. Переименовать один такой фрейм — легко, но если их 10 или 20, то придётся потратить на это много времени.

Чтобы быстро систематизировать названия одинаковых по смыслу фреймов, выделите их, нажмите сочетание клавиш Сtrl (⌘) + R. Откроется меню, в котором вам будет предложено переименовать выделенные объекты:

Настройки переименования объектов:

  • Match — часть имени, которую вы хотите изменить. Если ничего здесь не указать, название объекта поменяется целиком.
  • Rename to — новое имя для объектов.
  • Кнопка Current name — добавить текущее название объекта.
  • Кнопки Number — добавить порядковые номера по возрастанию Number ↑ или по убыванию Number ↓.
  • Start sequence from — указать, с какого числа начинать отсчёт. Параметр редактируется, если вы добавили в название порядковые номера.

Выравнивание с Tidy up

Два одинаковых объекта поставить ровно очень просто. Но если их 10 или 20, это превращается в большую и нудную задачу. Чтобы дизайнер не занимался подобной рутиной, в Figma есть функция Tidy up, с помощью которой можно автоматически расставить все объекты ровно, поменять их местами и изменить отступы.

Как пользоваться Tidy up

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

Горизонтальный прогресс-бар

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

Как создать горизонтальный прогресс-бар из текста

  • Создайте узкий и длинный фрейм.
  • Добавьте в этот фрейм текстовый блок и напишите в нём текст.
  • На панели слоёв нажмите на текстовый блок и в выпадающем меню выберите Frame section.
  • На панели инструментов нажмите на плюс напротив слов Auto Layout и измените высоту фрейма с текстом так, чтобы она совпадала с высотой основного фрейма.
  • У текстового модуля укажите контрастный фон, а непрозрачность текста — 0%.
  • Сместите фрейм с текстом так, чтобы он полностью заполнил правую часть основного фрейма.
  • По желанию углы обоих фреймов можно скруглить.

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

Круглый прогресс-бар

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

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

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

Кляксы стандартными инструментами

В Figma есть много плагинов для создания интересных форм, но их можно сделать и самостоятельно с помощью стандартных инструментов. Например — сферы и связки, похожие на кляксы.

Как сделать кляксу

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

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

Больше о Figma

  • Как делать варианты элементов интерфейса
  • 5 полезных плагинов: работа с текстом и шрифтами
  • Как работать с модульной сеткой
  • Как рисовать векторные изображения
  • Тени в интерфейсах: зачем они нужны и как их рисовать
  • Как создать тёмную тему

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

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Editor X: добавление настраиваемого курсора

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

Совет:

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

Содержание:

  • Добавление курсора
  • Изменение размера курсора
  • Смена курсора на другой
  • Удаление курсора

Совет:

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

Добавление курсора

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

Какие элементы может отображать курсор?
Вы можете применить курсор к таким элементам как:

  • Вся страница
  • Образец хедера
  • Образец футера
  • Горизонтальные и вертикальные секции
  • Контейнер
  • Изображение
  • Промобокс
  • Анимация Lottie
  • Лейаутер и его элементы
  • Репитер и его элементы
  • Стек
  • Видео без фона

Примечание:

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

Чтобы добавить курсор:
  1. Выберите нужную страницу, секцию или элемент в Editor X.
  2. Нажмите значок Инспектора вверху.
  3. Перейдите на вкладку Дизайн .
  4. Нажмите Курсор.
  5. Добавьте курсор:
    1. Нажмите + Добавить.
    2. (В Медиаменеджере) Выберите один из предложенных курсоров или нажмите + Добавить изображение или .svg, чтобы загрузить свой собственный файл.
    3. Когда будете готовы, нажмите Добавить на сайт.
  6. (Необязательно) Нажмите Предпросмотр в правом верхнем углу, чтобы увидеть, как курсор будет выглядеть на опубликованном сайте.
  • При наведении курсора на страницу вы можете нажать Применить к другим страницам, чтобы быстро добавить его на другие страницы сайта.
  • Вы можете настроить курсор для каждого размера экрана, выбрав другое изображение или размер.

Изменение размера курсора

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

Мы рекомендуем поддерживать размер курсора в диапазоне от 16×16 до 128×128 пикселей. Если курсор больше рекомендуемого размера, браузер посетителя может его вообще не отображать. Если он меньше, посетители смогут его увидеть, но нечетко.

Чтобы изменить размер курсора:
  1. Выберите нужную страницу, секцию или элемент в Editor X.
  2. Нажмите значок Инспектора вверху.
  3. Перейдите во вкладку Дизайн .
  4. Нажмите Курсор.
  5. Перетащите слайдер в разделе Размер.

Совет:

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

Смена курсора

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

Чтобы сменить курсор:
  1. Выберите нужную страницу, секцию или элемент в Editor X.
  2. Нажмите значок Инспектора вверху.
  3. Перейдите во вкладку Дизайн .
  4. Нажмите Курсор.
  5. Нажмите Изменить медиа.
  6. (В Медиаменеджере) Выберите или загрузите новый курсор.
  7. Нажмите Обновить.

Удаление курсора

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

Чтобы удалить курсор:
  1. Выберите нужную страницу, секцию или элемент в Editor X.
  2. Нажмите значок Инспектора вверху.
  3. Перейдите во вкладку Дизайн .
  4. Нажмите Курсор.
  5. Нажмите значок Удалить рядом с Изменить медиа.

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

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