[Статья] Градиентный текст статьи CMS, на странице предпросмотра.

03-18-2014, 10:22 PM

Доброго времени суток. Недавно задался целью сделать "уходящий на нет" по градиенту текст. Что-то в этом духе:

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

. После многих мытарств, пришёл к такому:
1)в шаблоне Вашего стиля - vbcms.css, добавляем новый стиль CSS:

Code:

.cms_article_txt_gradient {
        position:absolute;
        display:block;
        height:100%;
        width:100%;
        background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 49%, rgba(255,255,255,0.75) 76%, rgba(255,255,255,1) 95%, rgba(255,255,255,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(49%,rgba(255,255,255,0)), color-stop(76%,rgba(255,255,255,0.75)), color-stop(95%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 49%,rgba(255,255,255,0.75) 76%,rgba(255,255,255,1) 95%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 49%,rgba(255,255,255,0.75) 76%,rgba(255,255,255,1) 95%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 49%,rgba(255,255,255,0.75) 76%,rgba(255,255,255,1) 95%,rgba(255,255,255,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 49%,rgba(255,255,255,0.75) 76%,rgba(255,255,255,1) 95%,rgba(255,255,255,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

2)в шаблоне Вашего стиля - vbcms_content_article_preview находим текст:

Code:

<div class="cms_article_txt_content postcontainer">

и под ним добавляем строчку:

Code:

<span class="cms_article_txt_gradient">&nbsp;</span>

Собственно всё...
------------------------------------------------------------------------------------
Поясню пару моментов.
По сути дела, в данном трюке, не текст меняет прозрачность, а его плавно перекрывает генерируемый стилем CSS градиент(нормального кроссбраузерного варианта с меняющейся прозрачностью текста, я не нашёл).
Градиент генерировался на сайте: http://www.colorzilla.com/gradient-editor/
(надеюсь его адрес не преступно здесь показывать?)
Верхняя часть градиента должна быть прозрачной. Нижняя должна совпадать с цветом фона Вашей CMS. При этом нужно понимать, что если фон CMS не однородный(тоже градиентный либо с каким либо изображением), то данный трюк Вам не подходит.
В span с собственным стилем добавлен символ пробела, для того, что-бы было к чему применять градиентный background, который в свою очередь, в итоге накрывает собой текст статьи.

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

03-18-2014, 10:27 PM

Оффтоп

03-18-2014, 10:35 PM

Оффтоп

03-18-2014, 10:40 PM

Оффтоп

03-18-2014, 10:44 PM

Кроссбраузерным было бы использование графического градиента. Это так, чтоб наверняка