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

[@KriMs]

Ubuntu, Google Chrome 7.0.517.41. Не работает пример. Обычные блоки с текстом без «затухания».

[@f1int]

Chrome 7? Вы серьезно?
Ubuntu, Google Chrome 16.0.912.0 dev. Работает пример. Обычные блоки с текстом с «затуханием».

[@baltazorbest]

Ubuntu, Google Chrome 16.0.912.12 dev, текст затемнен )
Windows 7, Google Chrome 16.0.912.12 dev, текст затемнен )

[@antoo]

Протестируйте с Netscape 3.0, пожалуйста.

[@stampoon]

А в IE 3 под wine?

[@KriMs]

Отличный юмор, спасибо поблевал…
Хром установлен был год назад, а не 15 лет. Если в то время он настолько сырой был… то уж извиняйте, вопросы не ко мне.

[@zBit]

Дело не в «сырости» браузера, а в том, что год назад мало браузеров поддерживало хоть какие-то возможности CSS3.
Пытаться проверить возможности CSS3 на старом браузере это всё равно, что пытаться воткнуть в современную материнскую плату процессор из прошлого века. Это выглядит глупо, нелепо и безнадёжно.

[@burzilov]

Цвет тени должен совпадать с цветом основного фона?
Т.е. предложенным способом не получится сделать затухание на фоне, отличающемся от сплошной заливки?

[@Softlink]

Нет, не получится, т.к. сделать прозрачными буквы(без фона) вроде бы никому еще не удалось. Без вмешательства js, конечно.

[@alexeizuzin]

Для того, чтобы работало в IE делаем это используя внешнюю тень у дополнительного блока и прикручиваем CSS3 PIE (внутреннюю тень не поддерживает).

[@homm]

Проблема в том, что никогда не нужно затухание всего текста, текст обрывается на последней строчке, её и нужно затухать. Пример, о чем я говорю:

[@Softlink]

В этом я вообще не вижу проблемы. Если надо затенить одно-два слова, то можно на блок с текстом накинуть псевдоэлемент с внешней тенью и прибить его в нужный угол. Единственный минус — это нельзя будет выделить эти слова, но он нивелируется самим наличием эффекта.

[@homm]

А теперь в первом примере поменяйте местами последнюю и предпоследнюю строчку:



«Прибить тень в нужный угол» не катит, нужно расположить тень строго за последним словом на определенной строчку.

[@Softlink]

Мы точно об одном и том же говорим?
Вот вариант с затуханием последнего слова jsfiddle.net/49Pdp/
Хоть к диву, хоть к параграфу прибивайте этот псевдоэлемент. Сейчас сделал грубо, лишь бы показать, но отрегулировать размеры вполне можно, чтобы затухало именно последнее слово.

[@homm]

И что это? Невнятное затухание на предпоследней строчке, а после него текст продолжается.

[@Softlink]

Я понял, о чем вы.
Вот вам вариант, когда затухать будет всегда последнее слово в тексте. jsfiddle.net/49Pdp/20/
Во всяком случае это абсолютно решаемо и не сложно.

[@homm]

Дак надо не последнее слово в тексте, а последнее слово на последней строчке. Текст больше 4-х строк — обрезаем, четвертую строчку затеняем.

[@Softlink]

Да пожалуйста

[@homm]

Слушайте, вы издеваетесь. У вас там ровно 4 строчки, четвертая затеняется. Зачем? Текст же не обрезается. Вот будет у вас 10 строчек, вам на четвертой нужно обрезать, и последнюю строчку засветлить. Никак.

[@Softlink]

ответил в ЛС, вариант, предложенный ниже работоспособный, беру свои слова назад.

[@xaja]

jsfiddle.net/jwkBX/
высотой спана можно регулировать количество видимых строк
тоже грубый пример, но понятно как работает )

[@xaja]

небольшое пояснение — текста может быть сколько угодно много — будут показываться только N строк + последняя уходящая в fade.
пример с использованием box-shadow считаю некрасивым (идеально не получится затухание сделать) — поэтому я обычно кладу пнг-градиент. и позиционирую абсолютно справа внизу с нужными размерами.

[@homm]

И в чем отличие? Все те же проблемы:



Затухает не текст, и не только на последней строчке.

[@xaja]

в данном случае проблема в том что у вас шрифт увеличенный.
надо подгонять правильный размер span по высоте. яж на скорую руку делал пример )



но если нужны строго две строчки то можно вот так — jsfiddle.net/jwkBX/1/ — обновил

[@homm]

Теперь стало ясно, на чем основывается ваш метод. Да, имеет право на жизнь.

[@xaja]

даже не так: сколько строк надо показывать — столько br и ставить в span.
тогда не будет разницы какой шрифт используется

[@Softlink]

В том виде, как вы поставили задание, такой вариант не имеет права на жизнь. Попробуйте сделать ширину блока-родителя большую. Скажем, 1000пк.
Я выше показал вариант. Там псевдоэлемент цепляется именно к последнему слову, всегда. И всегда его будет затенять.
Просто сразу не совсем понял задачу. Сейчас, вернувшись, собрал вариант, подходящий к вашим требованиями.

[@akira]

Если говорить о JS, то у меня было сделано вот так: riamatic.com/labs/mooshort/

[@Astralian]

Таки тени способны убить FF <4.

[@kizu]

Использование тени вместо градиента для сохранения кликабельности — хороший момент.

А так — чаще нужно использовать затухание только тогда когда это действительно нужно, т.е. когда длина текста превышает высоту соответствующего блока. На этот счёт на хабре была хорошая статья: habrahabr.ru/blogs/css/116646/ — возможно, можно тот метод проапгрейдить тенью, это будет более кроссбраузерный «проклик», чем pointer-events: none;

[@Moran]

При выделении всего блока текста со стороны затухания, и после снятия выделения, затухание пропадает.
Как-то по костыльному, да и «нужность» сомнительна.

Safari 5.1.1 (7534.51.22)
MAC OS X 10.7.2

[@MagiC]

Не знаю, а приведите пример, где это круто смотрится?

[@Serator]

Статья и пример. Собственно, если кроссбраузерность не нужна, то смысл костылей?

[@Serator]

Более наглядная таблица совместимости.

[@kvasko_linuxoid]

Минусованные посты и без CSS3 затухают :)

[@q0p]

В Nightly (а может и в стабильных версиях лисы тоже) — они затухают по тупому: если навести и увести курсор на такое сообщение быстро и много раз — то потом если остановиться — некоторое время коммент всё ещё будет мигать, т.к. собралась очередь из ещё невыполненных действий. В хроме вроде такого нет.

[@ozoned]

Советую ознакомиться с css3 mask image.

Пример для webkit:

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(90%, rgba(0, 0, 0, 1)), to(transparent))