Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Вид текста в виде полосатой радуги на CSS

Дата добавления: 13.03.2017 - 05:02
Добавил: Buger
Количество просмотров: 156
Количество комментариев: 0
Размер файла: 1.9Kb
Рейтинг материала: 0.0 / 0
Вид текста в виде полосатой радуги на CSS
рейтинг 0.0
/
голосов 0
Хотите иметь у себя на сайте вид текста в виде полосатой радуги? Значит данный материал будет именно для вас. Цветовую гамму текста вы сможете изменить по своему желанию в стилях. Для этого достаточно иметь базовые знания языка стилей CSS.

Демонстрация в скачанном файле.

HTML
Код
<h1 data-heading="ART-UCOZ.RU"><span data-heading="ART-UCOZ.RU">ART-UCOZ.RU</span></h1>


CSS
Код
<style type="text/css">
  h1 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 10vw;
  text-align: center;
  line-height: 1;
  margin: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  color: #2599d8;
  }
   
  h1:before,
  h1:after,
  h1 span:before,
  h1 span:after {
  content: attr(data-heading);
  position: absolute;
  overflow: hidden;
  left: 0;
  }
   
  h1:before {
  color: #d61c5b;
  height: 34%;
  z-index: 5;
  }
   
  h1:after {
  color: #f1573f;
  height: 50%;
  z-index: 4;
  }
   
  h1 span:before {
  color: #feb213;
  height: 66%;
  z-index: 3;
  }
   
  h1 span:after {
  color: #6abc4e;
  height: 80%;
  z-index: 2;
  }
</style>


Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.