Сучасні підказки для сайту при наведенні
Анімовані підказки для сайту
Створення, розробка, виготовлення сайтів | WEB-STYDIA.COM

Вітаю тебе, шановний користувач на своєму сайті. Колись, я вже розповідав про те як додати спливаючі підказки на CSS, Але сьогодні я бродив по інтернету і натрапив на прикольні спливаючі підказки при наведенні. Трохи потестувати їх, подумав що можливо комусь такі підказки, на чистому css для свого сайту також підійдуть.

Дані підказки можна використовувати практично для будь-якої кнопки на сайті, або до якогось словосполучення, зображення, та загалом до чого завгодно, але на прикладі спливаючі підказки на сайті використовуються саме для соціальних кнопок, при наведенні на які з'являється прикольна текстова підказка.

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

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

Ось такий приблизно вид матимуть спливаючі підказки на вашому сайті:

Загалом приступимо, і для початку нам потрібно створити HTML розмітку для наших анімованих підказок сайту, створимо li список який матиме приблизно такий вигляд:

Ну, в першому пункті складного немає нічого, думаю все зрозуміло, тепер давайте приступимо до більш складного завдання, це додавання css стилів, в яких будуть застосовані переходи і псевдо елементи такі як: before та: after. Для анімованих підказок ми будемо використовувати чистий css код, без застосування js скриптів. Нижче додамо приклад стилів css в якому елементи списку змістяться в ліву сторону ну а посилання приймуть такий вигляд:

Після нам буде потрібно для кожного окремого фонового зображення вказати положення:





Наступним пунктом нам буде потрібно додати ефект появи підказки, який буде з'являтися над обраним пунктом зверху, встановимо властивість положення bottom рівним 100px.

У зв'язку з тим що підказка повинна з'явиться саме при наведенні мишкою на елемент посилання (а значення span в даному випадку виступає так само як посилання), і в цьому випадку спливаюче вікно підказки буде відображатися при проході вказівника мишки вище посилання. (Елемент span присутній, але зі значенням прозорості рівним нулю, тобто він стає видимим).

Для того що б сформувати покажчик, нам буде потрібно застосувати властивість: before та: after. Стилі в цих значеннях будуть такими ж, плюс ми створимо за допомогою прозорих правих і лівих рамок трикутник. Псевдо-елемент: before в даному випадку є тінню для псевдо-елемента: after, в зв'язку з цим нам потрібно встановити темне його значення із застосуванням низької непрозорості.

Ну і останнім пунктом у нас буде, псевдо-елемент: after, який зміститься на 1 піксель і робиться білого кольору кругом підказки.

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

Подивитися живий приклад спливаючих підказок ви можете у нас на сайті:

Таким начебто нескладним способом ви можете відобразити анімовані, спливаючі підказки практично на будь-яке посилання або картинку вашого сайту, і при цьому ваш сайт буде дуже красиво виглядати.
Загалом пробуйте і у вас все вийде, а я йду спати :).

Вас також може зацікавити

Немає коментарів

Ви можете залишити коментар першим.

Залишити коментар

Будь ласка, введіть Ваше ім'я. Будь ласка, введіть адресу електронної пошти. Будь ласка, введіть повідомлення.