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



 

Здравствуйте, гость ( Вход | Регистрация )

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


Старожил
******

Группа: Active User
Сообщений: 2023
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 587 раз
Репутация:   68  


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


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Geers
Geers
сообщение 1.11.2014, 12:43; Ответить: Geers
Сообщение #2


Старожил
******


Группа: Active User
Сообщений: 1231
Регистрация: 13.4.2011
Поблагодарили: 654 раза
Репутация:   95  


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


Старожил
******

Группа: Active User
Сообщений: 2023
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 587 раз
Репутация:   68  


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

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

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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
devuser
devuser
сообщение 1.11.2014, 13:11; Ответить: devuser
Сообщение #4


Все будет тип-топ
*****

Группа: Active User
Сообщений: 713
Регистрация: 5.12.2012
Из: Online
Поблагодарили: 342 раза
Репутация:   52  


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

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

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


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


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


Старожил
******

Группа: Active User
Сообщений: 2023
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 587 раз
Репутация:   68  


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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
artanik
artanik
сообщение 1.11.2014, 15:43; Ответить: artanik
Сообщение #6


Участник
***

Группа: User
Сообщений: 225
Регистрация: 3.5.2011
Из: Украина, Львов
Поблагодарили: 147 раз
Репутация:   47  


Можно сделать с помощью свойства "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


Старожил
******

Группа: Active User
Сообщений: 2023
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 587 раз
Репутация:   68  


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

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

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

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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Live_and_Die
Live_and_Die
сообщение 1.11.2014, 21:45; Ответить: Live_and_Die
Сообщение #8


† Thℜash Met∀l †
******


Группа: Active User
Сообщений: 1301
Регистрация: 21.9.2009
Из: ΜAℜŠ
Поблагодарили: 1037 раз
Репутация:   146  


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


Вроде норм. А может с бэкграунд позишион погираться ?


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
rjksdfhe
rjksdfhe
сообщение 1.11.2014, 21:52; Ответить: rjksdfhe
Сообщение #9


Straight arms
*******

Группа: Active User
Сообщений: 2760
Регистрация: 21.4.2009
Из: Мытищи, МО, РФ
Поблагодарили: 1111 раз
Репутация:   163  


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

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

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

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


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


Старожил
******

Группа: Active User
Сообщений: 2023
Регистрация: 21.9.2012
Из: СССР
Поблагодарили: 587 раз
Репутация:   68  


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

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

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

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

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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Вопрос к знатокам Instagram
20 SEOMR 4146 30.11.2017, 14:25
автор: DiscordPro
Открытая тема (нет новых ответов) Услуги по верстке
0 KOLIAN 332 29.11.2017, 15:31
автор: KOLIAN
Открытая тема (нет новых ответов) Вопрос про Телеграмм
18 syd2010 1118 28.11.2017, 14:25
автор: PostBrigada
Открытая тема (нет новых ответов) Вопрос по seo для интернет магазина
куда девать продвинутые товары, которые уже не выпускают
13 viktormerke 2342 25.11.2017, 20:06
автор: Mikki
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыАrticle manager вопрос
0 Smile3D 439 24.11.2017, 18:27
автор: Smile3D


 



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