Вітаю тебе, шановний користувач на своєму сайті. Колись, я вже розповідав про те як додати спливаючі підказки на CSS, Але сьогодні я бродив по інтернету і натрапив на прикольні спливаючі підказки при наведенні. Трохи потестувати їх, подумав що можливо комусь такі підказки, на чистому css для свого сайту також підійдуть.
Дані підказки можна використовувати практично для будь-якої кнопки на сайті, або до якогось словосполучення, зображення, та загалом до чого завгодно, але на прикладі спливаючі підказки на сайті використовуються саме для соціальних кнопок, при наведенні на які з'являється прикольна текстова підказка.
Дуже часто буває так, що на вашому сайті багато різних блоків, текстів і іншого корисного контенту, який може заплутати користувача, ось тут і приходять на допомогу подібні спливаючі підказки, ними можна надати якусь інформацію для якогось ділянки або кнопки на сайті.
У даній статті я хочу поділитися з вами чудовими підказками при наведенні, та й просто для себе зробити замітку на майбутнє, а раптом знадобиться :). В статті я не просто дам вам готове рішення скачати, а й трохи опишу що і з чим їдять, як налаштувати підказки на сайті, як їх підключити, в демонстрації ви зможете подивитися на різні їх ефекти, и.т.п ...
Ось такий приблизно вид матимуть спливаючі підказки на вашому сайті:
Загалом приступимо, і для початку нам потрібно створити HTML розмітку для наших анімованих підказок сайту, створимо li список який матиме приблизно такий вигляд:
|
1 2 3 4 5 6 7 8 |
<ul> <li><a href="#"><span>Google Plus</span></a></li> <li><a href="#"><span>Twitter</span></a></li> <li><a href="#"><span>Dribbble</span></a></li> <li><a href="#"><span>Facebook</span></a></li> <li><a href="#"><span>LinkedIn</span></a></li> <li><a href="#"><span>Forrst</span></a></li> </ul> |
Ну, в першому пункті складного немає нічого, думаю все зрозуміло, тепер давайте приступимо до більш складного завдання, це додавання css стилів, в яких будуть застосовані переходи і псевдо елементи такі як: before та: after. Для анімованих підказок ми будемо використовувати чистий css код, без застосування js скриптів. Нижче додамо приклад стилів css в якому елементи списку змістяться в ліву сторону ну а посилання приймуть такий вигляд:
|
1 2 3 4 5 6 7 8 9 |
.tt-wrapper li a{ display: block; width: 68px; height: 70px; margin: 0 2px; outline: none; background: transparent url(../images/icons.png) no-repeat top left; position: relative; } |
Після нам буде потрібно для кожного окремого фонового зображення вказати положення:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.tt-wrapper li .tt-gplus{ background-position: 0px 0px; } .tt-wrapper li .tt-twitter{ background-position: -68px 0px; } .tt-wrapper li .tt-dribbble{ background-position: -136px 0px; } .tt-wrapper li .tt-facebook{ background-position: -204px 0px; } .tt-wrapper li .tt-linkedin{ background-position: -272px 0px; } .tt-wrapper li .tt-forrst{ background-position: -340px 0px; } |
Наступним пунктом нам буде потрібно додати ефект появи підказки, який буде з'являтися над обраним пунктом зверху, встановимо властивість положення bottom рівним 100px.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.tt-wrapper li a span{ width: 100px; height: auto; line-height: 20px; padding: 10px; left: 50%; margin-left: -64px; font-family: 'Alegreya SC', Georgia, serif; font-weight: 400; font-style: italic; font-size: 14px; color: #719DAB; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #fff; background: rgba(255,255,255,0.3); text-indent: 0px; border-radius: 5px; position: absolute; pointer-events: none; bottom: 100px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); transition: all 0.3s ease-in-out; } |
У зв'язку з тим що підказка повинна з'явиться саме при наведенні мишкою на елемент посилання (а значення span в даному випадку виступає так само як посилання), і в цьому випадку спливаюче вікно підказки буде відображатися при проході вказівника мишки вище посилання. (Елемент span присутній, але зі значенням прозорості рівним нулю, тобто він стає видимим).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.tt-wrapper li a span:before, .tt-wrapper li a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,0.1); } |
Для того що б сформувати покажчик, нам буде потрібно застосувати властивість: before та: after. Стилі в цих значеннях будуть такими ж, плюс ми створимо за допомогою прозорих правих і лівих рамок трикутник. Псевдо-елемент: before в даному випадку є тінню для псевдо-елемента: after, в зв'язку з цим нам потрібно встановити темне його значення із застосуванням низької непрозорості.
|
1 2 3 4 5 |
.tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #fff; } |
Ну і останнім пунктом у нас буде, псевдо-елемент: after, який зміститься на 1 піксель і робиться білого кольору кругом підказки.
|
1 2 3 4 |
.tt-wrapper li a:hover span{ opacity: 0.9; bottom: 70px; } |
Ось в принципі і все що потрібно для того що б зробити підказки на вашому сайті, складного тут нічого немає, але підказки на сайті виглядають дійсно красиво.
Подивитися живий приклад спливаючих підказок ви можете у нас на сайті:
Немає коментарів
Ви можете залишити коментар першим.