К заголовкам на сайте или блоге всегда хочется привлечь внимание, хочется сделать их красивыми и желательно с эффектами (например тень, свечение или 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-текста оно нам просто не нужно.
В итоге получаем вот такую картину:
В этом примере я остановилась на 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-коде.
Если Вам понравился этот урок, напишите свой комментарий (если не понравился – тоже :)). Он будет расценен как благодарность.
Также Вы можете делиться уроком со своими друзьями при помощи кнопок социальных сетей.
И конечно же, подписывайтесь на обновление блога (если Вы еще не подписались). Обещаю много полезного и интересного!
Хорошего Вам настроения и до новых встреч!
