X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Вопрос по верстке
mmkulikov
mmkulikov
Topic Starter сообщение 1.11.2014, 12:33; Ответить: mmkulikov
Сообщение #1


Вопрос к знатокам.
Есть вот такой макет "хлебных крошек" https://yadi.sk/d/yRePx9m0cRTsS
И так и этак кручу и ничего толкового в голову не лезет как ЭТО сверстать с использованием только CSS
Главный "проблемный" момент - это наличие "бесшовного" неоднородного фона, т.е. из лево+центр+право
"склеить" не удастся (не сойдется фон)
Кто может "подкинуть" какую идею?


--------------------
Сдается, обращаться скайп avdesk-it-kmm
VPS от 5€
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Geers
Geers
сообщение 1.11.2014, 12:43; Ответить: Geers
Сообщение #2


http://beloweb.ru/novichkam/besplatnyie-ge...hih-saytov.html
Всё с помощью css.

А имнно этот сайт: http://www.stripegenerator.com/

Сообщение отредактировал Geers - 1.11.2014, 12:46
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mmkulikov
mmkulikov
Topic Starter сообщение 1.11.2014, 12:47; Ответить: mmkulikov
Сообщение #3


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

Вот пример "правильной" реализации того что надо http://pcvector.net/uploads/demo/scripts/m...css3/index.html
Но в данном примере фон однородный, а в моем в виде "бесшовной" картинки

Сообщение отредактировал mmkulikov - 1.11.2014, 12:50


--------------------
Сдается, обращаться скайп avdesk-it-kmm
VPS от 5€
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
devuser
devuser
сообщение 1.11.2014, 13:11; Ответить: devuser
Сообщение #4


В выходной (настроение не рабочее) навскидку приходит только вариант - левый край, центр, правый край. А центр "дотягивать" по ширине до кратности яваскриптом. Например, если ширина паттерна 20 пикселей, то средний слой шириной 80-100-120 и так далее.

Но это костыль ))

Сообщение отредактировал devuser - 1.11.2014, 13:11


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mmkulikov
mmkulikov
Topic Starter сообщение 1.11.2014, 13:21; Ответить: mmkulikov
Сообщение #5


devuser, Поставил Вам "спасибо", но тут сама цель - обойтись CSS. Да и "паттерн" предоставленный дизайнером довольно крупный (любят художники градиенты :facepalm: )


--------------------
Сдается, обращаться скайп avdesk-it-kmm
VPS от 5€
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
artanik
artanik
сообщение 1.11.2014, 15:43; Ответить: artanik
Сообщение #6


Можно сделать с помощью свойства "clip-path". Поддержка средняя(65.19% всех браузеров), так как все IE дружно игнорируют это свойство. Для работы используется svg маска. Уже использовал подобную технику на одном из клиентских сайтов.
Вот сделал прототип http://jsbin.com/budos, но работать будет только в webkit. Для firefox нужно писать svg и использовать скрипты. А про IE просто забыть. Зато на чистом CSS ;)

Сообщение отредактировал artanik - 1.11.2014, 15:48


--------------------
Мой промо-сайт

Нужна качественная вёрстка сайтов? Обращайтесь: ICQ 555-177-362 


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mmkulikov
mmkulikov
Topic Starter сообщение 1.11.2014, 16:27; Ответить: mmkulikov
Сообщение #7


Цитата(artanik @ 1.11.2014, 13:43) *
Можно сделать с помощью свойства "clip-path"

Решение конечно дающее именно нужный результат, но не могу ограничиться webkit.
Сделал пока так http://jsfiddle.net/wfc9cg98/ не идеально, но на 99% соответствует

P.S.
Идеи по улучшению решения приветствуются B)

Сообщение отредактировал mmkulikov - 1.11.2014, 16:33


--------------------
Сдается, обращаться скайп avdesk-it-kmm
VPS от 5€
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Live_and_Die
Live_and_Die
сообщение 1.11.2014, 21:45; Ответить: Live_and_Die
Сообщение #8


Цитата(mmkulikov @ 1.11.2014, 16:27) *
Сделал пока так http://jsfiddle.net/wfc9cg98/ не идеально, но на 99% соответствует


Вроде норм. А может с бэкграунд позишион погираться ?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
rjksdfhe
rjksdfhe
сообщение 1.11.2014, 21:52; Ответить: rjksdfhe
Сообщение #9


mmkulikov, на будущее простой совет - выкладывайте вёрстку "в живую" на каком-то временном адресе (временном домене 3-го уровня).
Не картинкой, а HTML+CSS. Это важно!

Так Вам помогут решить проблему на порядок быстрее и эффективне, т.к. в том же Chrome есть возможность динамически изменять стили, и сразу видеть то, как это будет работать.

В вашем случае (картинки) - всё предполагается вслепую.

Сообщение отредактировал rjksdfhe - 1.11.2014, 21:55


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
mmkulikov
mmkulikov
Topic Starter сообщение 2.11.2014, 0:12; Ответить: mmkulikov
Сообщение #10


Цитата(Live_and_Die @ 1.11.2014, 19:45) *
А может с бэкграунд позишион погираться ?

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

Цитата(rjksdfhe @ 1.11.2014, 19:52) *
на будущее простой совет - выкладывайте вёрстку "в живую"

На момент создания топика никакой верстки не существовало в принципе, а затем (сообщение №7) я выложил то, что получилось "наверстать" "вживую"

Сообщение отредактировал mmkulikov - 2.11.2014, 0:10


--------------------
Сдается, обращаться скайп avdesk-it-kmm
VPS от 5€
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Вопрос - платное размещение баннеров на сайте
10 WGN 3126 14.12.2020, 14:20
автор: Peterson
Открытая тема (нет новых ответов) Вопрос по рекламе в "инстаграме"
Только активные аккаунты могут создавать или редактировать рекламу
8 Zubkov 16020 17.1.2020, 17:49
автор: Forumacc
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВопрос-ответ о работе форума
307 dos1k 43056 9.11.2019, 17:59
автор: heks
Открытая тема (нет новых ответов) Жена логопед, собрался ей приводить клиентов. Встал вопрос, куда приводить.
В теме перечисление доступного мне продвижения, но с чего начать?
9 memeplex 3689 16.2.2019, 15:45
автор: zyzy
Открытая тема (нет новых ответов) Услуги по верстке и натяжки на вордпресс
Верстка(сайты,e-mail письма),натяжка на ворпдресс,
3 unbur 3431 20.12.2018, 10:44
автор: unbur


 



RSS Текстовая версия Сейчас: 28.3.2024, 21:13
Дизайн