Увод лишней строки в градиент

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

Градиент для псевдоэлемента генерироваа тут - http://www.colorzilla.com/gradient-editor/

Рарзметка HTML:

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Стили CSS:

.some_class_name {
    position: relative;
    line-height: 1.20em;
    height: 3em;
    overflow: hidden;
}
.some_class_name:after {
    content: '';
    position: absolute;
    height: 0.6em;
    width: 100%;
    bottom: 0;
    left: 0;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}

Результат:

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
Способ поблагодарить автора сайта:

Комментарии (0)

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором
Наш сайт использует куки, нажмите «ОК» если вы не против
OK