Оформлення текстової інформації Web має свої певні особливості. Якщо ви розміщуєте на сайті якийсь контент, то зазвичай він повинен бути добре структурованим — для цього використовуються заголовки. З їх допомогою тексти виходять максимально легкими для читання та сприйняття.

Перед тим як розпочати пару моментів:

• Всі шрифти з прикладів є безкоштовними та доступними в Google WebFonts.
• У прикладах є лише заголовки Н1-Н4, оскільки вони найчастіше використовуються.
• Автор CSS стилів використовував модель, при якій [ширина] = [фактична ширина елемента] + [відступи padding] + [кордони borders]. Для цього в коді розташований сніпет:

*, *:after, *:before ( box-sizing: border-box; )

Насамкінець у вступі згадується таке поняття як «вертикальний ритм» (vertical rhythm). Воно фактично задає всі відступи між блоками на сторінці — заголовки, текстові параграфи, зображення або навіть просто елементи шаблону сайту. Особливо актуально це при використанні незвичайної. Отже, у всіх приклади CSSстилів використовується той самий «ритм»:

h1 ( font-size: 36px; line-height: 40px; ) h2 ( font-size: 30px; line-height: 40px; ) h3 ( font-size: 24px; line-height: 40px; ) h4 ( font-size : 18px; line-height: 20px; )

Тепер можна переходити безпосередньо до практики.

Приклад 1

Починаємо з більш-менш простого варіанта. Друкарня відмінно підходить для сайту ЗМІ, можливо навіть якоїсь газети. Особливих вишукувань це рішення не пропонує, хіба що використовується 2 шрифти - Ultra (sans-serif), Orienta (sans-serif). Підсумковий CSS код:

