От автора: создание пользовательского курсора CSS для замены стандартного указателя мыши: для чего это нужно и подробное описание примера реализации. Как создать пользовательский курсор CSS всего за 5 минут? Узнаем из статьи.
Демо того, что мы будем создавать
Я пообедал, а потом сидел с полным животом и просто бесцельно просматривал красивые сайты. Я не помню, как я туда попал, но следующие 20 минут я был занят тем, что исследовал один конкретный сайт. Несколько вещей на сайте Mutt Agency были действительно супер-крутыми, но то, что особенно меня взволновало, это интеллектуальное использование пользовательских курсоров.
На приведенном выше GIF курсор превращается в точку в верхней панели навигации, когда вы удаляетесь от основного контента.
Насколько легко это воссоздать? Логика, которая лежит в основе этого — просто одна строка.
.my-awesome-selector { cursor: url(../path/to/awesome/icon.svg), cursor)
}
Можете ли вы дать более подробное объяснение?
Какой лучший способ объяснить это, чем написать вместе код эффекта?
1. Перейдите на codepen.io и создайте новый pen
Мы создадим небольшое портфолио, начиная с разметки:
<main> Hello. I'm Ohans. User Interface Designer at Kudi.ai </main>
Тег main?
Пока все понятно. В самом деле? Пока не о чем волноваться.
2. Поместите основное содержимое в центре экрана. Flexbox в этом поможет!
body { display: flex; justify-content: center; align-items: center; min-height: 100vh;
}
Вот как это работает:
Ниже приведен результат этого кода:
3. Давайте сделаем это красивым.
Каждый раз, когда вы создаете уродливое приложение, кто-то умирает. Нет, не совсем так. Но давайте все же сделаем это красивым.
body { … background-color: #2980b9; color: #ecf0f1; font-size: 3em; text-align: center;
}
main { border: 1px solid #bdc3c7; cursor: pointer; max-width: 60%; padding: 1.5rem 2rem;
}
Довольно простые вещи, да?
Для непосвященных max-width установит для элемента максимальную ширину. Да, вы догадались. padding: 1.5rem 2rem устанавливает дополнение к элементу с помощью сокращенного свойства поля. Верхнее и нижнее поля будут равны 1.5em, значение левого и правого полей будет равно 2rem. Вот результат:
4. Нам нужно немного больше разметки
Ладно, я соврал. Когда я сказал, что нам не нужна дополнительная разметка, это было не так. Нам нужно немного больше разметки. Я скажу вам скоро почему.
<main> <div class="main_hover-up"></div> Hello, I'm Ohans. <br /> User Interface Designer at Kudi.ai <div class="main_hover-down"></div> </main>
Мы будем захватывать взаимодействие пользователя с элементами .main_hover-up и main_hover-down. Но сначала мы должны сделать их видимыми и правильно размещенными.
5. Настройка позиционирования контекст в контейнере
main { position: relative;
}
Установив позиционирование контекста мы можем продолжить позиционирование дочерних элементов с помощью ключевых слов top, bottom , left и right.
6. Позиционирование и стиль элементов для захвата взаимодействия с мышью
.main_hover-up,
.main_hover-down{ position: absolute; top: -102%; left: 0; height: 100%; width: 100%; transform: scaleX(2); transform-origin: 50% 100%; background: red;
}
.main_hover-down { top: 102%;
}
Я знаю — это много кода.
И вот результат.
Не обращайте внимания на красный фон. Я включил его для большей визуальной наглядности.
Красный фон. В самом деле? Я знаю, вы не для того зашли так далеко, чтобы в результате получить эти уродливые красные блоки. Давайте сделаем их прозрачными.
.main_hover-up,
.main_hover-down { background: transparent
}
Более разумно удалить прежнее объявление background: red. По умолчанию элементы имеют прозрачный фон.
Уродливые фоны исчезли!
7. Теперь получим пользовательские курсоры!
.main_hover-up:hover { cursor: url(http://bit.ly/2DfPhcj), pointer;
}
.main_hover-down:hover { cursor: url(http://bit.ly/2GaJR5q), pointer;
}
Теперь, когда вы перемещаете указатель вверх, покидая область основного контента, появляется стрелка вверх, к области навигации. Когда вы опуститесь вниз, появляется стрелка вниз — указывая, что здесь есть другой контент.
Довольно круто!
Как это влияет на пользовательский опыт?
Если вы не знаете, что делаете, не создавайте непонятные пользовательские курсоры. Хорошо? В этом конкретном случае пользовательский опыт не страдает. Пользователь не отвлекается каким-то причудливым GIF-курсором. Вместо этого пользовательский курсор использовался для навигации по сайту. Отлично!
О, это не работает у меня.
Если у вас возникли какие-либо ошибки при использовании SVG в качестве пользовательского курсора, обязательно проверьте размеры. придерживайтесь небольших размеров. Максимум 128px * 128px. Кроме того, убедитесь, что у вас для SVG размеры ширины и высоты заданы явно — а не с использованием viewbox.
Автор: Ohans Emmanuel
Источник: https://codeburst.io/
Редакция: Команда webformyself.