Верстка макета "Кинорулетка"

advokatua · October 16, 2013

Наконец-то закончил, этот убойный макет. На первый взгляд многие могут и не понять в чем собственно проблема его сделать за пол дня, а не за 3 как я

А проблема в:

- контурах форм

- хитрожоповыпиленные тени (хотел бы я увидеть лицо того кто это нарисовал)

- изначально запиленный под 1050px, что означает - мы будем ломать голову и искать где красиво посжимать 1024.

- куча слоев с перекрытиями

- давно не подключал скрипты для картинок. В итоге день только на перебор скриптов потратил :facepalmxd:

- еще день потратил пока придумал как ушки у галереи прилепить. :facepalmxd:

Сделать все это без внутренней тени у блоков или просто нарезать блоки фиксированными - как два пальца об асфальт, другое дело почти все сверстать на css.

Сайт - http://webdevelop.zz...etka/index.html

CSS - http://webdevelop.zz.mu/ruletka/css/ (style.css объединенный)

Картинка макета - http://webdevelop.zz...letka/index.png

Все заняло под 800кб, можно и еще меньше, если совсем позадротствовать.

Без видео апплета все грузится довольно быстро, сам же апплет жрет в несколько раз больше времени, чем все остальное. :blink:

В ИE 9 вроде все нормально отображается, за исключением радиальной подсветки в центре.

За ИЕ8 и ниже можно не писать. )

Если кто подскажет серьезные косяки любого характера, тому большущий респект

Edited October 16, 2013 by advokatua

Николя223 · October 16, 2013

социализацию делай)

Edited October 16, 2013 by Николя223

Zverushka · October 16, 2013

Сразу не глядя, так как верстала этот макет, говорю - очень сильно выделяется подсветка заднего фона (радиальный градиент). По мейншей мере надо пограться с размерами и stop-color - добавить больше переходов, чтобы выглядело более плавно.

Я вначале ее тоже делала на css (времени кучу убила, пытаясь подогнать под макет), но дело в том, что в разных браузерах она выглядело сильно ступенчато, что бросалась в глаза, хотя в некоторых и нормально было. Поэтому я ее вставила картинкой.

УПД. Что-то с градиентом косым, какие-то полосы темные, вот у меня такого нет: http://zverushka.zz.mu/ruletka/

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

Если исходить из попиксельности - отступы у текстов не соблюдены - разница порядка 8 пикселей (посмотри плагином pixelPerfect для хрома)

Ширина блока крутить рулетку - совершенно не та - разница около 15 пикселей.

Иконки твиттера, вк идр - почему-то больше на 3 пикселя где-то и между ними отступы другие.

Блоки с описанием фильма шире на 20 пикселей где-то и отступ между ними маленький.

Высота линии шрифта основного 19 пикселей, должна быть 20.

Отступ между желтыми кнопками уже, чем надо.

Перед роли исполняли какая-то левая иконка - хм, откуда?

Блок кадры из фильма - имеет неверную высоту, как и его название. Отступы между картинками в нем неверные.

В Футере кинорулетка.ру меньшего размера шрифта, чем нужно.

П.С. Поздравляю с окончанием верстки этого чудовищного макета =).... Его надо на конкурс самых тяжелых макетов выставлять.

Edited October 16, 2013 by Zverushka

cyklop77 · October 16, 2013

я бы скрипты подключил в конце документа. это даёт небольшой выигрыш в скорости загрузки

тебе действительно нужно всё, что есть в reset.css?

вот так без единиц измерения строковый интервал можно указывать?

body {
	font: 100%/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
	background: url("../img/bg.png");
}

(я сам не знаю, если честно. потому и спрашиваю)

почему бы скобки не поставить, хотя бы целях единообразия?

background:  url(../img/bg-dark.png);

Edited October 16, 2013 by cyklop77

Catherine · October 16, 2013

У меня вопрос по скриптам:


$(".bxSlider li a").fancybox();

$(".bxSlider li a").fancybox({
   'hideOnContentClick': true
});


$(".role ul li a").fancybox();

$(".role ul li a").fancybox({
   'hideOnContentClick': true
});

$(".role ul li a").fancybox({
   'transitionIn' : 'fade',
   'transitionOut' : 'fade',
   'speedIn' : 300,
   'speedOut' : 100,
   'overlayShow' : false,
   'changeSpeed' : 0
});

