Хочешь сайт? Легко!

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

Градиент для текста — технология экспериментальная, поддерживается только в браузерах на основе WebKit-движка. Тем не менее, этим приёмом можно свободно пользоваться, а для браузеров, не поддерживающих это свойство, просто задавать цвет текста. Таким образом, браузеры, поддерживающие свойства, отобразят текст с градиентом, а браузеры, не поддерживающие свойство, просто пропустят его в коде и установят для текста заданный цвет.Меняя угол градиента, а также используя повтор градиента, можно создавать интересные эффекты.Свойство -webkit-background-clip: text обрезает любой фон (в том числе градиентный) по границе текста. Используется в сочетании с css-свойством -webkit-text-fill-color: transparent, которое обеспечивает прозрачность букв текста, за счет чего фон проглядывает через него.

Пример 1. Градиентный текст

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

<p class="gradient-text">Градиентный текст</p>
@import url(https://fonts.googleapis.com/css?family=Rubik+One&subset=latin,cyrillic);
.gradient-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: linear-gradient(45deg, #0B2349 33%, #0D61BC 66%, #8AA9D6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0B2349;
  display: table;
  margin: 20px auto;
}
Для чатов Армады прописываем код свойство в окошке к примеру "Цвет текста:" что вы видите ниже.
A3A3AA;font-size:20px;text-transform:uppercase;background:repeating-linear-gradient(white,white 2px,#7AB4E2 2px,#7AB4E2 3px);-webkit-background-clip: text;-webkit-text-fill-color:transparent;color:#183D58;

Пример 2. Полосатый текст

Полосатый текст

Полосатый текст

<p class="striped-text">Полосатый текст</p>
.striped-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: repeating-linear-gradient(white, white 2px, #7AB4E2 2px, #7AB4E2 3px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #183D58;
  display: table;
  margin: 20px auto;    
}
Для чатов Армады прописываем код свойство в окошке к примеру "Цвет текста:" что вы видите ниже.
0B2349:font-family:Georgia,FreeSerif,serif;font-weight:bold;background:linear-gradient(45deg,#7A0C34 33%,#0D61BC 66%,#8AA9D6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;

Пример 3. Прозрачный текст

Прозрачный текст

<p class="transparent-text">Прозрачный текст</p>
.transparent-text {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  background: #2E2F45;
  display: table;
  margin: 20px auto;
  color: white;
  border-radius: 5px;
  mix-blend-mode: multiply;
  padding: 5px 10px;
}

Пример 4. Полосатая тень

Полосатая тень

<p class="striped-shadow">Полосатая тень</p>
.striped-shadow {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  text-shadow: -4px -4px 0px #D2EAD7;
  background: repeating-linear-gradient(45deg, #6EB495, #6EB495 1px, white 2px, white 3px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: table;
  margin: 20px auto;
}

Пример 5. Тень «горошек»

Тень «горошек»

<p class="shadow-polka-dot">Тень "горошек"</p>
.shadow-polka-dot {
  font-family: 'Rubik One', sans-serif;
  font-size: 50px;
  text-transform: uppercase;
  text-shadow: -5px -5px 0px #EF7657;
  background: radial-gradient(#9DA8A9 1px, transparent 1px);
  background-size: 4px 4px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: table;
  margin: 20px auto;
}

Пример 6. Градиентные границы

Элегантное решение, как сделать градиентные границы для элемента с помощью свойства border-image.
За толщину рамки отвечает свойство border: 1px solid;

Градиентные границы
<div class="gradient-border">Градиентные границы</div>
.gradient-border {
  padding: 20px;
  letter-spacing: 0.2em;
  border: 1px solid;
  border-image: linear-gradient(20deg, #f92056 38%, #00deff 65%);
  border-image-slice: 1;
}

Пример 7. Градиентные границы и градиентный текст

Градиентные границы и текст
<div class="gradient-all">Градиентные границы и текст</div>
.gradient-all {
  font-size: 2em;
  background: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0.3em 0.6em ;
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  border-image-slice: 1;
}
Армада чаты применяется такое свойство Цвет текста:
EAE8E7;font-size:1em;background:linear-gradient(135deg,#12BCB0 20%,#FABE0E 70%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
Цвет рамки:
A3A3AA;font-size:20px;text-transform:uppercase;background:repeating-linear-gradient(white,white 2px,#7AB4E2 2px,#7AB4E2 3px);-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:#183D58;

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !