Красивые выскальзывающие подсказки при наведении на блок


Красивые выскальзывающие подсказки при наведении на блок

2941
8 из 10
Проголосовало: 5






Для создания выскакивающей оригинальной подсказки при наведении на блок, нам необходимо знать, с какой стороны будет выскальзывать эта подсказка, куда будет уходит наш заголовок, а так же сам фон и прочие детали... Так как могут возникнуть разные ситуации и могут пригодится разные подсказки, то давайте разберем, как сделать выскальзывание заголовка наверх, налево и направо. На самом деле, создать такой блок очень просто. Начнем с самой разметки...

HTML

Code
<div class="blockBottom">
<h5>Заголовок</h5>
<span><b>Заголовок</b> — описание.</span>
</div>

<div class="blockBottom">
<h5>Заголовок</h5>
<span><b>Заголовок</b> — описание.</span>
</div>

<div class="blockLeft">
<h5>Заголовок</h5>
<span><b>Заголовок</b> — описание.</span>
</div>

<div class="blockRight">
<h5>Заголовок</h5>
<span><b>Заголовок</b> — описание.</span>
</div>


CSS

Для начала давайте разберем простой пример: заголовок плавно уходит вверх, а за ним, снизу, появляется текст.

Как обычно, сначала оформим наш основной контейнер, класс blockBottom

Code
.blockBottom {
  background-color:#33CC26; /* Фон */
  width:300px; /* Фиксированная ширина */
  overflow:hidden; /* Будем убирать все то, что вылезло */
  height: 75px; /* Высота */
  display: inline-block; /* Все блоки будут идти друг за другом, можно убрать. */
  color:#fff; /* Цвет текста */
  padding:0 10px 10px 10px; /* Отступы. Сверху 0 */
}


Основное здесь лишь свойства overflow, width, height, хотя ширину и высоту можно было бы задать в процентном соотношении...

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

Сначала в состояние по умолчанию.

Code
.blockBottom h5{
  text-align:center; /* текст по центру */
  margin-top:25px; /* отступ сверху, чтобы текст был ровно по середине */
  padding:0; /* внутренние отступы */
  font:20pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* размер, семейство шрифта */
  padding-bottom:15px; /* отступ снизу */
}


Если вы еще не поняли, в чем тут фишка, то объясняю. Мы добавили свойство padding-bottom, то есть нижний отступ, который вытесняет текст из рамок нашего главного контейнера. А, так как у нашего главного контейнера стоит свойство overflow, со значением hidden, то та часть текста, которая была вытеснена, она просто напросто не будет показываться, "исчезнет".

Так же, чтобы выскальзывание было плавным, нужно добавить свойство transition:

Code
.blockBottom h5{
...
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
}


Теперь нужно сделать, что бы при наведении на наш главный контейнер, заголовок исчез, а текст появился. Для этого припишем:

Code
.blockBottom:hover h5{
  margin-top: -90px;
}


Вот и все! Осталось лишь оформить наш текст, выскальзывающий за заголовком.

Code
.blockBottom span{
  text-shadow:1px 0 0 #DFF9DD;
  font:11pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
}


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

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

Что и где нужно заменить:

Code
.blockLeft h5{
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  text-align:center;
  margin-top:25px; padding:0;
  font:20pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
  padding-bottom:15px;
}
.blockLeft:hover h5{
  margin-left: -500px;
  float:left;
}


Почти так же и в случае, когда нужно сделать, чтобы заголовок уходил в право:

Code
.blockRight h5{
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  text-align:center;
  margin-top:25px; padding:0;
  font:20pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
  padding-bottom:15px;
}
.blockRight:hover h5{
  margin-right: -500px;
  float:right;
}


вот и все...

а вот код для лентяев, которые не хотят все описание:

Code
<html>
<head>
<style>

body {
  background-color:white; /* Фон */
  margin:0; /* Внешний отступ 0 */
  padding:0; /* Внутренний отступ 0 */
  text-align:center; /* Текст по центру (для IE) */
}
.main {
  margin:0 auto; /* Внешних отступов 0, делаем элемент по центру */
  width:800px; /* Обяхательно наличие ширины */
  text-align:left; /* Текст по левому краю */
}

.blockBottom {
  background-color:#33CC26; /* Фон */
  width:300px; /* Фиксированная ширина */
  overflow:hidden; /* Будем убирать все то, что вылезло */
  height: 75px; /* Высота */
  display: inline-block; /* Все блоки будут идти друг за другом, можно убрать. */
  color:#fff; /* Цвет текста */
  padding:0 10px 10px 10px; /* Отступы. Сверху 0 */
}

.blockBottom h5{
  /* transition start */
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  /* transition end */
  text-align:center; /* текст по центру */
  margin-top:25px; /* отступ сверху, чтобы текст был ровно по середине */
  padding:0; /* внутренние отступы */
  font:20pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* размер, семейство шрифта */
  padding-bottom:15px; /* отступ снизу */
}
.blockBottom:hover h5{
  margin-top: -90px;
}
.blockBottom span{
  text-shadow:1px 0 0 #DFF9DD;
  font:11pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
}

.blockLeft {
  background-color:#6388B0;
  width:300px;
  overflow:hidden;
  height: 75px;
  display: inline-block;
  color:#fff;  
  padding:0 10px 10px 10px;
}

.blockLeft h5{
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  text-align:center;
  margin-top:25px; padding:0;
  font:20pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
  padding-bottom:15px;
}
.blockLeft:hover h5{
  margin-left: -500px;
  float:left;
}
.blockLeft span{
  text-shadow:1px 0 0 #6388B0;
  font:11pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
}

.blockRight {
  background-color:#DA3838;
  width:300px;
  overflow:hidden;
  height: 75px;
  display: inline-block;
  color:#fff;  
  padding:0 10px 10px 10px;
}

.blockRight h5{
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  text-align:center;
  margin-top:25px; padding:0;
  font:20pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
  padding-bottom:15px;
}
.blockRight:hover h5{
  margin-right: -500px;
  float:right;
}
.blockRight span{
  text-shadow:1px 0 0 #DA3838;
  font:11pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
}

</style>
</head>
<body>
<div class="main">
<br><br><br><br>

<div class="blockBottom">
<h5>Филоттрано</h5>
<span><b>Филоттрано</b> — коммуна в Италии, располагается в регионе Марке, подчиняется административному центру Анкона.</span>
</div>

<div class="blockBottom">
<h5>???</h5>
<span><b>webo4ka.ru</b> — А ты гуляешь на webo4ke???.</span>
</div>

<div class="blockLeft">
<h5>Кайласанатха</h5>
<span><b>Кайласанатха</b> — скальный индуистский храм, является центральным сооружением комплекса пещерных храмов в Эллоре.</span>
</div>

<div class="blockRight">
<h5>Вуд, Роберт</h5>
<span><b>Роберт Вуд</b> — английский путешественник, писатель. Его книга произвела переворот в изучении Гомера.</span>
</div>

</div>
</body>
</html>
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    203
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 1
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: