Повстречал на одном из шаблонов вот так оформленный заголовок - вроде бы все просто и красиво, но иногда забываешь до такого додуматься 🙂 Итого код ниже:
ХТМЛ
<h4 class="page-heading ">Последние Блоги</h4>
ЦСС
.page-heading:before { content: url("../img/box-heading-left.png"); left: 0; position: absolute; top: -6px; } .page-heading:after { content: url("../img/box-heading-right.png"); position: absolute; right: 0; top: -6px; } .page-heading { display: inline-block; font-size: 31px; font-weight: 300; margin-bottom: 10px; padding: 0 50px; position: relative; line-height: 1.1; color: #535353; font-family: "Roboto Slab",sans-serif; margin-top: 0; overflow: hidden; text-transform: uppercase; }
или еще вот такое оформление
<div class="section-title "> <h2>Featured Products</h2> </div>
ЦСС
.section-title h2:before { background-image: url("img/divider-top.png"); height: 8px; top: 0; width: 334px; } .section-title h2:before, .section-title h2:after { content: ""; left: 50%; position: absolute; transform: translateX(-50%); } *, *:before, *:after { box-sizing: border-box; } .section-title h2:after { background-image: url("img/divider.png"); bottom: 0; height: 6px; width: 334px; } .section-title h2:before, .section-title h2:after { content: ""; left: 50%; position: absolute; transform: translateX(-50%); } .section-title h2, h1, h2, h3, h4, h5, h6 { font-style: normal; font-weight: normal; } .section-title h2 { background-position: center bottom; background-repeat: no-repeat; color: #3a3a3a; font-family: "Times New Roman"; font-size: 19px; letter-spacing: 7px; padding: 15px 0 13px; position: relative; text-transform: uppercase; } .section-title h2 { line-height: 1; margin: 0; }
найдено тут. картинки мелкие конечно же лучше в base64 перевести и прописать в самом цсс