ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивые заголовки для сайта с помощью CSS

Красивые заголовки для сайта с помощью CSS

Красивые заголовки для сайта с помощью CSS
Вы хотите сделать сайт привлекательным, начните с красивых заголовков, которые выполнены на чистом CSS, и отлично идут под оформление страницы. Ведь здесь мы можем подключить анимацию, что полностью реализована на CSS3, а значит совершенно не заметна по весу. Но и безусловно сам шрифт, ведь здесь можно выставить как главные заголовки, так и некоторые, что идут в формате 3d, то они отлично подойдут под логотипы.

Все заточено на оригинальный дизайн, где при открытии страницы вы просто поражаетесь ее оформлением. И в большинстве нажмут для дальнейшего прохождение, а значит дизайн и стилистика заголовком полностью себя оправдывает. Теперь рассмотрим несколько вариантов, где можно подобрать нужный стиль, что полностью отражает тематическое направление или подходит к основной стилистике дизайна, который идет главным на портале.

1. Вариант:

Заголовки в 3D для сайта

HTML

Код
<div class="nazvaniya_zagolovka">
  <a href="#">сайт<br>ZorNet.Ru</a>
</div>

CSS

Код
.nazvaniya_zagolovka{margin:50px auto;text-align:center;cursor: pointer}
.nazvaniya_zagolovka a{text-decoration:none;-webkit-transform:perspective(2.5em) rotateX(15deg) scaleY(0.8);-moz-transform:perspective(2.5em) rotateX(15deg) scaleY(0.8);-ms-transform:perspective(2.5em) rotateX(15deg) scaleY(0.8);-o-transform:perspective(2.5em) rotateX(15deg) scaleY(0.8);transform:perspective(2.5em) rotateX(15deg) scaleY(0.8);-webkit-transition:all .5s;-moz-transition:all .5s;transition:all .5s;display:inline-block;text-align:center;text-transform:uppercase;font-size:75px;font-weight:700;font-family:'Exo 2';line-height:.8;color:#fbd62a;text-shadow:0 -1px 15px rgba(0,0,0,0.9),0 1px 0 #7f6303,0 3px 0 #846703,0 5px 0 #896b03,0 7px 0 #8e6f03,0 9px 0 #937203,0 6px 50px rgba(252,223,92,0.8)}
.nazvaniya_zagolovka a:first-line{font-size:.8em}
.nazvaniya_zagolovka a:hover{-webkit-transform:perspective(8em) rotateX(11deg) scale(1.2);-moz-transform:perspective(8em) rotateX(11deg) scale(1.2);-ms-transform:perspective(8em) rotateX(11deg) scale(1.2);-o-transform:perspective(8em) rotateX(11deg) scale(1.2);transform:perspective(8em) rotateX(11deg) scale(1.2);text-shadow:0 -1px 15px black,0 1px 0 #7f6303,0 2px 0 #846703,0 0 0 #896b03,0 1px 0 #8e6f03,0 2px 0 #937203,0 2px 30px rgba(252,223,92,0.6)}

На этом установочный процесс завершен, где самостоятельно можно задать цветовую гамму и размер шрифта.

Демонстрация

Второй вариант:

Как создать красивый заголовок при помощи CSS

HTML

Код
<svg>
  <filter id="displacementFilter">
  <feTurbulence type="turbulence" baseFrequency="0.04" numOctaves="2" result="turbulence"></feTurbulence>
  <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="6" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
  </filter>
</svg>
<div class="denasmilas">
<p class="nupodegad">ZorNet.Ru — сайт для вебмастера</p>
</div>

CSS

Код
@import "https://fonts.googleapis.com/css?family=Hammersmith+One";
svg{display:none}
.nupodegad {
  font-size: 75px;
  -webkit-text-stroke: 2px #252323;
  font-family: FredokaOne-Regular;
  color: #da7014;
  text-align: center;
  margin: 0;
}
.denasmilas {
  filter: url(#displacementFilter);
  padding: 18px 38px;
  background-image: linear-gradient(
73deg
,#f1a60f 20%,#eca30c 43%,#ffdd5d 43%,#efc21a 93%);
  border: 3px solid #000;
  box-shadow: 1px 3px 3px 1px rgb(12 12 12 / 45%), inset 0 -3px 0 0 #000000, inset 2px 6px 0 0 #fbd132, inset -7px -3px 0 0 #fdb21b;
  border-radius: 14px;
}

Здесь уже представлена основа, что идет каркасом, но дизайн по всем сторонам выполнен великолепно, и также оригинально шрифт подобран под название заголовка.

Демонстрация

Третий вариант:

Анимационные титле на сайт

HTML

Код
<ul class="perelivaniya-ul">
  <li>Z</li>
  <li>O</li>
  <li>N</li>
  <li>E</li>
  <li>T</li>
  <li>.</li>
  <li>R</li>
  <li>U</li>
</ul>

CSS

Код
.perelivaniya-ul {
  position: relative;
  margin-top: 68px;
  left: 48%;
  display: flex;
  transform: translate(-50%,-50%);
}
.perelivaniya-ul li {
  list-style: none;
  letter-spacing: 14px;
  font-size: 7em;
  font-family: fantasy;
  color: #3a3737;
  animation: ani 1.2s linear infinite;
}
.perelivaniya-ul li:nth-child(1){animation-delay:.2s}
.perelivaniya-ul li:nth-child(2){animation-delay:.6s}
.perelivaniya-ul li:nth-child(3){animation-delay:.8s}
.perelivaniya-ul li:nth-child(4){animation-delay:1s}
.perelivaniya-ul li:nth-child(5){animation-delay:1.4s}
.perelivaniya-ul li:nth-child(6){animation-delay:1.8s}
.perelivaniya-ul li:nth-child(7){animation-delay:1.12s}
@keyframes ani {
0%{color:#44848;text-shadow:none}
90%{color:#44848;text-shadow:none}
100%{color:#fdf70c;text-shadow:0 0 7px #fbf61b,0 0 70px #efe230}
}

Вот такая небольшая подборка, что больше относиться к оформлению сайта. Где изначально мы перестраиваем заголовки на более заметные в своем оригинале, но если подумать, то такой подход можно много где применить на сайтах.

Демонстрация
2021-07-20 Загрузок: 1 Просмотров: 467 Комментарий: (0)

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

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

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

Комментарий: 0
avatar