Поблагодарить:
Воскресенье, 15 Июль 2018 09:22

Сделать градиент текста в CSS

Я вообще сторонник идеи, что «чем проще, тем лучше», что разного рода извращения со стилями только портят дизайн и отвлекают от содержимого, но что делать, когда клиент просит? Правильно, клиент всегда прав – а значит делаем. Вот примерно так со смирением я обычно делаю градиент на текст, раньше это делали в Photoshop, вставляя потом картинки на сайт (помните это убожество, да?) теперь можно настройки задавать в CSS.

От слов к делу, разберём код:

.grad_text{font-size:150%;font-weight:bold;font-family: 'Roboto Slab', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: -webkit-linear-gradient(36deg, #999, #555, #000);
    background: linear-gradient(54deg, #999, #555, #000);
    background: -webkit-linear-gradient(54deg, #999, #555, #000);
    background: -moz-linear-gradient(54deg, #999, #555, #000);
    background-clip: text;
    -webkit-background-clip: text;
    -o-background-clip: text;
    -moz-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    -o-text-fill-color: transparent;
    -moz-text-fill-color: transparent;}

Результат:

СМОТРИМ, ЧТО ПОЛУЧИЛОСЬ

В данной записи нас интересует вторая строка и всё то, что идёт после неё, поскольку первая отвечает за размер шрифта, жирность и какой шрифт используется. Градиент CSS же начинается со второй строки, где мы задаём background.

В моём случае иду от светло-серого (#999) к чёрному (#000).

Добавим переменных:

.grad_text2{font-size:150%;font-weight:bold;font-family: 'Roboto Slab', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: -webkit-linear-gradient(36deg, #999, #555, #f00, #555, #999, #000);
    background: linear-gradient(54deg, #999, #555, #f00, #555, #999, #000);
    background: -webkit-linear-gradient(54deg, #999, #555, #f00, #555, #999, #000);
    background: -moz-linear-gradient(54deg, #999, #555, #f00, #555, #999, #000);
    background-clip: text;
    -webkit-background-clip: text;
    -o-background-clip: text;
    -moz-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    -o-text-fill-color: transparent;
    -moz-text-fill-color: transparent;}

Результат:

СМОТРИМ, ЧТО ПОЛУЧИЛОСЬ

Я подумал, раз уж речь зашла о градиентах, надо добавить яркости.

Спонсоры: