ZorNet.Ru — сайт для вебмастера » HTML и CSS » Градиенты для шрифтовых иконок с помощью CSS

Градиенты для шрифтовых иконок с помощью CSS

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

И все это делается постепенно, что они станут более заметны и безусловно оригинально выглядеть. Если вы используете популярные значки Font Awesome, вы уже знаете как добавить к нему сплошной цвет с помощью CSS. Но что, если вы хотите стилизовать его с помощью градиента.

К счастью, это не так сложно сделать.

Здесь задал ширину и высоту кнопки font-size:159px, где пытался в стилях, но выходит только в самом коде.

Как поставить градиенты на шрифтовые иконки

HTML

Код

CSS

Мы добавляем дополнительный CSS класс и градиент значок к стандарту Font Awesome по умолчанию.

Код

.gradient-icon {
  background: -webkit-gradient(linear, left top, left bottom, from(#6f8aec), to(#a901ef));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: initial;
}

У вас появится возможность отредактировать 2 цвета в коде CSS.

Демонстрация

01 Августа 2018 Просмотров: 3543 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0