Jump to content
  • 0

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


мастер алекс
 Share

Question

7957890.jpg

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

На данном этапе изучения начал писать код: https://jsfiddle.net/sh642v1b/

 

Хотел спросить совета: как реализуется это дерево из белых линий между блоками.

Видел примеры с подложенным изображением, но делаю страничку которая будет меняться при изменении размера окна и как понял фон может не попадать на блоки.

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Попробуйте тут посмотреть.

А по линии вот тут, второй рисунок и пример.

Для написания стиля выделенного пункта вместо .pager .active {...}, задайте стиль для .pager li:hover {...}

Это всё, в первом приближении, конечно, нужно разбираться...

Edited by Launder
Link to comment
Share on other sites

  • 0

Прикинул примерное размещение блоков.

7951812.jpg

У блоков (div-a, div-b, div-c) сделаю хвостики в нужных местах(линии). Поскольку они будут привязаны к самим блокам, и когда блоки будут изменять размер, подстраиваясь под разрешение, то думаю линии останутся на тех местах на которых нужно. А центральную-вертикальную линию, думаю проще, сделать частью фона ровно в центре по границе левой и правой части контента. 

 

Пробовал понять как в родном шаблоне это реализовано ( http://html5up.net/overflow ), пока не осилил.

Edited by мастер алекс
Link to comment
Share on other sites

  • 0

Каждому изображению с помощью :after, добавьте абсолютом белую полосочку справа, а каждому четвёртому элементу удалите эту полоску с помощью nth-child. И всё :)

А, в вашем случае походу надо будет удалять ласт чайлду. Ну короче задумка такая, а там уже применяйте по ситуации.

Edited by Alarr
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