Как стать автором
Обновить

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

CSS *
Привет всем. Сегодняшний пост будет коротким, но, думается мне, полезным.
Часто приходится слышать о том, как сделать «затухание» текста к низу, верху и т.д.
Есть варианты на 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 включительно

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

Пример здесь

upd товарищ VitaZheltyakov предлагает накладывать еще одну тень для более плавного слияния с основным фоном.
Теги: css3box-shadowзатухание
Хабы: CSS
Всего голосов 62: ↑58 и ↓4 +54
Комментарии 38
Комментарии Комментарии 38

Похожие публикации

Лучшие публикации за сутки