Jump to content
  • 0

реально ли сверстать такой дизайн?


Satanael
 Share

Question

0dad65475182t.jpg

проблема у меня возникла в пространстве между верхом билборда и началом домов, там юзается градиент, при размножении получается кака :). Честно говоря уже стал сомневаться что данный диз можно вообще сверстать 1к1 чтобы он был резиновым.

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

Если биллборд имеет фиксированные размеры по ширине, то ничего сложного. Разрезаешь макет на три части. Верхняя, где лампы - прозрачный PNG, вторая часть кусок биллборда вида |——| , он будет повторяться фоном по вертикали. Ну и нижняя часть состоит из зеленого градиента, он повторяется по горизонтали и прозрачного PNG - нижняя часть биллборда.

Link to comment
Share on other sites

  • 0
Если биллборд имеет фиксированные размеры по ширине, то ничего сложного. Разрезаешь макет на три части. Верхняя, где лампы - прозрачный PNG, вторая часть кусок биллборда вида |——| , он будет повторяться фоном по вертикали. Ну и нижняя часть состоит из зеленого градиента, он повторяется по горизонтали и прозрачного PNG - нижняя часть биллборда.

А как быть с домами? чо они тоже повторяться будут? Да и проблема в небе над домами оно имеет градиент, будь он не ладен, + ко всему прочему часть где лампы будет сделана во флеше и там будет летать самолетик.

У меня получилась при верстке таблица 3*3 шапка кусок неба с частью билборда, лампы, другой кусок билборда.

средняя строка - фоном часть неба до домов и кусок билборда, и внизу ячейки дома. далее заливка ячейки фоном билборда и правая ячейка соответственно кусок неба и дома внизу.

ну и внизу соответственно кусок билборда, ножки и другой кусок билборда.

При масштабировании получаем лесенку в небе.

При этом тень на самом билборде тоже неоднородная и если растягивать по ширине с заливкой ячейки куском неба и билборда то тоже видна лесенка :)

Link to comment
Share on other sites

  • 0

Градиент лучше сделать отдельно, дома отдельно и накладывать их друг на друга. С домами обычно поступают так. Делают их или повторяющимися и выводят плиткой или фон делают широкий-преширокий, тогда он по краям обрезается.

Link to comment
Share on other sites

  • 0
Градиент лучше сделать отдельно, дома отдельно и накладывать их друг на друга. С домами обычно поступают так. Делают их или повторяющимися и выводят плиткой или фон делают широкий-преширокий, тогда он по краям обрезается.

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

Satanael - очень интересный у вас макет... Если дадите оригинальный *.psd шаблон - покажу, как бы я его верстал... Стучите в асю, если что: 440-872-646.

ща некоторый проблемы с нетом у нас, серверную затопило :) приходицо набегами тут бывать, а так как тока все нормализуется (думаю после обеда) вышлю.

Link to comment
Share on other sites

  • 0

А можно просто эту картинку сделать фоном, а сверху наложить то что надо, с помощью дива.

А вот зачем ему быть резиновым? ЭЭто же плакат? А если очень надо, то можно фрейм поместить в див, и он будет тянуться по вертикали.

Link to comment
Share on other sites

  • 0

не удержался ;)

http://anarion.info/temp/html-bigboard/

конечно же это лишь набросок. с внутренностями и минимумами извращается кто как может.

за именование классов тоже не бейте, мне было лень :D

ну и разумеется качество.. с исходной psd было бы красивее, пожалуй

Edited by Argus
Link to comment
Share on other sites

  • 0
ну вот, об этом я и говорил :D

только по вертикали нельзя тянуть! :D

ну, я бы сделал так, набросил ограничения по min-width / min-height, а внутри положил div, который бы был с overflow:auto, то бишь со скроллом когда надо.

правда учитывая размах (далаем то всё по максимуму), пришлось бы скриптами обрабатывать. благо jQuery могуч :D

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy