• 0
advokatua

Border из кругов

    Вопрос

    advokatua

    Есть в макете вот такой border из кружков с закругленными углами 

    907d942ed0.jpg

    соответственно нужны идеи как по-умному его можно сверстать. Желательно конечно чтобы граница имела возможность растягиваться по высоте или ширине, ибо в противном случае все сводится к банальному background-image, очевидно.

    Пробовал маски и svg, но все как-то не очень удачно.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    10 ответов на этот вопрос

    Рекомендуемые сообщения

    • 0
    klierik

    Из этой серии я, как правило, пользуюсь — https://jsfiddle.net/klierik/vbctmxe0/2/

    Но учитывая что требуется пустить по кругу круглые точки, то background-image вполне подходит под данную задачу (для этого и создавался)

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    advokatua

    Сперва так и сделал (через dotted), сказали - нифига не знаем, делай как на макете ) Да и dotted само собой это совершенно не то в данном случае. Благо у меня в этот блок мало текста надо помещать и все решается через background-image. Если представить, что такой блок необходимо будет растягивать по высоте или ширине, что тогда делать... На JS какую-то функцию по рисованию кружочков что ли писать... 

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Igor Schnaider

    Можно с SVG так поэкспериментировать.

    Решение уродское, конечно )).

    • Like 2

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Q4Dizzy

    Внесу свою мнение. В общем, как писал выше klierik, можно сделать обычным

     

     border-style: dotted;

    border-radius

    При чём не так давно даже наш старенький (не) любимый firefox нормально отображает углы, как надо. Застал это обновление и был слегка удивлён, что наконец-то он правильно показывает результат скругления стилей границ кроме solid.

    И лично моё мнение - это нормальный вариант..

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

     

    Вариант c 

    background-image

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

    Я лично считаю, что клиентам надо пояснять, что есть такие-то пути, но будут такие то проблемы или моменты.. 

    Вёрстка не чародейство, лишь магия с тем, что есть.

     

    P.S Мне лично нравится больше вариант css с границами, чем фоновое изображение.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    advokatua
    8 часов назад, Igor Schnaider сказал:

    Можно с SVG так поэкспериментировать.

    Решение уродское, конечно )).

    Очень даже ок ) Я как-то так себе это и представлял. Уродское не уродское это уже другой вопрос.

     

    Цитата

    Я лично считаю, что клиентам надо пояснять, что есть такие-то пути, но будут такие то проблемы или моменты.. 

    Клиенту в 100% случаев нужен результат, а не геморой на голову о том что где-то там нельзя реализовать элементарный бордер из кружочков. Это макеты за 30-40у.е. Никто вам за лишний час объяснений доплачивать не станет. Поэтому в такой позиции проще сразу сделать пусть даже через костыль, но сделать, нежели сначала объяснять, а потом еще сутки (а то и несколько) ждать окончательного решения.

    Речь идет о макетах, где надо все бистро-бистро и дешево, и часто вообще без какого-либо ТЗ.

    Изменено пользователем advokatua

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Николя223
    9 часов назад, Q4Dizzy сказал:

    можно сделать обычным

    он к тому что в dotted нельзя регулировать расстояние между точками

    не понимаю почему такой пустяк в css с самого  начала не реализован

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Q4Dizzy
    В 06.05.2017 в 03:03, Николя223 сказал:

    не понимаю почему такой пустяк в css с самого  начала не реализован

    Вот какой важный пустяк не реализован, так это вертикальное выравнивание!! И я не о vertical-align. В курсе про flex, но пока что обхожусь без его возможностей. И то, пустяком как-то и не назовёшь.

    P.S. Не по теме конечно, но захотелось высказаться.

    Изменено пользователем Q4Dizzy

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Hasiev

    border-image

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    AlexZaw

    border-image конечно хорошо, но при таком радиусе углов это бордер в 50 пикселей получается, я думаю это мало где подойдет

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Q4Dizzy

    Да тема давно закрыта.  :)

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    Создайте аккаунт или войдите в него для комментирования

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас

    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google

    • Похожие публикации

      • incub
        Автор: incub
        Как блок с классом .caption сделать так, что бы он не заезжал за img? Когда ставишь relative он не заезжает, а мне надо с absolute
      • MatCauThon
        Автор: MatCauThon
        Здравствуйте, буду признателен, если сможете помочь решить проблему с сайтом. Проблема заключается в том, что на сайте существует кнопка "Получить консультацию" которая вызывает всплывающее окно с формой. Однако при создании такого же окна при клике на изображение(пока есть только при клике на левое верхнее) окно не появляется, а встраивается в готовый блок сайта. Можете подсказать как решить эту проблему?(По поводу оформления и изображения знаю, меня интересуют только окна)

        Ссылка на архив с сайтом https://github.com/Mat-CauThon/-
      • Crushing
        Автор: Crushing
        Сама верстка: https://uzinouzi.github.io/Polind/
        Буду благодарен за указание на недочеты.

    Карта разработчиков

    Карта участников

    Отметь себя на карте для поиска или предложения работы