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

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

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

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

HTML разметка

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

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 разметка

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

CSS оформление

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

HTML разметка


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 разметка


  
    
    
  

Вот так вот

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}

  • T
  • I
  • T
  • L
  • E

HTML разметка

  • T
  • I
  • T
  • L
  • E

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 CSS

HTML разметка

HTML CSS

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}


Похожие статьи:

Вертикальное hover hide меню для сайта на HTML и CSS
Стилизация Input File
Стилизация checkbox и radio
Учим HTML5 Canvas за 30 минут
Прелоадер для сайта ▶ как сделать?
Красивые CSS3 кнопки с анимацией и hover эффектами
Как скрыть элементы в Bootstrap | Классы .hidden и .visible
Адаптивный дизайн для сайта через @media

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Вы можете авторизоваться на сайте через:
    YandexVkontakte