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

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

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

Вид текста в виде зебры на CSS

Дата добавления: 13.03.2017 - 07:32
Добавил: Buger
Количество просмотров: 155
Количество комментариев: 0
Размер файла: 2.3Kb
Рейтинг материала: 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">
  html,
  body {
  width: 100%;
  height: 100%;
  }
   
  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: white;
  white-space: nowrap;
  text-shadow: -10px 10px 0 black, 5px -5px 0 black, -5px 5px 0 black, 5px 5px 0 black;
  }
   
  h1:before,
  h1:after,
  h1 span:before,
  h1 span:after {
  content: attr(data-heading);
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
  }
   
  h1:before {
  color: white;
  height: 34%;
  z-index: 5;
  }
   
  h1:after {
  color: black;
  height: 50%;
  z-index: 4;
  text-shadow: -5px -5px 0 black, 5px -5px 0 black, -5px 5px 0 black, 5px 5px 0 black;
  -webkit-transform: translate(10px, 0);
  transform: translate(10px, 0);
  }
   
  h1 span:before {
  color: white;
  height: 69%;
  z-index: 3;
  text-shadow: -5px -5px 0 black, 5px -5px 0 black, -5px 5px 0 black, 5px 5px 0 black;
  }
   
  h1 span:after {
  color: black;
  height: 82%;
  z-index: 2;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
  -webkit-transform: translate(-5px, 0);
  transform: translate(-5px, 0);
  }
</style>


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