Перейти к содержимому

Сервис обмена электронных валют


Не получается сверстать один в один с .PSD

#1 Gagarin

Gagarin
  • Пользователь
  • 323 сообщений
  • Репутация: 0
0

Отправлено 09 Ноябрь 2011 - 19:06

Привет всем.

Мне дизайнер сделал макет, верстальщик не может сделать один в один - говорит что такое нельзя сделать, посмотрите реально так или нет (обратите внимание на шрифты в горизонтальн меню и в заголовках блоков, а также на H1)? (снизу то что должно получится, сверху то что сделал верстак).

интернет-тормоз, загрузил к себе на сайт гляньте пжл: http://seven7days.ru/images/vs.png

 

 

  • 0

#2 admin

admin
  • Пользователь PRO
  • 5 272 сообщений
  • Репутация: 54

Отправлено 09 Ноябрь 2011 - 20:59

Gagarin, можно сделать. Сглаживание, правда будет немного не такое, но приблизительно так можно.
  • 0

Сколько лет прошло, а ссылки всё ещё лучше покупать тут



#3 Gagarin

Gagarin
    Topic Starter
  • Пользователь
  • 323 сообщений
  • Репутация: 0

Отправлено 09 Ноябрь 2011 - 21:18

мне тоже кажется что должен быть способ. и желательно вполне реальный способ на css.
  • 0

#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 10 Ноябрь 2011 - 01:21

мне тоже кажется что должен быть способ. и желательно вполне реальный способ на css.

Gagarin, если речь идет об эффекте "вдавленности текста", то на css можно сделать примерно так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>tst</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul#menu{
list-style: none;
width: 1000px;
height: 36px;
background: url(menu.png) 0 0 repeat-x;
}
ul#menu li{
float: left;
font: normal 12px/38px Verdana, Geneva, "DejaVu Sans", sans-serif;
height: 36px;
background: url(menu.png) 0 -36px no-repeat;
}
ul#menu li a{
float: left;
padding: 0 14px;
height: 36px;
color: #333;
text-decoration: none;
text-transform: uppercase;
text-shadow: -1px 0px #999, 0px 1px #fff;
}
ul#menu li a:hover,
ul#menu li a#cur{
color: #90f;
text-shadow: -1px 0px #c9f, 0px 1px #fff;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Наши преимущества</a></li>
<li><a href="#">Прайс-лист и каталог</a></li>
<li><a href="#" id="cur">Контакты</a></li>
<li><a href="#">Регистрация продукта</a></li>
</ul>
</body>
</html>
Картинка "menu.png" (1х72px), используемая в стилях: menu.png
Но совсем на чистом css не получится, потому что IE вплоть до 8-й версии не понимает свойство text-shadow.
Придется либо js прикручивать (например, плагин для jquery "Drop Shadow"), либо еще как-то исхитряться, либо мириться с тем, что у IE-шек текст будет невдавленный.

Если же речь о _точном_ совпадении шрифта, начертания букв, их толщины и сглаживания, то тут на 100% попасть в то, что нарисовал фотошоп, почти невозможно, разве что кнопки и заголовки рисовать картинками. Потому что в разных ОС и браузерах могут быть несколько разные наборы шрифтов и разные способы сглаживания (вплоть до отсутствия похожего шрифта и/или возможности сглаживания).
  • 0

#5 WarEnek

WarEnek
  • Пользователь
  • 107 сообщений
  • Репутация: 9

Отправлено 19 Ноябрь 2011 - 14:18

Верстальщик просто лукавит. А сделать можно обычным свойством text-shadow. Хоть и css 3, но во всех браузерах давно уже работает.
Про сглаживание правильно говорят. Грамотный дизайнер всегда отключает какое-либо сглаживаение элементов, которые будут идти текстом на сайте. Не грамотный включает crisp и т.д. что и смутило тебя, как заказчика.
  • 0

#6 Sosnovskij

Sosnovskij
  • Администратор
  • 3 886 сообщений
  • Репутация: 566

Отправлено 19 Ноябрь 2011 - 20:58

Перенес тему в приемы верстки
  • 0

Не стесняйтесь ставить оценки темам :) Правила форума. Мой блог http://sosnovskij.ru/.




Оформление форума – IPBSkins.ru