Мастеркласс: градиентный текст
Хочу поделиться интересной “фишкой”, которая пока не получила широкую популярность (и очень зря!). Назову ее условно “Градиентный текст”.
Допустим, у вас на сайте регулярно публикуются статьи, новости или пресс-релизы. Скорее всего даже с фотографиями. Задача - выводить на стартовой странице анонсы опубликованных новостей.
Данную задачу разработчики сайтов решают по-разному. Лентяи просто копируют первые 300-400 знаков текста с помощью какой-нибудь substr(…) и выводят их как получится вместо анонса. Менее ленивые разработчики сначала удаляют все html теги, а потом копируют 300-400 знаков текста, поставив три точки после него. В результате, часто слова откусываются и получается, что анонс обрывается на полуслове. Cамые аккуратные разработчики пишут нехитрое регулярное выражение (или реализуют то же самое через обычный цикл), которое позволяет копировать 300-400 символов, но уже с учетом разметки и границ слов (предложений).
У каждого из перечисленных способов есть свои плюсы и минусы.
Если из анонса удалять html теги, то часто теряется важная разметка (слова, выделенные жирным, подчеркнутые или гиперссылки) и изображения внутри текста. Зато при таком подходе высота блока остается примерно одинаковой, что с эстетической точки зрения есть “гуд”.
Если из анонса не удалять html теги, то анонс статьи, у которой вначале идут буллеты или изображения, по высоте будет очень большим и занимать много ценного пространства на стартовой.
Таким образом возникает вопрос - можно ли найти решение, удволетворяющее следующим критериям: отображать блок текста, который был бы
- фиксированный по высоте,
- “тянущимся” по ширине,
- сохраняющий изображения и разметку текста,
- не обрывающийся на полуслове?
Как выяснилось - это сделать несложно. Просто нужно правильно сверстать блок.
(кликай, чтобы увеличить)
Решение:
Делаем <DIV> блок, который тянется на 100% ширины экрана, у блока задано свойство height в пикселях и свойство overflow: hidden. В результате имеем область страницы, в которой будет отображаться ровно столько текста, сколько влезает в блок, остальное просто будет откусываться браузером. Причем при высоком разрешении текста будет умещаться больше (за счет растягивания блока по горизонтали). Остался последний и самый главный момент - как избавиться от резкой границы, на которой обрывается текст или картинка? К нижней границе <DIV> блока “приклеиваем” градиентный png с альфаканалом, который создаст эффект слияния текста с фоном сайта.
Посмотреть, как работает данная “фишка”, можно на сайте www.music4sale.ru в блоках новостей и анонсов статей на стартовой. Там же данная фича улучшена, т.к. блок подсвечивается при наведении мыши, при этом градиент сохраняется.