Как сделать всплывающие иконки

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

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

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

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Анимация фона при прокрутке страницы

Анимируем SVG фигуры при прокрутке страницы.

Пример 3D помещения выставки

Экспериментальная 3D проекция помещения галереи.

Источник

Красивая панель с плавающими ярлыками для Рабочего стола

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

У меня на Рабочем столе установлена вот такая симпатичная и очень удобная панель с ярлыками самых необходимых программ. Когда наводишь на неё курсор, иконки как бы выплывают на передний план, и увеличиваются в размерах. Называется такая панель – Rocket Dock.

Панель ярлыков на Рабочем столе. Установка

Устанавливается панель легко и просто. Достаточно набрать в поисковике фразу « программа Rocket Dock скачать», зайти на сайт с программой и скачать её себе на компьютер. Потом запустить установочный файл, и следовать инструкции установки.

Наверху Рабочего стола появиться ваша новая панель.

Настройка панели ярлыков Рабочего стола

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

Откроется окно Настройка панели .

Настройте панель на свой вкус. Особенно обратите внимание на вкладку Стиль . Откройте список Тема , и выберите стиль подходящий вашему Рабочему столу.

Не забывайте сохранять свои настройки кнопкой ОК .

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

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

Кстати вы можете расположить ее сверху, справа, слева или внизу вашего Рабочего стола.

Теперь все ваши иконки будут размещены на панели ярлыков, а Рабочий стол будет чистым. А самое удобное то, что все ярлыки будут доступны при всех открытых окнах. Будь то окно браузера, фотошоп, текстового редактора Word или таблиц Excel.

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

Пользуйтесь и наслаждайтесь.

Видеоролик Панель ярлыков на Рабочем столе. Установка:

Источник

Как делается в html всплывающая подсказка?

Дата публикации: 2016-10-20

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

Стандартная подсказка

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

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

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Там может быть как одно слово, так и несколько предложений. И вот так это выглядит:

Подсказка появляется плавно, не сразу после наведения, а спустя какое-то время. Это поведение, заложенное по умолчанию.

Основная проблема такой подсказки — ее невозможно стилизовать. Как решать данную проблему? Придется делать подсказку другими способами. Сейчас я покажу вам парочку.

Способ на чистом css

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

Непонятным для вас тут может быть только атрибут data-name. Дело в том, что это так называемый data-атрибут, который сам по себе ничего не делает, но его значение можно использовать в css и javascript, что делает его полезным в некоторых случаях. Далее вы увидите это.

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

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

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

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Кода много, но ничего сложного тут нет. Селектор #tiger:hover:after означает следующее: когда мы наводим курсор на блок с картинкой, нужно создать псевдоэлемент after (и далее в фигурных скобках перечисляются правила). Свойство content: attr(data-name) задает текстовое значение блоку. Оно будет равно тому, что записано в атрибуте data-name у блока-обертки картинки.

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

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

Способ 2. Чистый css и плавное появление

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

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

Все права защищены © 2022
ИП Рог Виктор Михайлович
ОГРН: 313774621200541
Служба поддержки

Источник

Как сделать чудесные, анимированные всплывающие подсказки с помощью CSS.

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

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

Образец

Вот над чем мы собираемся работать:

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

Замечание о доступности и возможностях

Если вы ищете всплывающие подсказки совместимые с 508-м разделом (стандарт, принятый в США, для создания веб-ресурсов для людей с ограниченными возможностями) или вам нужны более умные подсказки с обнаружением столкновения контейнеров и/или поддержкой HTML содержимого или обычного текста, существует множество решений, в которых для этих задач используются сторонние скрипты.

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

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

Давайте определим чего следует ожидать

JavaScript не требуется
Мы будем использовать селектор атрибута (не название класса), используя встроенные возможности CSS.
Будем использовать существующие DOM элементы (никакие новые элементы не потребуются в вашей разметке*)
В примерах кодов не используются префиксы (поэтому если вам нужно, сами добавьте префикс для вашего браузера)
Для переключения всплывающих подсказок будем использовать событие в наведении мыши — mouseover/hover
Всплывающие подсказки поддерживают только простой текст (HTML, изображения и прочее не поддерживается)
Лёгкая анимация при вызове всплывающих подсказок

Отлично! Давайте раскачаем эту лодку!

Ой, подождите! Есть сноска (*), давайте сначала договоримся об “дополнительная разметка не нужна”. Всё-таки это магия! Нашим всплывающим подсказкам действительно не нужны дополнительные DOM элементы, так как они сделаны полностью на псевдо-элементах ( ::before и ::after ), которыми мы можем управлять с помощью CSS.

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

Никакой вечеринки без всплывающих подсказок!

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

position: relative , или
position: absolute , или
position: fixed

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

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

Ну что ж, запрыгиваем и понеслась!

Селектор атрибута: Быстрое напоминание

Большинство CSS правил написаны для использования по названию класса, например .this-thing , но в CSS есть несколько типов селекторов. Для наших чудесных подсказок мы будем использовать селектор атрибута/свойства — объявляется квадратными скобками.

Когда браузер встречает что-то вроде этого:

он поймет, что нужно применить правила [foo] , потому что в теге имеется атрибут названный foo. В этом случае, сам span будет полупрозрачного черного цвета с белым текстом.

HTML элементы имеют различные встроенные атрибуты, а также мы можем придумать свои собственные. Наподобие foo , или tooltip . По умолчанию, HTML не знает что он означает, но с помощью CSS мы можем подсказать HTML, что с этим делать.

Почему селекторы атрибутов?

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

Рассмотрим в этом примере кода: имя класса .tooltip и атрибут [tooltip] . Имя класса является одним из значений атрибута [class] , в то время, как атрибут tooltip имеет значение, а содержащее текст, который мы хотим отобразить.

Теперь добавляем Алхимию в подсказку

Наши подсказки будут использовать два атрибута:

tooltip : содержит содержимое подсказки (строка простого текста)
flow :не обязательно; позволяет нам управлять с тем, как раскрыть подсказку. Мы можем использовать много способов размещения, но мы рассмотрим 4 обычных направления:
сверху, слева, справа, снизу.

Теперь давайте настроим основу для всех подсказок. Правила 1-5 пунктов применяются для всех подсказок, независимо от того какое направление flow мы им зададим. Пункты 6–7 имеют различия для значений flow .

1. Относительность

Это для родительского элемента подсказки. Давайте назначим позицию так, чтобы абсолютное расположение частей подсказки (псевдоэлементы ::before и ::after ) находилось в контексте родительского элемента, а не в контексте страницы в целом или прародительского элемента, или какого-то другого внешнего элемента в дереве DOM.

2. Настало время для псевдо-элементов

Пришло время для выхода псевдоэлементов на сцену. Пока что, мы зададим общее свойство для обоих частей ::before и ::after . Свойство content — выполняет основную работу псевдо-элемента, и скоро мы до него доберемся.

3. Dink

Я не знаю, какое отношение имеет к этому «dink, но я всегда называл это так. Эта маленькая, треугольная, заострённая часть, придающая подсказкам вид, как у пузыря с диалогом, указывающая туда, откуда оно появилось. Заметьте, что мы используем прозрачный цвет ( transparent ) для границы; мы добавим цвет позже, также как и зависимость подсказки от направления flow .

Это не опечатка, что значение свойства имеет пустую строку — content: »; . Нам там ничего не нужно, но нам нужно это свойство для работы псевдо-элемента.

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

4. Пузырики!

Мы добрались до сути. Заметьте что content: attr(tooltip) говорит, “Этот псевдо-элемент должен использовать значение атрибута tooltip в качестве контента.” Вот почему использование атрибутов вместо названия классов является отличным решением!

Заметьте, что значения z-index присутствуют для обоих элементов и «dink», и пузырика. Это произвольные значения, но имейте в виду, что значения z-index являятся относительными. Разъяснение: значение z-index: 1001 внутри элемента с z-index: 3, означает, что элемент 1001 будет самым верхним элементом внутри этого контейнера с z-index: 3.

Свойство пузырика z-index должно быть как минимум на 1 меньше чем z-index у «dink». Если это значение такое же или выше чем у «dink», вы можете столкнуться с эффектом неравномерной цветовой окраски «dink», если вы применяете box-shadow для ваших подсказок.

Чтобы узнать подробнее о свойстве z-index, взгляните на следующее руководство:

5. Взаимодействие с действием

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

Если вы вернётесь нашему блоку со стилями на Шаге 2, вы должны увидеть, что мы использовали opacity: 0; наряду с display: none; для частей нашей подсказки. Мы сделали так, чтобы использовать эффекты анимации CSS, при отображении и скрытии подсказки.

Свойство display не может быть анимировано, а свойство opacity может! И напоследок мы займёмся анимацией. Если вас не интересуют анимированные подсказки, просто уберите opacity: 0; на Пункте 2 и не обращайте внимания на анимацию в Пункте 7.

Последнее, что нам нужно, все еще относится ко всем подсказкам — это способ подавить всплывающую подсказку, если у нее нет содержимого. Если вы заполняете всплывающие подсказки некоторой динамической системой (Vue.js, Angular, или React, PHP и т.д.), нам не нужны тупые пустые пузырьки!

6. Управление направлением

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

«В Круге-K происходят странные вещи» — Тед Теодор Логан

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

Это говорит браузеру: «Для всех элементов с атрибутом tooltip , которые либо не имеют атрибута flow , либо имеют flow со значением, которое начинается с “наверх”: применить эти стили к своему псевдониму ::before .»

Мы используем шаблон, так что они могут быть распространены на другие flow без необходимости повторять CSS. Этот шаблон flow^=»up» использует сопоставитель ^= (начинается с). Это позволяет стилям также применяться к up-right и up-left (вправо-вверх и влево-верх), вы можете захотеть использовать такие направления. Мы не будем описывать их здесь, но вы можете увидеть, как они используются в моей оригинальной демонстрации всплывающей подсказки в CodePen.

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

Наверх (по умолчанию):

Влево:

Вправо:

7. Анимируем всё

Анимация просто потрясающая штука. Анимация может:

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

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

@keyframes

Нам понадобятся два вида анимации @keyframe . Подсказки вверх/вниз будут использовать keyframe tooltips-vert , а подсказки влево/вправо будут использовать keyframe tooltips-horz . Обратите внимание, что в обоих этих keyframe мы определяем только желаемое конечное состояние всплывающих подсказок. Нам не нужно знать, откуда они появляются (в подсказках есть информация о стиле). Мы просто хотим управлять тем, куда они направляются.

Теперь нам нужно применить эти keyframe к подсказкам, когда пользователь наводит курсор мыши на элементы с атрибутами [tooltip] . Поскольку мы используем различные направления для управления отображением всплывающих подсказок, нам необходимо определить эти возможности в стилях.

Используйте :hover, чтобы передать управление анимации

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

Обратите внимание на ключевое слово forwards в объявлении анимации. Это говорит анимации не сбрасываться после одного выполнения, а двигаться вперед и оставаться до конца.

Вывод

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

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

Источник

Как сделать всплывающие иконки