Делаем красивый fade для переполненного блока без js

Сегодня хочу рассказать об интересном способе получения такого эффекта с помощью 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;
}

Всё!

Демо