Demo-1 .main h1 ( margin: 1em 0 0.5em 0; color: #343434; font-weight: normal; font-family: "Ultra"; text-transform: uppercase; text-shadow: 0 2px white, 0 3px #777; ) .demo-1 .main h2 ( margin: 1em 0 0.5em 0; color: #343434; font-weight: normal; font-size : 30px; line-height: 40px; font-family: "Orienta", sans-serif; ) -height: 40px; font-weight: normal; text-transform: uppercase; font-family: "Orienta", sans-serif; letter-spacing: 1px; font-style: italic; ) .demo-1 .main h4 ( margin: 1em 0 0.5em 0; color: #343434; font-size: 18px; line-height: 20px; font-weight: normal;

Приклад 2

Тут уже трохи цікавіша реалізація — додається фон для заголовка у вигляді суцільної заливки та картинки. CSS код прописаний досить грамотно, відступи вказані у відсотках, щоб при зменшенні зображення текст заголовка не зливався з фоновою картинкою. Штифи Titillium Web (sans-serif), Muli (sans-serif).

Demo-2 .main h1 ( margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; position: relative; font-size: 36px; line-height: 40px; padding: 15px 15px 15px 15%; color: #355681; border-radius: 0 10px 0 10px;background: #fff url(../images/bartoszkosowski.jpg) weight: normal, position: relative, text-shadow: 0 -1px rgba(0,0,0,0.6); font-size: 28px; line-height: 40px; background: #355681; , 0.8), border: 1px solid #fff; padding: 5px 15px; color: white; border-radius: 0 10px 0 10px; "Muli", sans-serif; ) .demo-2 .main h3 ( margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; shadow: 0 -1px 1px rgba(0,0,0,0.4); font-size: 22px; line-height: 40px; color: #355681; text-transform: uppercase; border-bottom: 1px solid rgba (53,86,129, 0.3); ) .demo-2 .main h4 ( margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; position: relative; font-size: 18px; line-height: 20px; color: #788699; font-family: "Muli", sans-serif;

Приклад 3

Тепер приклад реалізації заголовків для сайту із темним дизайном. Для цього був підібраний досить яскравий, контрастний блакитний колір на противагу темно сірий фон. Шрифти Hammersmith One (sans-serif), Questrial (sans-serif).

Demo-3 .main h2: after, . demo-3 .main h3: after, . demo-3 . width: 5px, border-radius: 2px; background: #0AF; ) .demo-3 .main h3:after ( background: #3BF; ) .demo-3 .main h4:after ( background: #6Cf; ) .demo-3 .main h1 ( font-size: 36px; line-height: 40px; margin: 1em 0 .6em 0; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 ,0,0,0.4), position: relative; color: #6Cf; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; font-size: 30px; line-height: 40px; .demo-3 .main h3 ( margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; color: white; font-family: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; font-size: 24px; line-height: 40px; font-family: "Questrial", sans-serif; ) .demo-3 .main h4 ( margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; color: white; font-family: "Hammersmith One"; : 0 -1px 0 rgba(0,0,0,0.4); position: relative; font-size: 18px;

Приклад 4

Експериментуємо з фоном як додати дерев'яну текстуру. Шрифти Scada (sans-serif), Carrois Gothic (sans-serif), причому листочок для H2 також реалізований через шрифт, а не картинку.

Demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i 0.8em; ) .demo-4 .main h2:after, .demo-4 .main h3:after, .demo-4 .main h4:after ( position: absolute; content: ""; : 2px, left: 0; bottom: 0; ( width: 100%; ) .demo-4 .main h3:after ( width: 75%; ) .demo-4 .main h4:after ( width: 50%; ) .demo-4 .main h1 ( margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; position: relative; text-shadow: 2px 0 40px; font-family: "Carrois Gothic", sans-serif; -family: "Scada", sans-serif; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 30px; line-height: 40px; ) .demo-4 .main h3 ( margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: "Scada", sans-serif; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 24px; line-height: 40px; ) .demo-4 .main h4 ( margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: "Scada", sans-serif; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 18px; line-height: 20px;

Приклад 5

Ще одне цікаве та не зовсім звичайного колірне рішення— можливо, підштовхне вас до якихось своїх ідей та реалізації. Заголовки, в принципі, не завжди можуть мати великий жирний шрифт — бувають і такі варіанти.

Demo-6. font-size: 58px; line-height: 54px; text-shadow: 2px 5px 0 rgba(0,0,0,0.2); ) . #148773; font-size: 26px; line-height: 40px; font-weight: bold; font-family: "Josefin Sans", sans-serif; color: #343434; font-size: 22px; line-height: 40px; font-weight: 100; text-transform: uppercase; font-family: "Josefin Sans", sans-serif; -style: italic; ) .demo-6 .main h4 ( margin: 1em 0 0.5em 0; color: #343434; font-size: 18px; Josefin Sans", sans-serif; )

Якщо ви знаєте CSS майже докладно, то в оригінальній статті розповідається як використовувати деякі pre-processors в стилях щоб скоротити обсяг коду і зробити його простіше. Чесно кажучи, використання функцій та встановлення параметрів у файлі стилів CSSя бачив уперше, але код виходить дуже наочним. Також, зрозуміло, у вихідній статті знайдете посилання на вихідні та демо версії всіх варіантів.

P.S. Т ним, хто працює в інтернеті або тільки-но починає стаття про те, що таке ТІЦ допоможе зорієнтуватися в одному з найактуальніших і обговорюваних понять в мережі.

До заголовків на сайті чи блозі завжди хочеться привернути увагу, хочеться зробити їх красивими та бажано з ефектами (наприклад тінь, свічення чи 3D). Досить красиві заголовки можна робити в програмі Adobe Photoshop, однак, на виході вони є картинками, а значить їх текс не можуть прочитати пошукові роботи ... Що ж робити? Вихід є!

При визначенні релевантності Вашої веб сторінки певним пошуковим запитамі присвоєння їй місця в пошуковій видачізаголовки грають далеко не останнє місце. Я навіть сказала б — одне з найбільш значущих. Було б досить необачно залишати їх у вигляді картинки (хоча один раз я переробляла один веб-сайт, весь текст якого на декількох сторінках був картинкою… так, та й таке зустрічається…).

Можна, звичайно ж, «забити» на красу і зробити заголовки звичайними, як скрізь. Але навіщо, якщо є досить нескладний спосіб, який і заголовки Ваші залишить у форматі тексту та ефектів їм може надати дуже гарних та цікавих? І сьогодні я вам ці прийоми покажу. Думаю, після того, як Ви освоїте ці прийоми, то користуватиметеся ними постійно. Одним словом, вб'єте двох зайців: додайте ефектності своєму веб дизайну та релевантності сторінки не зашкодите.

Давайте почнемо!

Створюємо 3D заголовок

Отже, створюватимемо ефекти прямо при верстці веб-сторінки.

1. Для початку потрібно створити новий HTML-файл, а також файл таблиці стилів (css).

Щоб показати Вам як все це робиться, я створила html-файл і назвала його «title.html» (все вихідні файлицього уроку при необхідності Ви можете завантажити та подивитися у «вихідниках»). Ось вихідний коднашого html-файлу:

3D Text Here

Shadow Title Here

Glow Text Here

Anaglyphic Text

Це документ формату HTML5, до нього підключена таблиця стилів (файл css.css), всередині тега body присутні лише чотири заголовки різного калібру.

З цими заголовками ми і працюватимемо. Більше у html-файлі нам нічого не знадобиться.

2. Як я вже говорила, нам потрібен файл таблиці стилів. Ми його вже підключили, але якщо Ви його не створили, створіть.

Я створила файл з ім'ям css.css і розмістила його в тому ж каталозі, що html-файл.

Перед тим як розпочати створення 3D-заголовка давайте пропишемо кілька основних стилів для сторінки, щоб вона виглядала трохи привабливіше.

Пропишемо висоту, ширину, колір сторінки, оцінимо її та задаємо пунктирну рамку для тега body.

А ще одразу вирівняємо всі наші заголовки по центру.

Ось код, який потрібно прописати до файлу таблиці стилів:

Body(height:700px; width:90%; background-color:#069; margin:0 auto; border:1px dashed #000066; ) h1, h2, h3, h4(text-align:center;)

Запустіть html-файл у браузері. Сторінка виглядатиме так:

3. Тепер розпочнемо перетворення. Перетворюватимемо на 3D-текст заголовок h1.

Все це відбуватиметься все в тому ж файлі таблиці стилів.

Помістіть наступний код нижче всього того, що Ви написали до цього файлу css.css:

H1(font-size:72px; кольори:#fff; text-shadow:#B6B6B6 1px -1px 0, #B6B6B6 2px -2px 0, #B6B6B6 3px -3px 0, #B6B6B6 4px -4px 0, 0; )

А тепер розберемо цей шматок коду. У перших двох стоках ми задаємо розмір шрифту та основний колір. А ось далі починається найцікавіше. За допомогою якості text-shadow ми створюємо тінь шрифту, але не зовсім.

Справа в тому, що після двокрапки в цій властивості перераховані такі параметри: колір, зсув по горизонталі, зсув по вертикалі та розмиття.

Що ми робимо?

По-перше: ми підбираємо колір близький до основного, але темнішого. У нашому прикладі основний колір білий, а колір для text-shadow сірий (але не дуже темний). Тут потрібно експериментувати, поки не досягнете потрібного результату.

По-друге: ми поступово зрушуємо (щоразу на 1 піксель) цю тінь праворуч і вгору. Про це говорять наступні два параметри (1px -1px, 2px -2px і т.д.).

По-третє: розмиття ми всюди залишаємо нульовим, тому що для створення 3D-тексту воно нам просто не потрібне.

У результаті отримуємо таку картину:

У цьому прикладі я зупинилася на 5px зсуву, але ви можете робити і більше чи менше. Все залежить від того, якого результату Ви хочете досягти.

Також обов'язково експериментуйте з квітами, намагаючись створити природніший вигляд.

Створюємо заголовок з тінню

Створити заголовок із тінню дуже просто. І доб'ємося цього всього кількома рядками коду.

Зараз працюватимемо над заголовком h2.

Для початку потрібно задати йому розмір і основний колір (розмір я виставляю такий самий як і у заголовка h1, але Ви, звичайно ж, оформляйте кожен заголовок як потрібно Вам).

Після того як задали колір та розмір, знову скористаємось властивістю text-shadow. Першим параметром вкажемо колір, його потрібно взяти темніше (все-таки це тінь). Другий та третій параметри – це зрушення по горизонталі та вертикалі. Текст у мене великий, тому я зроблю їх рівними 5 пікселям. І останній параметр – це радіус розмиття. Для тіні він потрібний, тому присвоюємо йому значення 4 пікселі. У результаті, код виглядатиме ось так:

H2(font-size:72px; color:#F90; text-shadow:#191919 5px 5px 4px; )

А виглядатиме це ось так:

Ви можете експериментувати з параметрами і отримувати різні результати. Враховуйте розмір шрифту тексту, його колір і те, що ви хочете отримати.

Створюємо заголовок зі свіченням

Це також просто. Тут працюватимемо із заголовком h3.

Принцип такий самий: спочатку ми задаємо розмір шрифту та його основний колір, а потім використовуємо text-shadow.

Вибираємо колір свічення. Він, як Ви розумієте, буде світлішим за основний колір заголовка. Другий і третій параметри дорівнюватимуть нулю (тут ми нічого нікуди зрушувати не будемо). А ось радіус розмиття потрібно зробити якомога більше (його розмір теж залежить від того, яке світіння Ви хочете отримати).

У результаті код буде наступним:

H3(font-size:72px; color:#333; text-shadow:#fff 0 0 20px; )

А виглядатиме наш заголовок зі свіченням буде ось так:

Заголовок зі стереоефектом

Ще його можна назвати анагліфічним текстом. Його можна порівняти із окулярами для перегляду 3D фільму.

Не мучитиму Вас ... Як кажуть: краще один раз побачити, ніж слухати довгий опис.

Ефект дуже цікавий і створити його в принципі також не складно.

Давайте почнемо. Тут ми будемо працювати із заголовком h4.

1. Для початку поставимо розмір для заголовка. Я зроблю його таким самим, як і в інших заголовках у нашому прикладі.

Тепер потрібно позиціонувати елемент заголовка. Надамо властивості position значення relative. Це означає, що положення елемента буде встановлене щодо його вихідного місця.

Тепер дамо йому колір. Робити ми це у форматі rgba. Якщо ви ще не стикалися з таким визначенням кольору, то не лякайтеся. Все просто: перші три параметри в дужках визначатимуть колір ( формат rgb), а останній параметр визначить ступінь його непрозорості. У прикладі це значення дорівнюватиме 0.5 (тобто 50%).

Ось код всього вищеописаного:

H4(font-size:72px; position:relative; color:rgba(0,0,102,0.5); )

2. А тепер найцікавіше. Ми створимо для нашого елементу h4 псевдо елемент. Для цього потрібно буде прописати його в таблиці стилів як h4:after.

Цей псевдо елемента матиме кілька цікавих властивостей. Наприклад, властивість content, в якому необхідно прописати такий самий текст, як і у заголовка h4.

Позиціонувати псевдо елемент необхідно абсолютно (position:absolute).

Колір йому потрібно встановити протилежний кольору елемента h4. Тобто, якщо у h4 колір синій, то псевдо елемента колір буде червоним. А непрозорість так само 50%.

І ще, розташування псевдо елемента ми регулюватимемо за допомогою властивостей left і top. Нам необхідно зробити так, щоб псевдо елемент, що дублює за своїм змістом елемент h4, розташовувався трохи правіше та нижче (зараз Ви самі все побачите). Тут налаштування будуть індивідуальні та залежатимуть від величини шрифту, типу шрифту та бажаного ефекту.

Ось код всього перерахованого вище:

H4:after( content:"Anaglyphic Text"; position:absolute; left:361px; top:2px; color:rgba(255,0,0,0.5); )

А ось ефект того, що в нас вийде:

Ось і все, чого я хотіла навчити Вас у цьому уроці.

Обов'язково використовуйте цю техніку! По перше:гарно, по-друге:всі заголовки чудово читаються пошуковими роботами, по-третє:один раз написавши код, Ви зможете використовувати заголовок на будь-якій веб-сторінці Вашого сайту або блогу, просто оголосивши його в html-коді.

Якщо Вам сподобався цей урок, напишіть свій коментар(якщо не сподобався – також:)). Він буде розцінений як подяка.

Також Ви можете ділитися уроком із своїми друзями за допомогою кнопок соціальних мереж.

І звичайно, підписуйтесь на оновлення блогу (якщо Ви ще не підписалися). Обіцяю багато корисного та цікавого!

Гарного Вам настрою та до нових зустрічей!

Кажуть, ви не можете судити про книгу з її обкладинки, але люди роблять це щодня. Вони беруть книгу, дивляться на обкладинку, а потім беруть нову або кладуть назад, або перевертають і дивляться, що написано на звороті, АБО відкривають її, тільки глянувши на обкладинку. Вебсайти також оцінюють за їхньою обкладинкою та першим враженням, яке часто виходить від Заголовка.

Заголовок Вашого сайту зазвичай перше, що бачать люди. З цього напису або малюнку верхньої частини сторінки, люди роблять радикальні міркування про те, що вони побачать та прочитають. Ті ж люди, які кажуть, що ви не можете судити про книгу по її обкладинці, також кажуть, що у вас є лише 30 секунд, щоб справити гарне враження. У світі Інтернету, де до наступної сторінки - клацання мишки, у вас набагато менше часу на це.

Ми розповімо Вам про Архітектуру Заголовків у WordPress та запропонуємо поради про те, як налаштувати його таким чином, щоб він став Вашою власною "книжковою обкладинкою", яка заманює людей на Ваш сайт, справляючи гарне враження. Потім ми запропонуємо Вам деякі поради експертів про те, що саме представляє собою Хороший заголовок на сайті.

Contents

WordPress Заголовок

За замовчуванням, заголовком WordPress є простий шматок коду. Вам не потрібно розбиратися в коді, щоб змінити заголовок, який постачається з будь-якої WordPress темою. Вам потрібно встановити в блозі або на сайті Назва та Опис сайту > > , а WordPress зробить все інше.

В своїй найпростішою формою- Класичній Темі - WordPress Заголовок представляє собою код у файлі шаблону wp-content/themes/classic/header.php:

">

Заголовок розташований в h1 тегу і виконує функцію , що використовуються в двох різних варіантах або параметрах. Ви можете дізнатися більше про ці параметри в документації . В принципі, перший відображається на сайті в засланні, а другий відображає ім'я блогу або сайту, як встановлено в > > панелі. Коли користувач переміщає курсор на назву заголовка, заголовок може бути натиснутий, щоб повернутися до основної або головної сторінки сайту, як це передбачено > > панелі.

Тема Default WordPress визначає особливості зображень у фоновому режимі та представляє заголовок, як це у wp-content/themes/default/header.php:

The header of the Default/Kubrick Theme

Шаблон теги показує ім'я блогу або веб-сайту в посиланні, але це демонструє інше використання схожого на URL запиту вище. Він отримує таку саму інформацію, просто інакше. Він додає з описисайту в > > .

Простіше кажучи, ці два приклади заголовків роблять одне й те саме різними шляхами. Вони забезпечують інформацію для заголовка з можливістю розміщення зображення, а створення може допомогти в навігації на веб-сайті. Це лише питання того, скільки інформації Ви хочете бачити у своєму заголовку і як ця інформація буде відображатися.

Використовуючи перший приклад з Classic Theme, зображення все ще може бути використане як фонове, встановленого в таблиці стилів в h1 селекторі, друга тема дає більше контролю у використанні картинки в заголовку шляхом присвоєння їй власної області поділу. Те, як це виглядає, повністю контролюється таблицею стилів.

Стиль Заголовка

Як зазначено в двох наведених вище прикладах, стилі для заголовка містяться всередині селекторів: h1 , header , headerimg і description . Все це знаходиться в style.css, хоча також може перебувати у файлах стилю header.php з теми, яку ви використовуєте. Вам доведеться перевірити в обох місцях. У класичній темі CSS для заголовка знаходяться в одному селекторі #header.

#header ( background: #90a090; border-bottom: double 3px #aba; border-left: solid 1px #9a9; border-right: solid 1px #565; border-top: solid 1px #9a9; font: italic normal 230% "Times New Roman", Times, serif; letter-spacing: 0.2em; margin: 0; padding: 15px 10px

Зелений відтінок вибраний як колір фону та межі навколо заголовка, але кордон має інший відтінок і створює втоплений, тіньовий ефект. Шрифт Times New Roman задається розміром 230% з ширшою, ніж зазвичай, міжсимвольною відстанню. Відступ до сторони створює відступи тексту всередині заголовка.

Всі вони можуть бути легко змінені простим редагуванням кожного атрибуту стилю: може бути збільшена товщина кордону і все з тим же кольором, змінено колір фону, розмір і стиль шрифту, відстань між літерами і т.д.

Те саме стосується і заголовка в Default WordPress темі, за винятком того, що в ній дещо більше стилів, про які доведеться подбати. Вони знаходяться всередині header.php в "head" тезі іу style.css. Коли є багато стилів, краще переміщати всю інформацію в таблицю стилів.

Стилі, що контролюють вигляд заголовка, знаходяться в межах h1, header , headerimg і description CSS селекторів. Так само, як і для класичної теми, можна знайти ці посилання та зробити зміни там, щоб змінити зовнішній вигляд.

Зміна заголовка зображення за промовчанням WordPress тема була спрощена із введенням утиліту під назвою Kubrickr. Він просто просить вас поставити нове ім'я файлу зображення для заголовка, а потім перекладає його для вас, тому вам не доведеться копатися в коді. Якщо все, що ви хочете змінити це зображення заголовка, це надзвичайно корисний та простий інструмент.

Якщо ви хочете, програмувати або копатися у ваших стилях заголовка і внести необхідні зміни. Нижче наведено простий підручник зі зміни лише заголовок зображення вручну.