Сегодня хочу рассказать об интересном способе получения такого эффекта с помощью css:

Демо



Задача:

Показывать fade только тогда, когда высота текста превышает высоту контейнера. Считается, что размеры контейнера заданы.


Решение:


Шаг первый


Для начала создадим разметку. Нам потребуются три блока:
  • для самого текста;
  • для вспомогательной распорки;
  • для fade.


<div class="text"></div>
<div class="helper"></div>
<div class="fade"></div>


Шаг второй


Основная идея состоит в том, что если два блока утекают влево (float: left), то они разместятся друг под другом, если высота промежуточного текста, в котором они плавают, больше высоты первого блока, или рядом друг с другом, если меньше. Иллюстрация:

В нашем случае утекать будут .text и .fade, а роль обтекаемого текста будет выполнять .helper.


.text {
    float: left;
    width: 400px;
}
.helper {
    height: 400px;
}
.fade {
    float: left;
    width: 400px;
    height: 60px;
    background: url(fade.png) repeat-x;
}

Высота вспомогательного элемента соответствует высоте контейнера. Тогда если .text (первый утекающий элемент) выше .helper, .fade сдвинется вправо.


Шаг третий


А теперь «инвертируем» поведение .fade путём смещения его влево на 100% ширины и вверх, чтобы он показывался в рамках контейнера:


.fade {
    ...
    margin: -60px 0px 0px -400px;
    position: relative;
}
* html .fade {
    position: static;
}

Position нужен для того, чтобы fade был сверху текста.

Шаг четвёртый


Кстати, о контейнере.


<div class="container">
    <div class="wrapper">
        <div class="text"></div>
        <div class="helper"></div>
        <div class="fade"></div>
    </div>
</div>

Обернём все элементы, чтобы дать простор их обтеканию:


.wrapper {
    width: 5000px;
    height: 100%;
}
.helper {
    height: 100%;
}

А сам контейнер сделаем таким, как хотели изначально:


.container {
    width: 400px;
    height: 400px;
    overflow: hidden;
    border: 1px solid #aaa;
}

Всё!


Демо