так и надо, или забыли объединить?

advokatua · October 16, 2013

Скажи пожалуйста какой у тебя монитор. Потому что половину замечаний у меня не видно.

Сразу не глядя, так как верстала этот макет, говорю - очень сильно выделяется подсветка заднего фона (радиальный градиент). По мейншей мере надо пограться с размерами и stop-color - добавить больше переходов, чтобы выглядело более плавно.

1) Не согласен. Я знаю, что на разных дюймах этот градиент будет не слабо отличаться, потому я не парился на этот счет, а подгонял конкретно под свои 15.6дюймов 1366х768 100% масштаб в хроме. Взял колорпикер и сравнил 6 контрольных точек, в некоторых местах вообще число в число совпадает с фотошопом. Как там выглядит на 24 дюйма или 27 меня мало сейчас волнует т.к. основная задача была другая.

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

2) Они прозрачные, аж вот так: border: 1px solid rgba(255, 255, 255, .12);

Если исходить из попиксельности - отступы у текстов не соблюдены - разница порядка 8 пикселей

3) Да. Это я вчера парился с высотой строк и обратно не вернул параметр.

Парился, потому что если текст будет в две строки, то выглядеть это начинает не очень хорошо. В

Ширина блока крутить рулетку - совершенно не та - разница около 15 пикселей.]

4) Либо я не то мерял, либо опять что-то из-за разных мониторов.

Доказательства:

Иконки твиттера, вк идр - почему-то больше на 3 пикселя где-то и между ними отступы другие.

5) Это ерунда )

Высота линии шрифта основного 19 пикселей, должна быть 20.

6) У меня фотошоп 19 намерял )

Отступ между желтыми кнопками уже, чем надо.

7) Очевидно потому что изначальный макет 1050пикселей, а стал 1024

Больший марджин даст меньшие кнопки и меньший текст на них, который очень плохо будет виден

Перед роли исполняли какая-то левая иконка - хм, откуда?

8) Это ты прохалявила, в фотошопе она есть. Даже если на нее забили в конце, я все равно решил вставить, шоб було.

Блок кадры из фильма - имеет неверную высоту, как и его название. Отступы между картинками в нем неверные.

9) Умышленно. Там надо было сразу 4 позиции высчитывать, только чтобы один марджин поставить на 5 пикселей больше. Поленился.

Уже нашел, насчитал как надо

В Футере кинорулетка.ру меньшего размера шрифта, чем нужно.

10) 16 пикселей в данном случае очень по-конски выглядит, да и готик санс не самый удачный шрифт, впринципе как и в остальных местах.

Увеличил, ну явно выглядит по-конски ). ИМХО

У меня вопрос по скриптам:

Так и надо.

Там одна пара строчек для галлереи, а другая для ссылок, когда по именам актеров клацаешь.

Edited October 16, 2013 by advokatua

Catherine · October 16, 2013

Если не требуется поддержка ИЕ7, то блоки .spoiler и .about-film я бы верстала, используя display: table-cell Это более гибкое решение, чем выравнивание блоков через задание фиксированной высоты.

advokatua · October 16, 2013

я бы скрипты подключил в конце документа. это даёт небольшой выигрыш в скорости загрузки
тебе действительно нужно всё, что есть в reset.css?
вот так без единиц измерения строковый интервал можно указывать?
body {
	font: 100%/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
	background: url("../img/bg.png");
}
(я сам не знаю, если честно. потому и спрашиваю)
почему бы скобки не поставить, хотя бы целях единообразия?
background: url(../img/bg-dark.png); 

1) Скрипты в конец документа пытался подключить, но что-то они не заработали, с этой темой я еще не полностью разобрался, но в курсе.

2) Насчет шрифта и высоты строки - как по мне можно. Без единиц измерения это просто кратность размера. Но я не уверен на 100500%, что так делать абсолютно правильно. Лишь где-то на 85-90%. )

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

Zverushka · October 16, 2013

Не согласен. Я знаю, что на разных дюймах этот градиент будет не слабо отличаться

Вот так выглядит на моем мониторе - очень большая разница.

Они прозрачные, аж вот так: border: 1px solid rgba(255, 255, 255, .12);

Значит надо еще меньше, 0.09 например

