Макет от Softlink

[jon4eg]

Извините, но я не понимаю как верстать по картинке?

[art.u]

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

Тоже очень интересно. Как кто боролся с табами?

[nano2159]

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

[Softlink]

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

Я не очень понимаю, какая связь между вашим форумом, установкой, инструкцией и этим макетом.

[nano2159]

А на каком движке нужно создать форум что бы поставить туда этот макет ?

[Softlink]

А на каком движке нужно создать форум что бы поставить туда этот макет ?

Этот макет вообще никуда нельзя ставить. Он здесь выложен исключительно для тренировки и развития навыков верстальщиков.

[nano2159]

ок

[panas_dnepr]

а этот сайт в IE7 непонятно как выглядит...

так и должно быть?

[param]

Здравствуйте.

Подскажите пожалуйста как сверстать скроллбар справа? С помощью CSS, я нашёл правила только для ИЕ.

Или тут нужно использовать яваскрипт?

[lamour]

Всем добрый день!

У меня такой вопрос. Под хедером фон немного засветлен. Как это можно выполнить в верстке?

[Softlink]

Всем добрый день!

У меня такой вопрос. Под хедером фон немного засветлен. Как это можно выполнить в верстке?

В этом случае алгоритм такой:

Верстаете > не получилось сделать засветленный фон > пишете сюда или сюда > разбираемся > под хедером засветленный фон.

[FEL]

Собираюсь верстать свой первый макет, и хотелось бы начать именно с этого У меня вопрос: сколько времени заказчик дает на верстку этого макета? Просто хочется чтобы при верстке условия были ближе к реальным

[undeadlol1]

Господа, как реализовать слайдер с кадрами из фильма?

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

Ума не приложу что делать, уже третий день на этом топчусь.

Edited April 10, 2013 by undeadlol1

[GhostBZ`]

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

Вот здесь посмотри http://followdesign.com/development/2011/11/19/jquery-karuseli-rotatory-i-skrollery-chast-1.html - Там огромное количество представлено. Берешь и подгоняешь под дизайн! Вот и все!

[saiidr]

Привет. А,тема ещё актуальна ? Ну кто нибудь сверстал ? Просто если нет,то я могу ... А если да то смысла ре вижу .

[Zverushka]

Очень зубодробительный макет.

Подскажите, как вы сделали слои с кадрами из фильма изгибистыми и в то же время прозрачными? Там ведь границы или тени (неважно) и из-за прозрачности их будет видно при присоединении к друг другу...

Edited July 28, 2013 by Zverushka

[swandev]

Очень зубодробительный макет.

Подскажите, как вы сделали слои с кадрами из фильма изгибистыми и в то же время прозрачными? Там ведь границы или тени (неважно) и из-за прозрачности их будет видно при присоединении к друг другу...

Если смотреть на верстку автора (kinoruletka.ru) то видно, что кнопки (next, prev) сделаны полукругами со своим фоном и бордером, и наложены поверх слоя с кадрами.

[Zverushka]

@,

Речь шла скорее о заголовках, которые перетекают внизу в другое окно. В общем я просто сделала копию заднего фона и затемнила его и стала использовать как задний фон для этих окошек. Очень странно, но выглядит, будто линии непрерывны с задним фоном всей страницы и будто сверху всего лишь прозрачный слой.

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

Кстати в хроме на сайте многие элементы съезжают о_О. При ресайзе возникают двойные края хедера, левая кнопка при пролистывании у слайдера вообще куда-то пропадает.

Edited July 29, 2013 by Zverushka

[swandev]

Zverushka

Сижу и не могу понять чего вы хотите))

http://jsbin.com/ixuxiv/1/edit

Edited July 29, 2013 by ALEEX SWN

[Zverushka]

@, дак уже сделала. Слайдер прикручу и напишу, что думаю о макете)....

[Zverushka]

Сверстала http://vtest.uphero.com/ruletka/

Собираюсь верстать свой первый макет, и хотелось бы начать именно с этого

Как ему это удалось?

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

Сложности возникли сразу и много.

1) Вычленить повторяющийся фон из обширного фона. Искала инструмент в интернете, который бы позволил его вычленить. Найти не удалось. Пришлось лазить по пикселям с пипеткой в поисках повторения. До сих пор удивляюсь. как мне это удалось.

2) Сделать подсветку для всей страницы и соотвествующий слой для нее. Подсветка в самом фоне короткая, если вставить картинкой, то надо ее растягивать на 100%. Пробовала сделать градиентом - тяжело сделать именно такой же формы свет, что-то примерное получилось, но в том же хроме она имела резкие переходы, что выглядело некрасиво. В итоге я просто вставила картинку - зачем спрашивается столько времени потратила на градиент?

К тому же было очень сложно подобрать нужный градиент. Я так и не поняла до конца как я подобрала что-то похожее. Может кто подскажет ссылки на генерератор именно радиального градиента?

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

5) "Крутить рулетку" явно имеет другой шрифт и отличается по смыслу и оформлению - обернула в <mark> - верное ли решение? В фотошопе расстояние между буквами увеличено на 100%, но как добиться точного значения в css? 100% - не работае, 1em или 1ex - огромные неподходящие значения. Сработало только подобрать на глазок расстояние в пикселях. Можно ли было вписать точное значение без подбора на глазок?

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

7) То ли у меня со шрифтом проблемы, то ли что. Но не оценки фильма у выглядят по-другому. Цифра 6 не больше 0. В макете не вижу никаких фильтров к нулю. Не понимаю?

8) Лайки для вконтакте итп я сделала картинкой, так как насколько знаю это встраиваемый модуль.

9) Для создания блоков с кривыми границами пришлось убрать прозрачность и вставить новый более темный фон. иначе невозможно было сделать переход от одной части блока к другому.

[swandev]

1) Вычленить повторяющийся фон из обширного фона. Искала инструмент в интернете, который бы позволил его вычленить. Найти не удалось. Пришлось лазить по пикселям с пипеткой в поисках повторения. До сих пор удивляюсь. как мне это удалось.

1. на http://subtlepatterns.com/ есть готовые патерны, где на первых страницах есть тот который в макете.

9) Для создания блоков с кривыми границами пришлось убрать прозрачность и вставить новый более темный фон. иначе невозможно было сделать переход от одной части блока к другому.

Я же выше показал как сделать без картинок

Edited July 29, 2013 by ALEEX SWN

[Zverushka]

@, а как ты узнал, что он там есть?

[swandev]

@, а как ты узнал, что он там есть?

Просматривал и нашел)

[Kronus]

Решил попрактиковаться на макете, скоро выложу результат. Собственно, основная сложность действительно с тенями и фоном. Чтобы получалось как в макете, часто вместо обычного rgba с прозрачностью приходится вставлять фон картинкой.