Pull to refresh

Comments 38

Ubuntu, Google Chrome 7.0.517.41. Не работает пример. Обычные блоки с текстом без «затухания».
Chrome 7? Вы серьезно?
Ubuntu, Google Chrome 16.0.912.0 dev. Работает пример. Обычные блоки с текстом с «затуханием».
Ubuntu, Google Chrome 16.0.912.12 dev, текст затемнен )
Windows 7, Google Chrome 16.0.912.12 dev, текст затемнен )
Протестируйте с Netscape 3.0, пожалуйста.
Отличный юмор, спасибо поблевал…
Хром установлен был год назад, а не 15 лет. Если в то время он настолько сырой был… то уж извиняйте, вопросы не ко мне.
Дело не в «сырости» браузера, а в том, что год назад мало браузеров поддерживало хоть какие-то возможности CSS3.
Пытаться проверить возможности CSS3 на старом браузере это всё равно, что пытаться воткнуть в современную материнскую плату процессор из прошлого века. Это выглядит глупо, нелепо и безнадёжно.
Цвет тени должен совпадать с цветом основного фона?
Т.е. предложенным способом не получится сделать затухание на фоне, отличающемся от сплошной заливки?
Нет, не получится, т.к. сделать прозрачными буквы(без фона) вроде бы никому еще не удалось. Без вмешательства js, конечно.
Для того, чтобы работало в IE делаем это используя внешнюю тень у дополнительного блока и прикручиваем CSS3 PIE (внутреннюю тень не поддерживает).
Спасибо, отличный эффект, особенно для сайтов с фэнтезийно-приключенческой тематикой!
Проблема в том, что никогда не нужно затухание всего текста, текст обрывается на последней строчке, её и нужно затухать. Пример, о чем я говорю:

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



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

Я понял, о чем вы.
Вот вам вариант, когда затухать будет всегда последнее слово в тексте. jsfiddle.net/49Pdp/20/
Во всяком случае это абсолютно решаемо и не сложно.
Дак надо не последнее слово в тексте, а последнее слово на последней строчке. Текст больше 4-х строк — обрезаем, четвертую строчку затеняем.
Слушайте, вы издеваетесь. У вас там ровно 4 строчки, четвертая затеняется. Зачем? Текст же не обрезается. Вот будет у вас 10 строчек, вам на четвертой нужно обрезать, и последнюю строчку засветлить. Никак.
ответил в ЛС, вариант, предложенный ниже работоспособный, беру свои слова назад.
jsfiddle.net/jwkBX/
высотой спана можно регулировать количество видимых строк
тоже грубый пример, но понятно как работает )
небольшое пояснение — текста может быть сколько угодно много — будут показываться только N строк + последняя уходящая в fade.
пример с использованием box-shadow считаю некрасивым (идеально не получится затухание сделать) — поэтому я обычно кладу пнг-градиент. и позиционирую абсолютно справа внизу с нужными размерами.
И в чем отличие? Все те же проблемы:



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



но если нужны строго две строчки то можно вот так — jsfiddle.net/jwkBX/1/ — обновил
Теперь стало ясно, на чем основывается ваш метод. Да, имеет право на жизнь.
даже не так: сколько строк надо показывать — столько br и ставить в span.
тогда не будет разницы какой шрифт используется
В том виде, как вы поставили задание, такой вариант не имеет права на жизнь. Попробуйте сделать ширину блока-родителя большую. Скажем, 1000пк.
Я выше показал вариант. Там псевдоэлемент цепляется именно к последнему слову, всегда. И всегда его будет затенять.
Просто сразу не совсем понял задачу. Сейчас, вернувшись, собрал вариант, подходящий к вашим требованиями.
Использование тени вместо градиента для сохранения кликабельности — хороший момент.

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

Safari 5.1.1 (7534.51.22)
MAC OS X 10.7.2
Не знаю, а приведите пример, где это круто смотрится?
В Nightly (а может и в стабильных версиях лисы тоже) — они затухают по тупому: если навести и увести курсор на такое сообщение быстро и много раз — то потом если остановиться — некоторое время коммент всё ещё будет мигать, т.к. собралась очередь из ещё невыполненных действий. В хроме вроде такого нет.
Советую ознакомиться с 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))
Only those users with full accounts are able to leave comments. Log in, please.