наверх





Выскальзывающие блоки - что может быть лучше, чтобы перенести полезную информацию для посетителя вашего сайта? Конечно, тут все дело состоит в оформлении данного выскальзывающего блока, чем мы в данном примере и займемся!


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

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

На самом деле, создать такой блок очень просто. Начнем с самой разметки.

HTML


<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.

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


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

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

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

.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:

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


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

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


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

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


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

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

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

.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;
}


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

.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;
}





Просмотр демо-варианта


Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.