По умолчаниюСветлая версия
↑ перейти к списку статей

Затухание текста на CSS3

Сегодняшний пост будет коротким, но, думается мне, полезным.
Часто приходится слышать о том, как сделать «затухание» текста к низу, верху и т.д.
Есть варианты на js, есть варианты с картинкой и просто css-градиентом наложенными поверх текста.
Сегодня в голову пришел несколько другой подход к решению этой проблемы.
Его реализация проста как три копейки.
Нам понадобится два блока — контейнер и блок с текстом.

 <div class="shadow"> <div class="text">наш текст</div> </div> 

И всего два класса в css:
.shadow{
width:400px;
margin:20px auto;
cursor:text;
box-shadow:inset 0px -190px 190px -50px #add7f8;
}

.text{
color:#000;
position:relative;
z-index:-1;
background:#f9fca3;
}

Теперь суть.
Вкладываем блок с текстом в контейнер, которому задаем внутреннюю тень. Саму тень смещаем туда, где нам необходимо «затухание». Однако, внутренняя тень будет распределяться по всему контуру блока, и чтобы этого избежать, задаем ей отрицательное растяжение. За счет того, что у нас большое рассеивание и огромный сдвиг - затухание тень окажется только там, где она и нужна.
Текстовому блоку необходимо задать отрицательный z-index, чтобы тень контейнера была поверх него.
Вот и все дела.

Из плюсов:
1)текст полностью выделяемый
2)текстовый блок не выпадает из потока и в див-обертку можно добавлять любой контент(но затухания у него уже не будет)
3)затухание не зависит от размера блока и останется всегда там, где мы его добавили.

Из минусов:
1)из-за отрицательного z-index пришлось добавить значок курсора для текста(для явности)
2)в опере(11.52) несколько иначе отрабатывается растяжение, в результате чего тень становится очень интенсивной.
3)не работает в ИЕ до 8 включительно

Соответственно цвета, интенсивность и размеры можно выставить в параметрах тени.

Пример здесь

Поковырять код можно здесь

Кнопки для сайта

Комментарии запрещены.