Нескладна підказка на css

Підказка чистою css

Всім привіт! Сьогодні ми розглянемо ще один інтеренсий приклад підказки. Основним плюсом є: нескладна реаліація коду і коментар в css файлі для швидкого розбору і редагування.

дивитися прімерСкачать

Текстова підказка:

Текстова підказка

Підказка з посиланням:

Підказка з посиланням

Підказка з картинкою:

Підказка з картинкою

Схожі статті на цю тему:

  • CSS анімовані підказки
  • Підказки CSS3
  • Красива підказка при натисканні

А зараз опишу процес установки підказки по кроках.

1 крок. Підключаємо необхідні файли

Після того як скачали архів з вихідними кодами звідти нам буде потрібен один файл style.css Підключаємо цей файл між тегами

HTML КОД
1
lt;link rel="Stylesheet" type="Text / css" href="Css / style.css"gt;

2 крок. HTML структура елемента help-tip



Створюємо один c ідентифікатором id = "content" і другий з класом class = "help-tip" в якому Містить сам вид підказки.

HTML КОД
12345678910111213141516
lt;div id="Content"gt;lt;div class="Help-tip"gt;lt;pgt; Текстова підказкаlt;/pgt;lt;/divgt;lt;pgt; Ти бачив діву на скеліlt;/pgt;lt;pgt; В одязі білої над хвилямиlt;/pgt;lt;pgt; Коли, буяє в бурхливій імлі,lt;/pgt;lt;pgt; Відігравало море з берегами,lt;/pgt;lt;pgt; Коли промінь блискавок осявавlt;/pgt;lt;pgt; Її повсякчас блиском червонимlt;/pgt;lt;pgt; І вітер бився і літавlt;/pgt;lt;pgt; Прекрасно море в бурхливій імліlt;/pgt;lt;pgt; І небо в блисках без лазурі-lt;/pgt;lt;pgt; Але вір мені: діва на скеліlt;/pgt;lt;pgt; прекрасних хвиль, небес і бурі.lt;/pgt;lt;/divgt;

3 крок. Додамо трохи стилів для help-tip

Я наводжу нижче стилі.

CSS КОД
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
/ * ------------------------- Css style --------------------- ----- * /*{margin:0-padding:0-}/ * ------------------------- Загальні стилі --------------------- ----- * /html{background-color:# eaf0f2-}body{font:14px/1.4 `Arial`, `Helvetica`, sans-serif-color: # 5b6469-}a, a: visited {outline:none-color:# 389dc1-}a: hover{text-decoration:none-}section, footer, header, hgroup, aside{display: block-}p{margin-bottom:20px-}p: Last-child{margin-bottom: 0-}/ * ------------------------- Заголовки ---------------------- ---- * /hgroup{text-align: center-padding: 60px 0 48px-font-family: `PT Serif`, `Cambria`, serif-}hgroup h1{color:# 828e93-font-size:18px-font-weight: normal-}hgroup h2{font-size:48px-}/ * ------------------------- Колір кнопки --------------------- ----- * /ul{list-style:none-text-align:center-margin-bottom:48px-}ul li{display: inline-block-margin: 0 8px-}ul li: hover{opacity: 0.9-}ul li a{color:#fff !important-text-decoration: none !important-font-size:15px-font-weight: bold-display: inline-block-padding:6px 14px-border-radius:3px-box-shadow: 1px 1px 1px rgba(0,0,0,0.1)-}ul li: nth-child(1) a{background-color: # 6bb9e1-}ul li: nth-child(2) a{background-color: # ec7164-}ul li: nth-child(3) a{background-color: # 6ad3c3-}/ * ------------------------------- Дизайн вмісту з текстом .------------ ------------------- * /#content{background-color: #FFF-border-radius: 4px-padding: 40px-margin: 0 auto-max-width: 600px-position: relative-margin: 0 auto 100px-}/ * ------------------------- Дизайн підказки --------------------- ----- * /.help-tip{position: absolute-top: 15px-right: 300px-text-align: center-background-color: # 000000-border-radius: 50%-width: 24px-height: 24px-font-size: 14px-line-height: 26px-cursor: default-}.help-tip: before{content:`?`-font-weight: bold-color:#fff-}.help-tip: hover p{display:block-transform-origin: 100% 0%--webkit-animation: fadeIn 0.3s ease-in-out-animation: fadeIn 0.3s ease-in-out-}.help-tip p{display: none-text-align: left-background-color: # 1E2021-padding: 10px-width: 150px-position: absolute-border-radius: 3px-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2)-right: -4px-color: #FFF-font-size: 13px-line-height: 1.4-}.help-tip p: before{position: absolute-content: ``-width:0-height: 0-border:6px solid transparent-border-bottom-color:# 1E2021-right:10px-top:-12px-}.help-tip p: after{width:100%-height:40px-content:``-position: absolute-top:-40px-left:0-}@ -webkit-keyframes fadeIn {0% {opacity:0-transform: scale(0.6)-}100% {opacity:100%-transform: scale(1)-}}@keyframes fadeIn {0% { opacity:0- }100% { opacity:100%- }}

Для того, що б вибрати інший вид подсказ, просто замініть контейнер на потрібний Вам.

Підказка з текстом.

HTML КОД
123
lt;div class="Help-tip"gt;lt;pgt; Текстова підказкаlt;/pgt;lt;/divgt;

Підказка з посиланням.

HTML КОД
123
lt;div class="Help-tip"gt;lt;pgt; Підказкаlt;bgt; з силкойlt;/bgt; lt;a href="Http://sitehere.ru/"gt; Натисни на мене!lt;/agt; lt;igt; lt;/igt; lt;/pgt;lt;/divgt;

Підказка з картинкою

HTML КОД
123
lt;div class="Help-tip"gt;lt;pgt; Підказка з картинкоюlt;brgt; lt;img src="Img / balloon.jpg" width="150" /gt; lt;/pgt;lt;/divgt;

Успіхів!

джерело: оригінал

З повагою, Бишкин Костянтин

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!