ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создание заголовка в стиле 3D на CSS3

Создание заголовка в стиле 3D на CSS3

Создание заголовка в стиле 3D на CSS3
Если вы создаете оригинальный интернет ресурс и он должен всем отличаться, то создание заголовка в стиле 3D на CSS3 вам должно пригодиться. Оформление может быть разным, и почему его не сделать красивым в 3D. Это может быть как заголовок, так и описание в статье идти как главное название. Изначально он будет заключен в h1 и не будет не каких изображение. Стили основное что здесь и вы можете изменить как размер и сделать под любой фон, что не удавлюсь на сайте реально не в самом блоге можно цвидеть а как реальное название, по клику который переходит к материалу.

Заголовок на сайте в стиле 3D

Установка:

CSS:

Код
body {
  font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
  font-size: 13px;
  background: #cecece;
}
/* Стили заголовка */
.head {
  font-size: 70px;
  margin: 70px auto;
  text-align: center;
  color: #D4D4D4;
  text-shadow: 0px 1px 1px #828282, 0px 2px 1px #E0E0E0, 0px 3px 1px #FFFFFF, 0px 4px 1px #C3C3C3, 0px 5px 1px #D2D2D2, 0px 6px 1px #bbb, 0px 7px 1px #777, 0px 8px 3px rgba(111, 97, 97, 0.4), 0px 9px 5px rgba(100, 100, 100, 0.1), 0px 10px 7px rgba(100, 100, 100, 0.15), 0px 11px 9px rgba(100, 100, 100, 0.2), 0px 12px 11px rgba(100, 100, 100, 0.25), 0px 13px 15px rgba(100, 100, 100, 0.3);
}

/* Полпись */
.info{
  color:rgba(78, 78, 78, 0.8);
  width:100%;
  text-align: center;
  font-weight:300;
}
.info a {
  color: #888;
  text-decoration:none;
}
.info a:hover {
  color: #fff;
}


Но теперь сам код, котором будет заключаться название.

Код
<h1 class="head">ZORNET.RU</h1>


Здесь мы сразу видим H1 что только идет под заголовок или ключевые слова которые основном находятся в нем.

Источник: http://dbmast.ru/
15 Марта 2016 Просмотров: 2094 Комментариев: (4)

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

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

Оставь свой отзыв

Комментарии: 3
tsakonter
tsakonter 15 Марта 2016 01:051
0
Что то новое, чтоб заголовок был в 3D, просто с h1 это все таки больше к ceo относиться и почему обязательно на его посадили.
Сопрано
Сопрано 15 Марта 2016 01:092
0
Ну наверно, потому, что всегда под заголовок ставят H1 но так думаю, но можно думаю изменить.
Kostik-malek
Kostik-malek 15 Марта 2016 05:343
0
Если только в самом тексте заголовок делать, то с этим согласен и красиво будет.
avatar