Красивые заголовки для сайта с помощью CSS
 | |
| Вы хотите сделать сайт привлекательным, начните с красивых заголовков, которые выполнены на чистом CSS, и отлично идут под оформление страницы. Ведь здесь мы можем подключить анимацию, что полностью реализована на CSS3, а значит совершенно не заметна по весу. Но и безусловно сам шрифт, ведь здесь можно выставить как главные заголовки, так и некоторые, что идут в формате 3d, то они отлично подойдут под логотипы. Все заточено на оригинальный дизайн, где при открытии страницы вы просто поражаетесь ее оформлением. И в большинстве нажмут для дальнейшего прохождение, а значит дизайн и стилистика заголовком полностью себя оправдывает. Теперь рассмотрим несколько вариантов, где можно подобрать нужный стиль, что полностью отражает тематическое направление или подходит к основной стилистике дизайна, который идет главным на портале. 1. Вариант:  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)} На этом установочный процесс завершен, где самостоятельно можно задать цветовую гамму и размер шрифта. Демонстрация Второй вариант:  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} } Вот такая небольшая подборка, что больше относиться к оформлению сайта. Где изначально мы перестраиваем заголовки на более заметные в своем оригинале, но если подумать, то такой подход можно много где применить на сайтах. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |