* Мови: HTML / CSS
* Складність: Середня
* Час на виконання: 20 хвилин
Ох вже ці підказки, вони можуть бути відповіддю на безліч питань користувачів, або якщо ви хочете дещо на що вказати своїм відвідувачам. Сьогодні в інтернеті можна зустріти безліч веб-сайтів, на яких використовуються підказки, але ... як же їх краще всього впровадити в веб-сайт? Ми хочемо розповісти вам про цікавий спосіб, абсолютно виключає застосування j # 097; vascript. Сьогодні ми будемо розробляти дійсно прикольні підказки на чистому коді CSS3, а потім будемо адаптувати їх під мобільну версію, і саме тут нам доведеться попітніти, так як тут нам уже доведеться застосувати невеликий скрипт на j # 097; vascript від Діна Едвардса (Dean Edwards) - IE9.js.
Замітка: підказки повністю підтримуються браузером IE, починаючи від версії 8 і вище. IE7 також підтримує їх, за винятком мобільної версії (версію з можливість кліків).
А тепер перейдемо до розписаним по етапах керівництву. Також не забудьте завантажити файли, запропоновані на самому початку статті.
Етап 1: Розробка каркаса
Давайте почнемо з розробки головної частини нашого документа, а потім впровадимо в нього таблиці стилів. Ви можете видалити tut.css при розробці власного проекту, так як цей файл використовується тільки заради демонстрації в цій статті.
Ми скористалися типом файлу HTML5, який вказується як! DOCTYPE html, а потім викликали дві таблиці стилів. Перша таблиця відповідає за прозору версію, але в нашому вихідному документі ви можете вибрати кілька тем оформлення. Друга таблиця - це tut.css, про яку ми говорили вище, і вона використовується для оформлення прикладу в нашій сьогоднішній статті, тому ви можете вільно нею користуватися.
Тепер, коли ми закінчили розробку шапки документа, давайте перейдемо до розробки каркаса безпосередньо підказок. У даній статті ми будемо використовувати невпорядкований список, але ви можете використовувати будь-який варіант, так як в CSS ми використовуємо лише імена класів, замість виділення самого списку, що дозволяє нам легко вставити класи в будь бажане місце.
Після класу tip слід клас tooltipL (тобто strong class = "tooltipL"), який використовується для будь-яких підказок, які будуть відображені по ліву сторону від елемента, на який був наведений курсор. В даному випадку це відноситься до першої посиланням.
За прикладом, наведеним вище, далі в статті буде описаний процес розробки інших підказок. В принципі, тут все приблизно однаково для кожної підказки. Єдина відмінність в класах. Замість tooltipL у нас буде .tooltipR для всіх підказок, розташованих праворуч елемента, на який наведено курсор; .tooltipB, розташований в нижній частині, і .tooltipT, розташований у верхній частині. У будь-який час, в яке захочете, ви можете додати нову підказку в власний проект. Все, що вам потрібно буде зробити: використовувати один з цих класів, залежно від того, де ви хочете відобразити підказку.
Підказки для мобільних пристроїв
Ось ми і закінчили розробку HTML. Тепер давайте поглянемо на CSS, щоб змусити нашу «дитинку» працювати!
Етап 2: Розробка функціоналу та створення оформлення за допомогою CSS
Для нашого прикладу ми використовуємо стиль tip-transparency.css, але, знову ж таки, ви можете вибрати інший стиль, який вам більше сподобається.
Для того щоб почати, потрібно додати трохи стилів до наших класах.
Тут ми додамо параметр відносного позиціонування (position: relative), а також рядкове відображення блоків. Таким чином, підказка буде спливати на одній лінії з нашими елементами, на які буде наведений курсор.
Далі нам треба заховати всі підказки до того моменту, коли за відповідними елементами не буде зроблений клік, або поки не буде наведений курсор миші. Для цього нам потрібно просто виділити клас для кожного напрямку і використовувати параметр display: none.
Тепер у нас є робоча підказка, але потрібно оформити її. Для більшої частини підказок все буде майже однаково, за винятком пари моментів, про які ми розповімо пізніше.
Як видно, нам потрібно, щоб все підказки виглядали ідентично, тому у них у всіх однаковий фон і рівень щільності відображення виставлений на 85%. Також ми додали box-shadow, що надає глибини, і задіяли суцільну кордон, щоб внутрішній вміст відокремлювалося від основного вмісту сторінки.
Тут також слід вказати на наступні важливі аспекти: min-width: 200px використовується для того, щоб стрілочка була на одному рядку з елементом, від якого відходить підказка, абсолютне позиціонування (position: absolute) виставлено для того, щоб підказка не впливала на навколишні її елементи, а z-index: 10 використовується для того, щоб підказка завжди була поверх всього іншого вмісту.
Отже, що ж стосується відмінностей між підказками, то деякі з них розташовані щодо елемента, від якого вони походять. Ці значення, здавалося б, повинні працювати найкраще, і не повинні бути змінені, але тим не менш, якщо потрібно буде їх змінити для того, щоб все коректно працювало в ваших проектах, то найкраще використовувати динамічне ре-позиціонування за допомогою j # 097 ; vascript, але це вже зовсім не відноситься до даної статті.
Вивчаючи код CSS, представлений нижче, ви можете побачити, що ми перемістили підказки так, щоб вони знаходилися на одному рядку з елементами, від яких вони відходять, а відносне позиціонування в основних класах утримує підказки у елемента, на який був наведений курсор, т. е. підказка не розташовуються відразу після нього.
Майже закінчили! Тепер нам треба зробити стрілочку для підказок, яка буде вказувати на них. Знову ж таки, тут є кілька відмінностей, про які ми розповімо трохи пізніше.
Тут відмінність полягає в напрямку, в якому нам потрібно, щоб вказувала стрілочка, а також те, для чого ми використовуємо суцільний фон для одного боку і прозорий - для інших. Нам також треба зрушити їх зверху вниз і трохи вправо, щоб стрілочка виглядала так, як ніби вона розташована на елементі.
Після того, як ви зробите це, наш урок буде закінчено, а кінцевий результат повинен бути приблизно таким, як на зображенні нижче. Якщо у вас воно не виглядає так, як показано на зображенні, то поверніться трохи назад і перевірте код на помилки. Можливо, ви пропустили що-небудь.
Для того щоб ваш проект виглядав так, як на зображенні, використовуйте файл tut.css.