Эффектные заголовки на сайт без использования Photoshop

К заголовкам на сайте или блоге всегда хочется привлечь внимание, хочется сделать их красивыми и желательно с эффектами (например тень, свечение или 3D). Достаточно красивые заголовки можно делать в программе Adobe Photoshop, однако, на выходе они представляют собой картинки, а значит их текс не могут прочесть поисковые роботы… Что же делать? Выход есть!

дополнительные материалы к урокам демо версия урока

эффектные заголовки на сайт

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

Можно конечно же «забить» на красоту и сделать заголовки обычными, как везде. Но зачем, если есть достаточно несложный способ, который и заголовки Ваши оставит в формате текста и эффектов им может придать очень красивых и интересных? И сегодня я Вам эти приемы покажу. Думаю, после того, как Вы освоите эти приемы, то будете пользоваться ими постоянно. Одним словом, убьете двух зайцев: придадите эффектность своему веб дизайну и релевантности страницы не навредите.

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

Создаем 3D заголовок

Итак, будем создавать эффекты прямо при верстке веб страницы.

1. Для начала нужно создать новый html-файл, а также файл таблицы стилей (css).

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



<!doctype html> <html> <head> <meta charset="windows-1251"> <link rel="stylesheet" type="text/css" href="css.css"> <title>Untitled Document</title> </head> <body> <h1>3D Text Here</h1> <h2>Shadow Title Here</h2> <h3>Glow Text Here</h3> <h4>Anaglyphic Text</h4> </body> </html>

Это документ формата 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; color:#fff; text-shadow:#B6B6B6 1px -1px 0, #B6B6B6 2px -2px 0, #B6B6B6 3px -3px 0, #B6B6B6 4px -4px 0, #B6B6B6 5px -5px 0; }

А теперь давайте разберем этот кусок кода. В первых двух стоках мы задаем размер шрифту и основной цвет. А вот дальше начинается самое интересное. При помощи свойства text-shadow мы как бы создаем тень шрифту, но не совсем.

Дело в том, что после двоеточия в этом свойстве перечислены следующие параметры: цвет, сдвиг по горизонтали, сдвиг по вертикали и размытие.

Что мы делаем?

Во-первых: мы подбираем цвет близкий к основному, но потемнее. В нашем примере основной цвет белый, а цвет для text-shadow серый (но не очень темный). Здесь нужно экспериментировать, пока не добьетесь нужного результата.

Во-вторых: мы постепенно сдвигаем (каждый раз на 1 пиксель) эту тень вправо и вверх. Об этом говорят следующие 2 параметра (1px -1px, 2px -2px и т.д.).

В-третьих: размытие мы везде оставляем нулевым, потому что для создания 3D-текста оно нам просто не нужно.

В итоге получаем вот такую картину:

3D-текст, созданный с CSS3

В этом примере я остановилась на 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-коде.

Если Вам понравился этот урок, напишите свой комментарий (если не понравился – тоже :)). Он будет расценен как благодарность.

Также Вы можете делиться уроком со своими друзьями при помощи кнопок социальных сетей.

И конечно же, подписывайтесь на обновление блога (если Вы еще не подписались). Обещаю много полезного и интересного!

Хорошего Вам настроения и до новых встреч!

Как подключить любые шрифты для сайта

Форма обратной связи на сайт

Инструменты, которые должен иметь под рукой веб дизайнер-верстальщик

Понравилась статья? Поделись с друзьями!


Не нашли того, что искали? Воспользуйтесь расширенным поиском!

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

rss podpiska

Введите Ваш E-mail:


Комментарии к этой статье:

Комментарий добавил(а): Александр
Дата: 2013-12-10

Пара замечаний. Во-первых, поисковые роботы картинки тоже могут читать. А во-вторых, вы не написали о нюансах использования этих эффектов на сайте. например, в каких браузерах это работает, а в каких нет. И в третьих, нет конкретного примера, чтобы можно было посмотреть в натуральном виде, а не в виде изображения. Замечания по существу. Вам для размышлений. :-)

Комментарий добавил(а): Админ
Дата: 2013-12-10

Спасибо за Ваш комментарий. По поводу замечаний: Во всех популярных на сегодняшний день браузерах описанные эффекты работают; в натуральном виде можно посмотреть эффекты нажав на картинку с надписью "Демо" в самом начале статьи; по поводу текста с картинки: если ваши заголовки заключены в теги типа h1, h2 и т.д., и если в этих заголовках встречается фраза продвигаемого поискового запроса, то релевантность страницы резко увеличивается в глазах поисковых систем. Так что я думаю использовать заголовки есть смысл... а здесь Вам просто примеры как их красиво оформить

Комментарий добавил(а): Ирина
Дата: 2013-12-10

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

Комментарий добавил(а): Админ
Дата: 2013-12-10

Ирина, у Вашего сайта должен быть файл таблицы стилей (расширение .css). В этом файле определяются правила - как будут выглядеть элементы на Вашем сайте (например, размер шрифта для тегов абзаца, тип шрифта и много чего еще). Когда файл подключен к html файлу, он диктует правила для элементов этого html файла. То есть Вам нужно определить, в каком файле таблицы стилей (иногда их бывает несколько)описываются правила для заголовков, стиль которым Вы хотели бы придать. Потом можно открыть этот файл в редакторе, найти нужное правило и отредактировать как Вам нужно.

Комментарий добавил(а): Админ
Дата: 2013-12-10

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

Комментарий добавил(а): Юрий
Дата: 2014-01-25

Здравствуйте, Анна! Везде искал, чтобы кто-нибудь внятно смог объяснить про 3d текст, как его вставить на любую страницу сайта с помощью кодов html и css. И только у Вас это обнаружил! И, конечно, подписался на Ваши новые публикации. Думаю, информация от Вас будет и впредь полезная и нужная. С уважением, Юрий Александрович.

Комментарий добавил(а): Админ
Дата: 2014-01-25

Большое спасибо за Ваш отзыв. Буду и впредь стараться радовать Вас полезной и нужной информацией

Комментарий добавил(а): Серега-кодер
Дата: 2014-08-19

Заголовок со стерео эффектом не является универсальным, так как в объявлении псевдо-класса :after свойство content является статическим и при неоднократно использовании такого заголовка с разным текстом свойство content останется прежним.

Комментарий добавил(а): Liudmila
Дата: 2014-09-07

к сожалению у меня не получились такие заголовки. получились совсем обычные. Вроде бы все сделала правильно. кроме того поменялся цвет текста с серого на черный. Что я делаю не так?

Комментарий добавил(а): Liudmila
Дата: 2014-09-07

Все, нашла ошибку,получилось красиво. Спасибо за прекрасные заголовки. Liudmila. Danmark.

Комментарий добавил(а): Иван
Дата: 2014-12-16

Все хорошо, только последний стерео заголовок отображается не корректно в любом браузере, сижу с планшета. Объясните в чем дело? Хочу все знать)

Комментарий добавил(а): Виктор
Дата: 2016-03-03

Большое спасибо за интересную и очень полезную статью. Благодаря Вам я смог создать 3D-заголовок в шапке своего сайта.

Добавить Комментарий:


Введите сумму чисел с картинки:

Почему стоит подписаться на обновления блога

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

rss podpiska

Введите Ваш E-mail: