Постепенное выцветание строчек в конце абзаца

[zusicks438]

Доброго времени суток.

Возникла необходимость сделать вот такое оформление текста:

Текст текст текст текст

Текст текст текст текст

Текст текст текст текст

Текст текст текст текст

Текст текст текст текст

Вот тут тег <!--more--> (движок Wordpress)

То есть последние три строки перед ссылкой "Читать далее" становятся светлее. Как ни пытался придумать способ - у меня ничего не вышло. Если задействовать PHP, то приходит в голову только количество символов до конца абзаца - но оно может быть совершенно различным. Если не задействовать PHP - вообще ничего в голову не приходит.

Есть какой-то способ?

[psywalker]

Доброго времени суток.

Возникла необходимость сделать вот такое оформление текста:

Текст текст текст текст

Текст текст текст текст

Текст текст текст текст

Текст текст текст текст

Текст текст текст текст

Вот тут тег <!--more--> (движок Wordpress)

То есть последние три строки перед ссылкой "Читать далее" становятся светлее. Как ни пытался придумать способ - у меня ничего не вышло. Если задействовать PHP, то приходит в голову только количество символов до конца абзаца - но оно может быть совершенно различным. Если не задействовать PHP - вообще ничего в голову не приходит.

Есть какой-то способ?

Да, наложить сверху блок с градиентом. Прижать его к низу фикседом.

[zusicks438]

Да, наложить сверху блок с градиентом. Прижать его к низу фикседом.

Пытаюсь переварить. Про fixed понял. Теперь про блок - то есть просто блок с градиентной заливкой?

Edited October 15, 2011 by zusicks438

[psywalker]

Да, наложить сверху блок с градиентом. Прижать его к низу фикседом.

Пытаюсь переварить. Про fixed понял. Теперь про блок - то есть просто блок с градиентной заливкой?

да

[zusicks438]

Хорошо, допустим, сделал градиент (кстати, делал не картинкой, а через CSS3, есть ли разница?) для блока gray, повесил этот блок над текстом...но ведь логично, что тогда он просто перекрывает текст.

Это я что-то не так понял?

[psywalker]

Хорошо, допустим, сделал градиент (кстати, делал не картинкой, а через CSS3, есть ли разница?) для блока gray, повесил этот блок над текстом...но ведь логично, что тогда он просто перекрывает текст.

Это я что-то не так понял?

Да, верно, но в ФФ, Хроме и Сафари есть спец. свойства для лечения. В ИЕ вроде должно по умолчанию работать.

[sigma77]

Хорошо, допустим, сделал градиент (кстати, делал не картинкой, а через CSS3, есть ли разница?) для блока gray, повесил этот блок над текстом...но ведь логично, что тогда он просто перекрывает текст.

Это я что-то не так понял?

Тебе нужно сделать "градиент" прозрачности (в данном случае белого цвета). От прозрачного до непрозраного. И накладывать его поверх.

[psywalker]

Хорошо, допустим, сделал градиент (кстати, делал не картинкой, а через CSS3, есть ли разница?) для блока gray, повесил этот блок над текстом...но ведь логично, что тогда он просто перекрывает текст.

Это я что-то не так понял?

Тебе нужно сделать "градиент" прозрачности (в данном случае белого цвета). От прозрачного до непрозраного. И накладывать его поверх.

Да, извиняюсь. Пропустил этот вопрос. Согласен.

[zusicks438]

psywalker,

sigma77,

а, вот как, сейчас погуглю на эту тему

А плюсы до 30 сообщений совсем никак не поставить?

Edited October 15, 2011 by zusicks438

[psywalker]

А плюсы до 30 сообщений совсем никак не поставить?

Когда будет 30, обязательно вспомни, хотя бы о sigma77

[SelenIT]

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

[Arinden]

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

Edited October 15, 2011 by Arinden

[Arinden]

Всёже предложу свой вариант, вдруг поможет.

Edited October 15, 2011 by Arinden

[psywalker]

SelenIT, Дружище, а я вот какой вариант имел ввиду.

Даже в Опере кажись выделение текста пашет.

[SelenIT]

И вправду работает. Теперь уже я прошу пояснений, за счет чего это так? Благодаря отрицательным маргинам, что ли?

[psywalker]

И вправду работает. Теперь уже я прошу пояснений, за счет чего это так? Благодаря отрицательным маргинам, что ли?

Вообще я полагаю, что из-за этой штуки pointer-events : none; Но странно, что она в Опере пашет. Вроде не пахала

[mishka]

В опере текст всегда можно выделить. Хоть как вы его не закрывайте фадерами.

[SelenIT]

Ух ты! Про pointer-events я вообще как-то пропустил, был даже не в курсе существования такой клёвой штуки... Огромное спасибо за новое полезное знание!

[psywalker]

Ух ты! Про pointer-events я вообще как-то пропустил, был даже не в курсе существования такой клёвой штуки... Огромное спасибо за новое полезное знание!

Пользуйся на здоровье. А в ИЕ вроде текст можно выделять сквозь блоки. Могу ошибаться, но вроде да.

[SelenIT]

В примере с Хабры, к сожалению, выделение под градиентом в IE работает по принципу "всё или ничего", выделить пару слов таки нельзя. У IE когда-то была особенность, что полностью прозрачные элементы становились прозрачными и для событий (как минимум, это было справедливо для флешек с wmode=transparent и, по-моему, для png-шек, наложенных с помощью AlphaImageLoader-а), но с обычными блоками, по-моему, нужных чудес там не происходит...

[psywalker]

В примере с Хабры, к сожалению, выделение под градиентом в IE работает по принципу "всё или ничего", выделить пару слов таки нельзя. У IE когда-то была особенность, что полностью прозрачные элементы становились прозрачными и для событий (как минимум, это было справедливо для флешек с wmode=transparent и, по-моему, для png-шек, наложенных с помощью AlphaImageLoader-а), но с обычными блоками, по-моему, нужных чудес там не происходит...

Жаль, а если сделать в блоке градиент с помощью фильтров, то всё равно сквозь него не прорваться?