Ефектні заголовки на сайт без використання photoshop

Ефектні заголовки на сайт без використання Photoshop

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

І дійсно, при визначенні релевантності Вашої веб сторінки певними пошуковими запитами і присвоєння їй місця в пошуковій видачі заголовки грають ДАЛЕКО не останнє місце. Я б навіть сказала - одне з найбільш значущих. Було б досить необачно залишати їх у вигляді картинки (хоча один раз я переробляла один веб сайт, весь текст якого на декількох сторінках був картинку ... так, так і таке зустрічається ...).

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

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

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

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

Shadow Title Here

Glow Text Here

Anaglyphic Text

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У підсумку отримуємо ось таку картину:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Будьте в курсі нових публікацій на Блозі!

Здорово, звичайно! І красиво! Тільки я не зрозуміла, як це здійснити на сайті, наприклад в статті. сторінку-то зрозуміло -скопіровать і вставити в режимі html, а ось зі стилями як бути? на компі файл стилів окремий. а на сайті куди його засунути?

А якщо у Вас на сайті стилі прописуються в тому ж файлі (наприклад, між тегами style, то прописуйте правила стилів там. Хоча я настійно рекомендую виносити стилі в окремий файл

Велике спасибі за Ваш відгук. Буду і надалі намагатися радувати Вас корисною і потрібною інформацією

на жаль у мене не вийшли такі заголовки. вийшли зовсім звичайні. Начебто все зробила правильно. крім того змінився колір тексту з сірого на чорний. Що я роблю не так?

Все, знайшла помилку, вийшло красиво. Дякую за прекрасні заголовки. Liudmila. Danmark.

Все добре, тільки останній стерео заголовок відображається некоректно в будь-якому браузері, сиджу з планшета. Поясніть в чому справа? Хочу все знати)

Велике спасибі за цікаву і дуже корисну статтю. Завдяки Вам я зміг створити 3D-заголовок в шапці свого сайту.