Добро пожаловать на форум!
Новые сообщения Участники Правила форума Поиск RSS
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные пользователи Новые участники
Болт (3758)
XemorDio (2725)
Skyline (2698)
Strelok41 (2177)
grinia2011 [21.09.2017]
dongerero [19.09.2017]
SergejTevnyI [19.09.2017]
bublik [19.09.2017]
Dzey [17.09.2017]
Страница 1 из 11
Форум » Web-раздел » Скрипты uCoz » Информационное сообщение как на windows
Информационное сообщение как на windows
XemorDio Дата: Суббота, 10.09.2016, 17:39 | Сообщение # 1
「 Рипер, техник сайта 」
Группа: Модераторы
Сообщений: 2725
Награды: 12 Репутация: 294
Статус: Offline

Сегодня выкладываю простенькую подсказку на css (с использованием одной картинки - закрытия).

Подсказка выполнена в светло серых тонах, отображается в правом нижнем углу сайта, с позиционированием т.е. при прокрутке странице она будет двигаться вместе с экраном.

Текст в подсказке можно указать любой, так же можно данную подсказку применить для разных ссылок, баннеров и т.д.

Установка

1) Устанавливаем HTML-код в нижнюю часть сайта:
Код
<div class="wInformation">  
  <div class="wClose"></div>  
  <div class="wTitle">Информационное сообщение...</div>  
  <div class="wText">Вданном сообщение можно вывести любой текст или любую подсказку для пользователей сайта. <br> Заходи на Stalker-Danger, не пожалеешь:)</div>  
  <div class="wHint"><div class="wFhint"></div></div>  
  </div>  
  </div>

2) Далее вставляем CSS-код:
Код
<style type="text/css">  
  .wInformation {  
  background: linear-gradient(to bottom, #f5f5f5 0px, #eee 100%) transparent;  
  border: 1px solid #999;  
  border-radius: 3px;  
  width: 230px;  
  padding: 10px;  
  position: fixed;  
  bottom: 20px;  
  right: 190px;  
  z-index: 2;  
  font-family: "Calibri", "Tahoma", "Helvetica", sans-serif;  
  }  

  .wTitle {  
  color:#607989;  
  font-size:14px;  
  line-height:14px;  
  }  

  .wText {  
  color:#454545;  
  font-size:12px;  
  text-align:justify;  
  }  

  .wClose {  
  background-image: url('http://j-p-g.net/if/2016/06/23/0995083001466722693.png');  
  background-size: 100% 100%;  
  width: 18px;  
  height: 18px;  
  position: absolute;  
  right: 10px;  
  top: 8px;  
  opacity: 0.5;  
  }  

  .wClose:hover {  
  opacity: 1.0;  
  cursor: pointer;  
  }  

  .wHint {  
  border-left: 13px solid transparent;  
  border-top: 13px solid #999;  
  width: 0px;  
  height: 0px;  
  position: absolute;  
  right: 10px;  
  bottom: -13px;  
  z-index:2;  
  }  

  .wFhint {  
  border-left: 11px solid transparent;  
  border-top: 11px solid #eee;  
  width: 0px;  
  height: 0px;  
  position: absolute;  
  right: 1px;  
  top: -13px;  
  z-index:2;  
  }  
  </style>

3) И не забываем подключить закрытие окна, JS-код:
Код
<script>$('.wClose').click(function(){$('.wInformation').fadeOut(1000);});</script>
Форум » Web-раздел » Скрипты uCoz » Информационное сообщение как на windows
Страница 1 из 11
Поиск:
07:43
Обновить

Хостинг от uCoz | Design by XemorDio | MODSTALKER © 2009-2017