Макеты
  • EXMO affiliate program
  • Выгодный курс обмена валюты
  • Здесь может быть Ваш текст или баннер номер №3...
    Пишите Свободно

NEW: 
Затухание текста на CSS3 для Ucoz

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

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


Автор/Источник: не установлен автором Релиза или тупо источник неизвестен:)



Выгодный курс обмена валюты

Категория: Ucoz | Добавил: ♔Ďęŕჳҝuŭ♔ | Теги: CSS, текста, Затухание, uCoz Затухание текста на CSS3 для Ucoz CSS, текста, Затухание, uCoz

Похожие новости:

Имя *:
Email *: