ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красочный градиент текста с помощью CSS3

Красочный градиент текста с помощью CSS3

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

А точнее где она будет находится, так как все это через стилистику можно сделать самостоятельно. Здесь показано, как вы можете легко сделать красочный эффект с применение градиентного текста, но и безусловно с помощью фонового клипа CSS3 и свойств текста. Здесь не будет подключен класс, чтоб через него выстраивает, хотя и можно поставить, но все сделали с помощью H1, где аналогично все выстраивается.

Здесь используется только элемент h1 со следующим CSS.

HTML

Код

<h1>Сайт: ZorNet.Ru</h1>

CSS:

Код

h1 {
  display: table;
  margin: 0 auto;
  font-family: "Roboto Slab";
  font-weight: 500;
  font-size: 3em;
  background: linear-gradient(330deg, #b94949 0%, #7cb93f 25%, #6cdcdc 50%, #9f62dc 75%, #ca4848 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #15131300;
  line-height: 174px;
}

Ключом является в в этом элементе следующие строки:

CSS:

Код

background: linear-gradient(330deg, #b94949 0%, #7cb93f 25%, #6cdcdc 50%, #9f62dc 75%, #ca4848 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: #15131300;

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

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

16 Мая 2018 Просмотров: 1049 Комментариев: (0)

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

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

Kosten

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