Либо я не то мерял, либо опять что-то из-за разных мониторов.

Смотри размер у тебя 400 пикселей, а паддинги по 10 - то есть ширина уже 420 выходит.@advokatua,

6) У меня фотошоп 19 намерял )

Edited October 16, 2013 by Zverushka

advokatua · October 16, 2013

Теперь понял. Картинкой эту подсветку убийственно вставлять, она ведь 800кб весит. )

Кстати твой макет у меня валится в последнем хроме, в фаере нормально.

Даже бордеры под именами и описанием фильма какие-то странные.

Шрифт там еще с засечками должен быть. Одна половина что-то типа Готик, а другая Джорджия.

ЗЫ Шрифт в фаере неверно отображается, в хроме(скрин) норма.

Поставил весь фон одной картинкой. Жмотно как-то 230кб на один фон сливать, однако. Зато этот радиальный радиал не надо настраивать часами )

Edited October 16, 2013 by advokatua

Zverushka · October 16, 2013

она ведь 800кб весит. )

Да ладно) убийственно это было 10 лет назад. Сейчас я за час 2 гигабита скачиваю, что мне 800кб? У меня кстати 300кб вышло.

Хм, странно, что у тебя в хроме сползает, у меня последняя версия и все ок. У тебя случаем не макс ос?

А где шрифт не тот? В описании актеров - один готик, другой джорджий вроде стоит.

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

Да и то, что я буттоны в форму засунула )))), смешно, да... Я так начинала верстать.

Edited October 16, 2013 by Zverushka

advokatua · October 16, 2013

Win7 x64 ultimate

Да ладно) убийственно это было 10 лет назад. Сейчас я за час 2 гигабита скачиваю, что мне 800кб?

Ты это скажи тем кто с айпеда по ВиФи сайты смотрит сидя в кафе, где скорость 1Мбит на 20чел. ) Да и хватает на планете Земля мест где инет до сих пор оооочень хреновый, например Тай, и там очень много русских.

Теперь и в фаере поехало, зато границы нормальные.

Изначальная причина почему я решил потрахаться с этим макетом это были эти ухи у галереи, табы, и куча перекрытий.

Но, потом, я увидел эту внутреннюю тень в формах и понял, что это что-то совсем из разряда оргий. Вы кстати в той теме абсолютно все прохалявили. Сделали вид, будто ее нет. :rolleyes:

Ты кстати одна походу заметила (пол часа назад прочитал):

6) все блоки имеют обычную полупрозрачную границу и еще вторую границу (темную) внутреннюю сверху. Этот эффект невозможно сделать тенью. Пришлось опять использовать groove.

Если бы не эта тень, особенно в ушках, оргии бы по сути и не было

Edited October 16, 2013 by advokatua

SelenIT · October 16, 2013

вот так без единиц измерения строковый интервал можно указывать?

Можно и, имхо, даже лучше. Так она при любых наследованиях будет пропорциональна текущему font-size'у, а в em-ах — font-size'у предка. Сам всегда только так и задаю.

все блоки имеют обычную полупрозрачную границу и еще вторую границу (темную) внутреннюю сверху. Этот эффект невозможно сделать тенью.

Почему невозможно?

Zverushka · October 16, 2013

6) все блоки имеют обычную полупрозрачную границу и еще вторую границу (темную) внутреннюю сверху. Этот эффект невозможно сделать тенью. Пришлось опять использовать groove.

Честно говоря уже не помню почему. Помню, что порядка 3-4х способов перебирала в верстке и outline, и бордеры и еще что-то... Потом оказывалось, что из-за следующего за ним элемента, предыдущий нельзя реализовывать.

Вы кстати в той теме абсолютно все прохалявили. Сделали вид, будто ее нет.

ммм что именно?)...

advokatua · October 16, 2013

все блоки имеют обычную полупрозрачную границу и еще вторую границу (темную) внутреннюю сверху. Этот эффект невозможно сделать тенью.
Почему невозможно?

Наверное поэтому http://jsbin.com/ixuxiv/5/

А если еще ухи слайдера добавить, то вообще "красота" будет )

ммм что именно?)...

Внутреннюю тень. Максимально увеличь мой сайт и приглядись к ухам, табу и форме.

И заодно загляни в свойства форм в фотошопе.

