» »

Создание заголовка в стиле 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.03.2016 Просмотров: 349 Комментарий: (4)

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

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

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