Pull to refresh

Comments 17

Вы серьезно проделали столько работы только для того, чтобы иметь возможность плавно спрятать конец захардкоденного текста?

Почему бы просто не сделать что-то подобное в таком случае:
codepen.io/anon/pen/pLKEVd

<div>
  <h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </h2>
</div>


h2 {
  background-image: linear-gradient(90deg, #000 0%, #000 70%, rgba(0,0,0,0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
Спасибо за комментарий.

В итогах решения под номером 1.1 я перечислил проблемы из-за которых отказался от данного метода.

  • проблематично менять цвет текста из-за использования linear-gradient. Хотелось бы, чтобы он наследовался и не заботил нас;
  • если нужна поддержка IE и Edge, то значение text у background-clip не удовлетворяет этому условию, из-за чего будет просто закрашенная фигура (Рис. 7)
Понятно, спасибо. Не обратил внимание.
Хотя приведенный codepen все же работает и в Edge и в IE для этого конкретного примера.
Так вы же используете метод из первого решения.



Конечно, этот подход будет работать и в IE, и в Edge.
Ну первая проблема вполне решается:

h2 {
  background-image: linear-gradient(90deg, currentColor 0%, currentColor 70%, rgba(0,0,0,0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

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

Как ни странно, свойство -webkit-background-clip работает в последних Edge и Firefox

Спасибо за замечание. Да, в версиях Edge >= 12 свойство поддерживается. Обновил статью.
А вот идею в каких-нибудь лентах при наборе вниз страницу делать всё менее читаемой по мере набора текста — было бы интересно погонять на реальном применении. Не жёсткое ограничение на число символов, а вот так — постепенно, только действительно постепенно, за десяток строчек пройти градиент меж «плохо читается» до «совсем не читается» (но ещё набирается)… Копипаста, конечно спасёт бота, но автор всё равно будет знать, что легко читаться будет только первая треть…
А зачем? Чтобы потакать нежеланию неспособных читать «многабукаф»?
Хм, не подумал. Я имел в виду — как-то мотивировать льющих воду повышать качество своей речи.
как-то мотивировать льющих воду повышать качество своей речи

А тут как-то навскидку ничего в голову не приходит, кроме всяких механизмов наподобие рейтинга публикации, который оказывает влияние на частоту дальнейших публикаций автором (достаточно грубая модель, разумеется).
С одной стороны да — требование лаконичности отсекает бессмысленный поток спича, с другой же — если, где-то стоит ограничение на объем текста, иногда нереально выбешивает необходимость в процессе публикации удалять важные для смысла куски: дьявол-то бывает в деталях, а детали приходится сокращать.
именно — просто ограничение бесит, возможно (пробовать надо) — мягкое ограничение градиентом (размером шрифта, сложной прокруткой и т.п.) будет бесить меньше
Охх… Но кто будет определять условно оптимальный размер публикации? Тем более, вангую — для разных тематик этот размер будет меняться в широком диапазоне. И как только встанет задача поиска оптимума (вангую еще раз) спекуляций в духе «британские ученые установили, что размер должен быть _вставить желаемое число_» будет over9000.

А как текст из картинки скопипастить? Или вы не подумали о том, что кому-то понадобится скопировать текст из браузера.

Спасибо за комментарий.

Не совсем понял про картинку, ведь пользователь видит обычный текст.
Но да, спасибо за замечание, с выделением текста действительно есть проблема.

Это можно решить:
  • либо создав ещё один скрытый DOM элемент с полным текстом (он будет с абсолютным позиционированием) и установив user-select:none DOM элементу с обрезанным текстом
  • либо через JS прослушивать события mouseup/mousedown и отдавать значение из атрибута title
Вариант когда у нас одна строка довольно примитивный. А вот когда у нас 3 строки и конец 3ей нужно уводить в градиент?
Спасибо за комментарий.

Как частый случай примером был взят однострочный текст.

Если говорить про сокращение многострочного контента, то нам понадобится на JS высчитать высоту блока, удалить лишние слова и обернуть последнею строку (или слово) в отдельный строчный DOM элемент, к которому, одним из методов приведённых в статье, будем применять эффект ухода в прозрачность. Вообще весь начальный алгоритм аналогичен тому, как мы бы обрезали многоточием.
Sign up to leave a comment.