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

Красивые заголовки ▶ подборка
HTML и CSS 0    17226 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}


Поделиться с друзьями


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

Подборка слайдеров для сайта на чистом CSS
Кнопка для сайта в стиле минимализм
Градиент для кнопок на сайте
3D текст с мультяшным эффектом на CSS
CSS анимация в стиле рентгена
Верстка блоков со стрелочками
Анимированный фон с плавающими облаками
Красивое оформление 404 страницы
Вертикальное hover hide меню для сайта на HTML и CSS
Стилизация Input File

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

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

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