| Автор |
Сообщение |
|
Admin Администратор Зарегистрирован: 2010-07-27 Сообщ.: 777
|
 17-Мар-11 19:17 |
#1  |
сегодня задумался-а нельзя ли на главной странице нашего сайта сделать подсказки как на дле и смз сайтах.то есть ,при наведении на слово или на ссылку выскакивает всплывающее окошко.очень это удобно и информативно.
перерыв через яшку(яндекс) сайты,остановился на простом и понятном коде css.
как же можно сделать красивую всплывающую подсказку (аналог title) с помощью css?
между <body> и </body>
ставим вот этот код
| Код: |
<style type="text/css">
.title{
position:relative;
z-index:1;
zoom:1;
color:;
}
.title em{display:none;}
.title:hover em{
display:block;
position:absolute;
z-index:1;
background-color:#fffddf;
-webkit-border-radius:5px; /* красивости в виде скругленных углов */
-moz-border-radius:5px;
border-radius:5px;
line-height:normal;
color:#007fff;
border: 1px solid red;
border-bottom-color: red
text-decoration:none;
padding:1px 45px;
bottom:22px;
right:0;
-webkit-box-shadow:0 0 5px #00ff00; /* красивости в виде тени */
-moz-box-shadow:0 0 5px #00ff00;
box-shadow:0 0 5px #00ff00;
}
.title:hover em i{
position:absolute;
z-index:1;
bottom:-7px;
right:5px;
border-top:7px solid #ffcc00;
border-left:7px solid transparent;
_border-left:7px solid #ffcc00; /* цвет фона. это для ие6.*/
display:block;
height:0;
overflow:hidden;
}
</style>
<a
href="http://torrentpier-download.ru/forum/"><span
class="title">Форум
torrentpier<em>перейти на форум</em></span></a>
|
давайте разберем этот код! при правлениии этого кода все можно править на свой вкус!
<style type="text/css">
.title{
position:relative;
z-index:1;
zoom:1;
color:#вот тут можно окрасить в цвет ссылку;
}
.title em{display:none;}
.title:hover em{
display:block;
position:absolute;
z-index:1;
background-color:#fffddf(цвет фона-в данном случае-цвет слоновой кости);
-webkit-border-radius:5px; /* красивости в виде скругленных углов */
-moz-border-radius:5px;
border-radius:5px;
line-height:normal;
color:#007fff(цвет окраски букв подсказки- в данном случае в голубой);
border: 1px solid red; (размер в px и цвет рамки-красный)
border-bottom-color: red (цвет рамки-красный)
text-decoration:none;
padding:1px 45px; (высота и размер контура отображения)
bottom:22px;
right:0;
-webkit-box-shadow:0 0 5px #00ff00; /* красивости в виде тени */
-moz-box-shadow:0 0 5px #00ff00;
box-shadow:0 0 5px #00ff00;
}
.title:hover em i{
position:absolute;
z-index:1;
bottom:-7px;
right:5px;
border-top:7px solid #ffcc00;
border-left:7px solid transparent;
_border-left:7px solid #ffcc00; /* цвет фона. это для ие6.*/
display:block;
height:0;
overflow:hidden;
}
</style>
<a
href="http://torrentpier-download.ru/forum/"><span class="title">Форум torrentpier команда ,задаваемая для выведения-<span class="title">
<em>перейти на форум</em></span></a> вот это и есть всплывающее слово-заключаем в теги <em> </em>
Последний раз редактировалось: Admin (17-Мар-11 19:42), всего редактировалось 4 раз(а)
|
|
|
Вернуться к началу
|
|
|
Admin Администратор Зарегистрирован: 2010-07-27 Сообщ.: 777
|
| 17-Мар-11 19:34 |
#2 |
|
при тестировании использовал свою оперу 9.60, встроенный в ХРюшку IE9, и мозиллу firefox бета 1.
все отображается
у себя на своем локальном трекере код тестировал на страницах html и в php - все работает четко!
|
|
|
Вернуться к началу
|
|
|
Admin Администратор Зарегистрирован: 2010-07-27 Сообщ.: 777
|
|
|
Вернуться к началу
|
|
|
krumax Зарегистрирован: 2010-12-10 Сообщ.: 304
|
| 17-Мар-11 20:19 |
#4 |
|
Admin
Вообще это уже давно реализовано на многих трекерах.
|
|
|
Вернуться к началу
|
|
|
Admin Администратор Зарегистрирован: 2010-07-27 Сообщ.: 777
|
| 17-Мар-11 20:34 |
#5 |
|
krumax,согласен с Тобой,но .... не на сайтах,где все делается вручную и с нуля,где все делается ручками...
а там в трекерах(1.0.3.5 и в релизах) все встроенно и вмонтировано
|
|
|
Вернуться к началу
|
|
|
krumax Зарегистрирован: 2010-12-10 Сообщ.: 304
|
| 17-Мар-11 20:52 |
#6 |
|
Естественно есть разница между CMS и обычной вёрсткой html
|
|
|
Вернуться к началу
|
|
|
Admin Администратор Зарегистрирован: 2010-07-27 Сообщ.: 777
|
|
|
Вернуться к началу
|
|
|
monster27 Зарегистрирован: 2010-12-29 Сообщ.: 540
|
| 17-Мар-11 22:09 |
#8 |
|
а в чем же разница? Везде можно подключить скрипт и делать проверку на наличие title="" в любом теге содержащем его, чем прописывать куча ненужного кода.
|
|
|
Вернуться к началу
|
|
|
|
|
|
|
|
