Как сделать затухание текст
CSS transitions: примеры анимации фона, текста, создания css-аккондеона input radio и затухающего «fade-out» текста
Плавный переход от одного состояния к другому обеспечивает свойство Transition CSS, управляя скоростью анимации при изменении значений стилей. Без этого свойства на сайте все менялось бы мгновенно, что не очень приятно для человеческого глаза. Сравнить это можно с резким включением яркого освещения ночью. Человек по своей природе не привык к такому эффекту, поэтому, чтобы управлять скоростью изменения стилей, используют Transition, который смягчает для восприятия эти переходы.
Инициировать CSS Transitions можно непосредственно псевдоклассами «:hover» (активируется при перемещении мыши по элементу), «:focus» (активируется, когда пользователь нажимает на элемент) или «:active» (когда пользователь нажимает на элемент ввода).
Тени в CSS: box-shadow и text-shadow под управлением transition
Очень часто на сайтах используют свойства CSS text-shadow и box-shadow. Обычно они выполнены почти незаметно, только для того, чтобы посетитель смог понять, что блок или текст «кликабельны». Тени чаще всего не делают яркими и «крикливыми», поэтому следующий пример применим на большинстве проектов.
Слева блок без теней, а справа, после события «hover», появляется тень вокруг блока (box-shadow) и тень вокруг текста (text-shadow).
Плавная смена цвета фона и непрозрачности в CSS
Чтобы цвет фона при наведении курсора на блок изменился, нужно определить стили для состояния «static» и для состояния «hover»:
Для псевдокласса «hover» при наведении курсора на div назначим другой цвет фона:
Плавный переход от одного цвета фона к другому происходит благодаря CSS Transition: background в течение 5 секунд. Добавим смену цвета шрифта:
Сделаем блок полупрозрачным с помощью CSS Transition opacity. Добавим в стили класса «.background» следующие строки:
Обратите внимание, что все CSS Transitions записаны в одну строку через запятую, только так они могут работать корректно.
Эту запись можно заменить на аналогичную:
В данном случае оба свойства будут изменяться в течение 5 секунд, но если необходимо установить разное время, тогда это будет выглядеть так:
Если нужна задержка старта анимации, применяем свойство transition-delay. Записывать его нужно после transition:
Весь блок стал полупрозрачным, т.е. свойство opacity применяется и к фону и к тексту (3 вариант на картинке). Если текст не должен быть полупрозрачным (4 вариант), тогда opacity нужно применять только к фону:
Все вместе будет выглядеть так:
Анимация аккордеона с помощью CSS Transitions
Ни один аккордеон или слайдер на чистом CSS не обходится без CSS Transitions.
Рассмотрим простой пример аккордеона на основе input radio, где псевдокласс «hover» будет инициировать переход стилей из одного состояния в другое. При наведении курсора на блок высота (height) этого блока будет увеличиваться, так как это тип radio, то остальные блоки будут закрываться:
Для начала уберем с видимой области экрана кружочки input radio:
CSS для блока с необходимым минимальным набором стилей:
При наведении курсора на div происходит смена цвета фона и увеличение высоты. Если вам необходимо, чтобы в блоке помещался весь текст, тогда используйте max-height 100% вместо height 200px.
Добавим тень на все блоки, чтобы при наведении курсора были видны границы аккордеона:
Событие «hover» инициирует смену стилей аккордеона и мы видим его размер благодаря свойству box-shadow, также увеличивается высота блока (height или max-height) и изменяется background-color.
Fade-out text: Затухание текста в CSS
На новостных сайтах, где колонок с анонсами статей очень много, можно увидеть текст, который постепенно становится почти прозрачным. Чтобы добиться такого эффекта, на большинстве ресурсов по обучению веб-программированию предлагают использовать свойство linear-gradient, но в этом случае необходимо указывать цвет градиента. А если мы заранее не знаем этот цвет? Допустим вы пишете дополнительный функционал не для одного сайта, а для CMS или Фреймворков, и вы не знаете, какой цвет шрифта или фона будет на этих сайтах. Давайте рассмотрим подходящий вариант для таких случаев.
Результат, что мы получим:
На картинке черный и желтый текст исчезают на пестром фоне и при этом мы в файле стилей не указываем эти цвета для градиента:
Пестрые картинки или просто цветной background вы можете выбрать другой.
Fading out text on overflow with css if the text is bigger than allowed
The full fiddle is available. I am trying to achieve effect similar to this one 
Is there a way to do this in pure CSS?
Создан 02 апр. 14 2014-04-02 10:07:02 Salvador Dali
Detecting when the overflow happens in CSS is something impossible unless we have to use some layout trick in combination with CSS. If you mean the overflow is considered to happen if the height reaches about 150px, then the text should be faded out, here is the solution for you, this uses a gradient layer on top of the text and it works for all browsers supporting linear-gradient, so I think it’s better than your solution using ‘-webkit-background-clip:text’ which is supported only by webkit-based browsers (I think): http://jsfiddle.net/b9vtW/1/ – King King 02 апр. 14 2014-04-02 10:26:04
@KingKing thanks. You can post this as an answer, so that I would be able to acknowledge your help. – Salvador Dali 02 апр. 14 2014-04-02 10:54:58
OK, I posted it as the answer, in fact I just wanted to post it here as a reference, others may have better solution. – King King 02 апр. 14 2014-04-02 11:03:25
7 ответов
Looks like your requirement is just to fade out the text beginning at a certain height (about 150px), the text (if any) presenting at that height is considered as overflow. So you can try using some kind of transparent linear gradient layer placed on top of the text area, we can achieve this in a neat way using the pseudo-element :before like this:
Создан 02 апр. 14 2014-04-02 11:02:41 King King
What you are looking for may be:
and if not workign as you wish, copy and paste those css in the url (css window) and modifie it at will.
Создан 02 апр. 14 2014-04-02 10:30:47 Alvaro Menéndez
The problem is that I need to specify starting point in pixels, not percentage. with percentage if the text is too small it still fades-out. And apparently syntax of commands, you suggested does not allow this. – Salvador Dali 02 апр. 14 2014-04-02 10:44:22
Your code is correct just the liner gradient percent must be set
Try the fiddle link
You could alse specfiy it in pixel like this
Both works the same
Создан 02 апр. 14 2014-04-02 10:41:18 ShinyJos