Закрыть панель
Авторизация || вход на сайт

Войти

Эффект оттиска текста в Photoshop и CSS

Печать
PDF

20 Марта 2010
Раздел Веб-мастеру

эффекты оттиска в css

Эффект оттиска хорошо выглядит на современных сайтах. Наверняка вы уже встречали на сайтах ссылки или текст, который, при наведении указателя смежается и создает эффект оттиска. Его можно легко сделать с помощью Photoshop, а также с помощью текстовой тени CSS. Сегодня мы наглядно покажем вам, как достичь этого эффекта с помощью Photoshop и CSS, ведь все очень просто.

Итак, сегодня мы собрались, чтобы узнать, как получить эффект оттиска текста с помощью Photoshop.

Сразу можете посмотреть на итоговый результат нашего урока:

Демо оттиска текста в Photoshop и CSS

Текс в Photoshop

Шаг 1: Новый документ

Создаем новый документ в Photoshop (Ctrl + N) размером 535х250.

новый документ в photoshop

Шаг 2: Фон

Создаем новый фоновый слой (Shift + Ctrl + N), нажимаем OK. Делаем заливку для фона, к примеру цветом #fff7f7

новый слой

Шаг 3: Слой для текста

Теперь напишем какой-нибудь текст, к примеру uaBIG.com :)

слой для текста

Создаем для текста внутреннюю и внешнюю тень, для этого клацаем два раза на закладке текстового слоя.

меняем тень текста

Устанавливаем настройки слоя (Layer Style), к примеру следующие:

Drop Shadow (цвет fefefe)

drop shadow

Inner Shadow (цвет 575656)

Color Overlay

Color Overlay (цвет c5c5c4)

Color Overlay

Результат

текст в Photoshop

Эффект в CSS

Теперь создаем стиль для нашего текста в CSS.

Для начала сделаем html-страничку, на которой разместим наш текст. Код для страницы следующий:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Эффект оттиска текста в Css и Photoshop</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="letterpress">
 <h1>uaBIG.com</h1>
 </div>
</body>
</html>

Для получения эффекта, в CSS будем использовать textshadow, textshadow:

body {
 background-image:url(../images/Untitled-1_03.gif);
 background-repeat:repeat;
}
#letterpress {
 margin-top:200px;
 text-align:center;
}
#letterpress h1 {
 font-size:60px;
 font-family: Arial, Helvetica, sans-serif;
 color: #504f4f;
 text-shadow: 0px 2px 1px #bbbaba;
}
#letterpress h1:hover {
 color: #666;
 text-shadow: 0px 2px 1px #333;
}

Демо полученного эффекта

Для дискуссии

Надеемся, что в данном уроке вы узнали для себя что-то новое. Если у вас есть замечания или предложения по совершенствованию данного урока, оставьте, пожалуйста, свой комментарий.


rssfeed Читайте нашу RSS-ленту
Статья была Вам полезна? Подпишитесь и получайте наши новости по RSS. Также Вы можете добавить данную новость себе в закладки. Спасибо.
Email Favoriten
Тэги материала
Следующая >
Похожие материалы:
Предыдущие материалы:

КомментарииКомментарии  

 
0 #2 tttt 13.11.2011 16:56
КАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай админКАртинка сделай
Цитировать
 
 
0 #1 сделайте картинки 07.11.2011 09:37
КАртинка сделай админ
Цитировать
 

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


Защитный код
Обновить

Вход на сайт:



Последние отзывы:

Кто мы? немного информации о проекте uaBIG.com

about_us_uabig

Привет! Рады тебя видеть в нашем блоге. Давай знакомиться! uaBIG.com - проект, реализованный группой молодых людей из Киева. Мы ежедневно наполняем наш блог актуальной и подробной информацией о веб-разработке и дизайне. Если ты хочешь создать красивый сайт своими силами, подписывайся и следи за блогом, мы тебя обязательно научим! Наш рабочий кабинет здесь.

Популярные теги: часто используемые мета-теги uaBIG.com