Создание уникального веб-опыта с помощью пользовательских курсоров на CSS

Создание уникального веб-опыта с помощью пользовательских курсоров на CSS

От автора: создание пользовательского курсора CSS для замены стандартного указателя мыши: для чего это нужно и подробное описание примера реализации. Как создать пользовательский курсор CSS всего за 5 минут? Узнаем из статьи.

Демо того, что мы будем создавать

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

На приведенном выше GIF курсор превращается в точку в верхней панели навигации, когда вы удаляетесь от основного контента.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Насколько легко это воссоздать? Логика, которая лежит в основе этого — просто одна строка.

Можете ли вы дать более подробное объяснение?

Какой лучший способ объяснить это, чем написать вместе код эффекта?

1. Перейдите на codepen.io и создайте новый pen

Мы создадим небольшое портфолио, начиная с разметки:

Тег main?

Пока все понятно. В самом деле? Пока не о чем волноваться.

2. Поместите основное содержимое в центре экрана. Flexbox в этом поможет!

Вот как это работает:

Ниже приведен результат этого кода:

3. Давайте сделаем это красивым.

Каждый раз, когда вы создаете уродливое приложение, кто-то умирает. Нет, не совсем так. Но давайте все же сделаем это красивым.

Довольно простые вещи, да?

Для непосвященных max-width установит для элемента максимальную ширину. Да, вы догадались. padding: 1.5rem 2rem устанавливает дополнение к элементу с помощью сокращенного свойства поля. Верхнее и нижнее поля будут равны 1.5em, значение левого и правого полей будет равно 2rem. Вот результат:

4. Нам нужно немного больше разметки

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Мы будем захватывать взаимодействие пользователя с элементами .main_hover-up и main_hover-down. Но сначала мы должны сделать их видимыми и правильно размещенными.

5. Настройка позиционирования контекст в контейнере

Установив позиционирование контекста мы можем продолжить позиционирование дочерних элементов с помощью ключевых слов top, bottom , left и right.

6. Позиционирование и стиль элементов для захвата взаимодействия с мышью

Я знаю — это много кода.

И вот результат.

Не обращайте внимания на красный фон. Я включил его для большей визуальной наглядности.

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

Более разумно удалить прежнее объявление background: red. По умолчанию элементы имеют прозрачный фон.

Уродливые фоны исчезли!

7. Теперь получим пользовательские курсоры!

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

Довольно круто!

Как это влияет на пользовательский опыт?

Если вы не знаете, что делаете, не создавайте непонятные пользовательские курсоры. Хорошо? В этом конкретном случае пользовательский опыт не страдает. Пользователь не отвлекается каким-то причудливым GIF-курсором. Вместо этого пользовательский курсор использовался для навигации по сайту. Отлично!

О, это не работает у меня.

Если у вас возникли какие-либо ошибки при использовании SVG в качестве пользовательского курсора, обязательно проверьте размеры. придерживайтесь небольших размеров. Максимум 128px * 128px. Кроме того, убедитесь, что у вас для SVG размеры ширины и высоты заданы явно — а не с использованием viewbox.

Автор: Ohans Emmanuel

Источник: https://codeburst.io/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по Flexbox

Изучите работу с Flexbox

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree