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.0 dev. Работает пример. Обычные блоки с текстом с «затуханием».
Ubuntu, Google Chrome 16.0.912.12 dev, текст затемнен )
Windows 7, Google Chrome 16.0.912.12 dev, текст затемнен )
Windows 7, Google Chrome 16.0.912.12 dev, текст затемнен )
Протестируйте с Netscape 3.0, пожалуйста.
А в IE 3 под wine?
Отличный юмор, спасибо поблевал…
Хром установлен был год назад, а не 15 лет. Если в то время он настолько сырой был… то уж извиняйте, вопросы не ко мне.
Хром установлен был год назад, а не 15 лет. Если в то время он настолько сырой был… то уж извиняйте, вопросы не ко мне.
Дело не в «сырости» браузера, а в том, что год назад мало браузеров поддерживало хоть какие-то возможности CSS3.
Пытаться проверить возможности CSS3 на старом браузере это всё равно, что пытаться воткнуть в современную материнскую плату процессор из прошлого века. Это выглядит глупо, нелепо и безнадёжно.
Пытаться проверить возможности CSS3 на старом браузере это всё равно, что пытаться воткнуть в современную материнскую плату процессор из прошлого века. Это выглядит глупо, нелепо и безнадёжно.
Цвет тени должен совпадать с цветом основного фона?
Т.е. предложенным способом не получится сделать затухание на фоне, отличающемся от сплошной заливки?
Т.е. предложенным способом не получится сделать затухание на фоне, отличающемся от сплошной заливки?
Для того, чтобы работало в IE делаем это используя внешнюю тень у дополнительного блока и прикручиваем CSS3 PIE (внутреннюю тень не поддерживает).
Проблема в том, что никогда не нужно затухание всего текста, текст обрывается на последней строчке, её и нужно затухать. Пример, о чем я говорю:
В этом я вообще не вижу проблемы. Если надо затенить одно-два слова, то можно на блок с текстом накинуть псевдоэлемент с внешней тенью и прибить его в нужный угол. Единственный минус — это нельзя будет выделить эти слова, но он нивелируется самим наличием эффекта.
А теперь в первом примере поменяйте местами последнюю и предпоследнюю строчку:
«Прибить тень в нужный угол» не катит, нужно расположить тень строго за последним словом на определенной строчку.
«Прибить тень в нужный угол» не катит, нужно расположить тень строго за последним словом на определенной строчку.
Мы точно об одном и том же говорим?
Вот вариант с затуханием последнего слова jsfiddle.net/49Pdp/
Хоть к диву, хоть к параграфу прибивайте этот псевдоэлемент. Сейчас сделал грубо, лишь бы показать, но отрегулировать размеры вполне можно, чтобы затухало именно последнее слово.
Вот вариант с затуханием последнего слова jsfiddle.net/49Pdp/
Хоть к диву, хоть к параграфу прибивайте этот псевдоэлемент. Сейчас сделал грубо, лишь бы показать, но отрегулировать размеры вполне можно, чтобы затухало именно последнее слово.
И что это? Невнятное затухание на предпоследней строчке, а после него текст продолжается.
Я понял, о чем вы.
Вот вам вариант, когда затухать будет всегда последнее слово в тексте. jsfiddle.net/49Pdp/20/
Во всяком случае это абсолютно решаемо и не сложно.
Вот вам вариант, когда затухать будет всегда последнее слово в тексте. jsfiddle.net/49Pdp/20/
Во всяком случае это абсолютно решаемо и не сложно.
Дак надо не последнее слово в тексте, а последнее слово на последней строчке. Текст больше 4-х строк — обрезаем, четвертую строчку затеняем.
Да пожалуйста
jsfiddle.net/jwkBX/
высотой спана можно регулировать количество видимых строк
тоже грубый пример, но понятно как работает )
высотой спана можно регулировать количество видимых строк
тоже грубый пример, но понятно как работает )
небольшое пояснение — текста может быть сколько угодно много — будут показываться только N строк + последняя уходящая в fade.
пример с использованием box-shadow считаю некрасивым (идеально не получится затухание сделать) — поэтому я обычно кладу пнг-градиент. и позиционирую абсолютно справа внизу с нужными размерами.
пример с использованием box-shadow считаю некрасивым (идеально не получится затухание сделать) — поэтому я обычно кладу пнг-градиент. и позиционирую абсолютно справа внизу с нужными размерами.
И в чем отличие? Все те же проблемы:
Затухает не текст, и не только на последней строчке.
Затухает не текст, и не только на последней строчке.
в данном случае проблема в том что у вас шрифт увеличенный.
надо подгонять правильный размер span по высоте. яж на скорую руку делал пример )
но если нужны строго две строчки то можно вот так — jsfiddle.net/jwkBX/1/ — обновил
надо подгонять правильный размер span по высоте. яж на скорую руку делал пример )
но если нужны строго две строчки то можно вот так — jsfiddle.net/jwkBX/1/ — обновил
Теперь стало ясно, на чем основывается ваш метод. Да, имеет право на жизнь.
даже не так: сколько строк надо показывать — столько br и ставить в span.
тогда не будет разницы какой шрифт используется
тогда не будет разницы какой шрифт используется
В том виде, как вы поставили задание, такой вариант не имеет права на жизнь. Попробуйте сделать ширину блока-родителя большую. Скажем, 1000пк.
Я выше показал вариант. Там псевдоэлемент цепляется именно к последнему слову, всегда. И всегда его будет затенять.
Просто сразу не совсем понял задачу. Сейчас, вернувшись, собрал вариант, подходящий к вашим требованиями.
Я выше показал вариант. Там псевдоэлемент цепляется именно к последнему слову, всегда. И всегда его будет затенять.
Просто сразу не совсем понял задачу. Сейчас, вернувшись, собрал вариант, подходящий к вашим требованиями.
Если говорить о JS, то у меня было сделано вот так: riamatic.com/labs/mooshort/
Таки тени способны убить FF <4.
Использование тени вместо градиента для сохранения кликабельности — хороший момент.
А так — чаще нужно использовать затухание только тогда когда это действительно нужно, т.е. когда длина текста превышает высоту соответствующего блока. На этот счёт на хабре была хорошая статья: habrahabr.ru/blogs/css/116646/ — возможно, можно тот метод проапгрейдить тенью, это будет более кроссбраузерный «проклик», чем pointer-events: none;
А так — чаще нужно использовать затухание только тогда когда это действительно нужно, т.е. когда длина текста превышает высоту соответствующего блока. На этот счёт на хабре была хорошая статья: habrahabr.ru/blogs/css/116646/ — возможно, можно тот метод проапгрейдить тенью, это будет более кроссбраузерный «проклик», чем pointer-events: none;
При выделении всего блока текста со стороны затухания, и после снятия выделения, затухание пропадает.
Как-то по костыльному, да и «нужность» сомнительна.
Safari 5.1.1 (7534.51.22)
MAC OS X 10.7.2
Как-то по костыльному, да и «нужность» сомнительна.
Safari 5.1.1 (7534.51.22)
MAC OS X 10.7.2
Не знаю, а приведите пример, где это круто смотрится?
Более наглядная таблица совместимости.
Минусованные посты и без CSS3 затухают :)
В 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))
Пример для 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))
Sign up to leave a comment.
Затухание текста на CSS3