Градиент текста

Сообщение **zbscomp** » 28 апр 2018, 22:39

Всем привет!
Есть ли в WWB возможность делать текст градиентом по горизонтали или вертикали?

Для примера ( текст в слайдере ):
http://archiwp.com/

Сообщение **sinpai** » 29 апр 2018, 07:17

Создайте свой стиль для текста и в расширенных настройках пропишите градиент.
Сам не пробовал, но как идея.

Сообщение **spoon** » 29 апр 2018, 07:47

Только вчера сам мучался этим вопросом), чем закончилась эпопея, при создании стиля и прописания в дополнительных настройках стиля не работает.
Как решил, в тексте или заголовке в Исходнике объекта-Перед тегом вставляешь стиль

Код: Выделить всё

<style>#page1Heading1{background: linear-gradient(180deg, #e45e0d, #e4ca0d,#ea5f0a);-webkit-background-clip: text;color: transparent;}</style>

тут фишка в

Код: Выделить всё

-webkit-background-clip: text;color: transparent;

сам по себе background: linear-gradient не работает. Есть минусы этого метода: нельзя делать ссылкой, нельзя делать тень.
Да и ещё, если код

Код: Выделить всё

<style>#page1Heading1{background: linear-gradient(180deg, #e45e0d, #e4ca0d,#ea5f0a);-webkit-background-clip: text;color: transparent;}</style>

вставлять не строчкой, а в таком виде

Код: Выделить всё

<style>
#page1Heading1
{
background: linear-gradient(180deg, #e45e0d, #e4ca0d,#ea5f0a);
-webkit-background-clip: text;
color: transparent;
}
</style>

то почему то образуются тег <br>, толи глюк новой версии 12.5.1, толи что то ещё)).
Если кто то знает как решить методом WWB ждем с нетерпением.

Отправлено спустя 7 минут 23 секунды:
Ну а вообще с выходом css4 можно будет много крутетских штук делать, осталось дождаться выхода.

Сообщение **dlod** » 29 апр 2018, 12:48

zbscomp такой текст нужен: http://dlod.ru/demo/gradient-txt

В Html-исходнике текста во вкладке -- Особый стиль -- вставьте:

background: -webkit-linear-gradient(#ffd003, #3e6ecc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

#ffd003 -- это верхний цвет градиента
#3e6ecc -- это нижний цвет градиента

- текст должен быть в одну строку (линию).
- это только для браузеров WebKit в Internet Explorer не работает.

spoon

<style>
#wb_Text2 {
background: -webkit-linear-gradient(180deg, #e45e0d, #e4ca0d,#ea5f0a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>

ВАЖНО: в точках останова не работает из-за: background-image: none; (разбираться не стал), чтобы работало прописал медиа-запросы в исходнике страницы -- Между тегами <head></head>:

@media only screen and (max-width: 969px) and (min-width: 0px) {
#wb_Text1 {
background: -webkit-linear-gradient(#ffd003, #3e6ecc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
}
@media only screen and (max-width: 969px) and (min-width: 0px) {
#wb_Text2 {
background: -webkit-linear-gradient(180deg, #e45e0d, #e4ca0d,#ea5f0a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
}

Сообщение **spoon** » 29 апр 2018, 18:35

dlod, дело не в импровизации кода, можно сделать 100500 вариантов одного того же, дело в том, как сделать с помощью wwb.