В увеличенном виде

Edited October 16, 2013 by advokatua

SelenIT · October 16, 2013

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

Zverushka · October 17, 2013

все блоки имеют обычную полупрозрачную границу и еще вторую границу (темную) внутреннюю сверху. Этот эффект невозможно сделать тенью.
Почему невозможно?
Наверное поэтому http://jsbin.com/ixuxiv/5/
А если еще ухи слайдера добавить, то вообще "красота" будет )
ммм что именно?)...
Внутреннюю тень. Максимально увеличь мой сайт и приглядись к ухам, табу и форме.
И заодно загляни в свойства форм в фотошопе.
В увеличенном виде

Я пыталась ее сэмулировать тогда через border-style: ridge 2px ширины, в мозилле неплохо выглядело, а вот в других поехало)...

Кстати твоя вставленная картинка теперь обрезается на широких экранах), что тоже выглядит некрасиво).

Edited October 17, 2013 by Zverushka

advokatua · October 17, 2013

SelenIt, Один табик добавить ок, а вот ушко, как на картинке выше?

И стоит ли игра свечь, по-твоему?

У меня таб вообще без пустых элементов прошел.


<div class="head-gallery"> /*Наш таб*/
	 <h2>Кадры из фильма</h2>
	 </div>
	 <div class="gallery">
<div class="hears"> </div> /*Доп. блок для ушей галереи*/
<div class="slide-wrap">

Ухи тоже пытался без блока сделать, но в итоге голова распухла и я забил на этот опыт.

Zverushka, я заметил )

Кстати твоя вставленная картинка теперь обрезается на широких экранах), что тоже выглядит некрасиво).

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

Сейчас прочитал пару статей, про то как должна строиться работа между верстальщиком и дизайнером и дико удивился тому, как мысли у профи, которые набивали шишки годами опыта совпали с мыслями недельного новичка как я )) Буквально больше половины пунктов за свои 60 постов уже успел тут упомянуть.

http://ilovepsd.ru/# - маст рид каждым дизайнером рисующим макеты для веба. Они должны ее перед каждым сном как молитву наизусть читать!

http://habrahabr.ru/post/173271/

http://habrahabr.ru/post/197588/

Особенно понравились пункты про: сетку, дробные числа ака 19.653px, кнопки и ссылки у которых не указан ховер или эффект при нажатии. Это же как надо не любить свою работу...

Edited October 17, 2013 by advokatua

SelenIT · October 17, 2013

И стоит ли игра свечь, по-твоему?

Для продакшн-решения — вряд ли. Для саморазвития, чтоб научиться «еще и так» — имхо, вполне

Кстати, выше я действительно что-то намудрил, можно намного проще. С «ушами», имхо, можно использовать тот же принцип — по паре псевдиков (верхняя и нижняя половины бордера с тенью) на каждое «ухо». Высота слайдера ведь, к счастью, фиксированная...

advokatua · October 17, 2013

Теперь конечно гуд, но что если добавить перца - http://jsbin.com/ixuxiv/13/

Короткого решения даже для непрозрачного фона пока не придумал. (если таковое вообще существует)

Решения на основе огорода after/before и доп. элементов само собой задачу выполнят. Только вот время траха не будет стоить потраченных усилий, по идее.

upd. испортил исходник #выше

Итог http://jsbin.com/ixuxiv/19/

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

Edited October 17, 2013 by advokatua

Zverushka · October 17, 2013

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

На моем экране (лень вставлять картинку) теперь подсветка выглядит квадратом. Растянуть ее надо...

Kronus · October 17, 2013

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

И я один что ли делал боковой дизайнерский скролл?

Edited October 17, 2013 by Kronus

Zverushka · October 17, 2013

И я один что ли делал боковой дизайнерский скролл?

Видимо). Интересно, как это делается?

Kronus · October 17, 2013

Видимо). Интересно, как это делается?

http://www.xiper.net/collect/js-plugins/ui/jscrollpane2.html хотя может и лучше что есть, просто первое, что тогда нагуглил. Но у него большие проблемы с горизонтальным скроллом.

Zverushka · October 17, 2013

Видимо это нелегко, недавно настраивала выпадающий селект через скрипт - так замучалась, пока разобралась что и где ...

Sign In

Верстка макета "Кинорулетка"

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information