Главная > Блог > HTML и CSS > Красивые заголовки ▶ подборка

Красивые заголовки ▶ подборка

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

Анимация для заголовка

HTML разметка

<h2 class="funny-title section-title">Анимация для заголовка</h2>

CSS оформление

@import "https://fonts.googleapis.com/css?family=Russo+One";
h2.funny-title{border-top:5px solid #E0DBDE;border-bottom:5px solid #E0DBDE;font-size:70px;text-align:center;margin-top:40px;margin-bottom:5px;text-transform:uppercase;font-family:'Russo One',sans-serif;font-weight:900;letter-spacing:8px}
@-webkit-keyframes move-background {
0%{background-position:-300px 0}
100%{background-position:300px -300px}
}
@-moz-keyframes move-background {
0%{background-position:-300px 0}
100%{background-position:300px -300px}
}
@keyframes move-background {
0%{background-position:-300px 0}
100%{background-position:300px -300px}
}
.section-title{-webkit-animation-play-state:running;-moz-animation-play-state:running;animation-play-state:running;color:transparent;background:url(https://obninsksite.ru/assets/theme/images/blog/square.svg) no-repeat #ECE7EA;background-size:cover;-webkit-text-fill-color:transparent;-moz-text-fill-color:transparent;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-animation:move-background 20s infinite linear alternate;-moz-animation:move-background 20s infinite linear alternate;animation:move-background 20s infinite linear alternate}

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

HTML разметка

<div class="title-container">
  <h1>Заголовок с линией</h1>
</div>

CSS оформление

.title-container{position:relative;width:300px}
.title-container h2:after{content:"";position:absolute;border-bottom:2px solid red;width:100%;bottom:0}

HTML разметка

<div class="logo-title">
  <a href="#">Super<br>Gribabas</a>
</div>

CSS оформление

.logo-title{margin:50px auto;text-align:center;cursor: pointer}
.logo-title 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)}
.logo-title a:first-line{font-size:.8em}
.logo-title 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)}

HTML разметка

<svg>
  <filter id="displacementFilter">
    <feturbulence type="turbulence" basefrequency="0.04" numoctaves="2" result="turbulence"/>
    <fedisplacementmap in2="turbulence" in="SourceGraphic" scale="6" xchannelselector="R" ychannelselector="G"/>
  </filter>
</svg>
<div class="two">
<p class="svg-p">Вот так вот</p>
</div>

CSS оформление

@import "https://fonts.googleapis.com/css?family=Hammersmith+One";
svg{display:none}
.svg-p{font-size:80px;-webkit-text-stroke:2px #000;font-family:FredokaOne-Regular;color:#A6540D;text-align:center;margin:0}
.two{filter:url(#displacementFilter);padding:20px 40px;background-image:linear-gradient(73deg,#FFAB00 20%,#FFAB00 43%,#FFD740 43%,#FFD740 93%);border:3px solid #000;box-shadow:1px 3px 3px 1px rgba(0,0,0,0.45),inset 0 -3px 0 0 #000000,inset 2px 6px 0 0 #FFD740,inset -7px -3px 0 0 #FFAD07;border-radius:20px}

HTML разметка

<ul class="animate-ul">
  <li>T</li>
  <li>I</li>
  <li>T</li>
  <li>L</li>
  <li>E</li>
</ul>

CSS оформление

.animate-ul{position: relative;margin-top: 70px;left: 50%;display: flex;transform: translate(-50%,-50%);}
.animate-ul li{list-style:none;letter-spacing:15px;font-size:5em;font-family:fantasy;color:#484848;animation:ani 1.2s linear infinite}
.animate-ul li:nth-child(1){animation-delay:.2s}
.animate-ul li:nth-child(2){animation-delay:.6s}
.animate-ul li:nth-child(3){animation-delay:.8s}
.animate-ul li:nth-child(4){animation-delay:1s}
.animate-ul li:nth-child(5){animation-delay:1.4s}
.animate-ul li:nth-child(6){animation-delay:1.8s}
.animate-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:#fff900;text-shadow:0 0 7px #fff900,0 0 70px #fff123}
}

HTML разметка

<h2 data-content="HTML CSS" class="style-1">HTML CSS</h2>

CSS оформление

.style-1{font-size:6em;line-height:.7;position:relative}
.style-1:after{content:attr(data-content);position:absolute;left:0;right:0;top:0;bottom:0;-webkit-text-stroke:1px #fff}
.style-1:before{content:attr(data-content);position:absolute;left:0;right:0;top:0;bottom:0;-webkit-text-stroke:3px #463f60}
➤