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