Красиво всплывающая подсказка с помощью CSS
В красивом стиле создана всплывающие подсказка, которая только сделано на CSS, где можно разместить название и баннер со стильным дизайном. Эта тот тип подсказки, что устанавливается под ключевое слова самостоятельно, так как в самом окне вы можете прописать больше, чем вы думаете информации. Изначально по самому дизайн, который выполнен виде темного обвода в 3 пикселя, где также по вверх присутствует закругление, что все можно редактировать к стилистике, что закреплена за этим материалом. Сам фон изначально идет в светлом тоне, но пришлось его немного изменить, так, чтоб просматривался баннер, это на тот случай, если кто-то будет прописывать рекламу. Также идет одно изображение, лучше его ставить изначально небольшим, чтоб само окно получилось аккуратным и в читабельном виде. В остальном как на страницы, где вы пишете заголовок, который также идет под своим форматом. Но и остается описание, что лучше кратко и понятно написать. И не забываем, она появится на ключевой фразе, а точнее на неком название, и нужно, чтоб тематика с этим названием была идентична. Это будет понятно как для пользователя, так и для поисковых систем. От стандартных она безусловно отличается, это по своей формаций и заполнению, где веб мастера больше оснований поставить тот информационный поток, чтоб при наведении можно было еще больше узнать про материал или статью, где будет вписана подсказка. Первым делом проверил на работоспособность: Приступаем к установке: HTML Код <body> <a><b>Наведите на меня</b> <div class="sakipode_kicgumares">Динамическая подсказка в чистом css3 <b>ZorNet.Ru - портал вебмастера</b> <img src="http://zornet.ru/ABVUN/sarunolas/milsagtugsa/zornet-Eg.png" /> <img src="http://zornet.ru/ABVUN/sarunolas/milsagtugsa/400x50.png" /> </div> </a> </body> CSS Код a { position: relative; cursor: pointer; font: normal normal 91% sans-serif; color: white; text-shadow: #272829 0 -1px; display: inline-block; } a > div.sakipode_kicgumares { font-style: normal; text-align: center; line-height: 147%; color: #1f1e1e; text-shadow: #f3ebeb 0 1px; background: #e8e6e6; background-clip: padding-box; box-shadow: 0 0px 2px rgba(12, 12, 12, 0.4); border: 5px solid #111; border: 4px solid rgba(19, 18, 18, 0.37); border-radius: 3px; position: absolute; width: 415px; margin-left: -200px; left: 50%; padding: 10px 0; bottom: 100%; margin-bottom: 10px; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.7s linear; -moz-transition: opacity 0.7s linear; -ms-transition: opacity 0.7s linear; -o-transition: opacity 0.7s linear; transition: opacity 0.7s linear; } a > div.sakipode_kicgumares:before, a > div.sakipode_kicgumares:after { content: ""; position: absolute; border-left: 9.7px solid transparent; border-right: 9.7px solid transparent; top: 100%; left: 50%; margin-left: -10px; } a > div.sakipode_kicgumares:before { border-top: 9.7px solid #171616; border-top: 9.7px solid rgba(25, 24, 24, 0.54); margin-top: 4px; } a > div.sakipode_kicgumares:after{ border-top: 9.8px solid #dad6d6; margin-top: -2px; z-index: 1; } a:hover > div.sakipode_kicgumares { visibility: visible; opacity: 1; } Здесь можно выставлять как в отдельную статью, так и в описание, но так сделать, чтоб она была по теме. Чтоб не просто навел и вот окно появилось, а так, где была бы заинтересованность все прочесть, так как есть возможность перейти как по баннеру, если он там будет, или по ссылке, что аналогично можно выставить. Демонстрация |
Поделиться в социальных сетях
Материал разместил
Комментарии: 0 | |