Надихаючі стилі для спливаючих підказок

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

Ми будемо використовувати CSS трансформації під час наведення, а також SVG для створення унікальних форм. Іконки взяті з бібліотеки шрифтів Font Awesome, а зображення — з сервісу Random User Generator.

Будь ласка, зверніть увагу, що ми використовуємо деякі сучасні CSS властивості, наприклад, 3D трансформації, які будуть працювати тільки в сучасних браузерах.

стилі

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

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

Також зверніть увагу на те, що створення анімації для атрибуту stroke-dasharray не працює у браузері IE

У нас є два різновиди підказок: в одному варіанті підказка з'являється зліва, а в іншому — праворуч. У цьому прикладі ми будемо використовувати SVG для створення форми підказки.