• 0
advokatua

Border из кругов

Вопрос

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

907d942ed0.jpg

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

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

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


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

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

  • 0

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

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

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


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

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

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


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

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

 

 border-style: dotted;

border-radius

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

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

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

 

Вариант c 

background-image

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

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

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

 

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

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


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

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

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

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

 

Цитата

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

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


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

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

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


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

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

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

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

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

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

Войти

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

Войти сейчас

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

    • Автор: mejta
      Приписал  body{
      background-image: url(img/fon.png)
      }
       Сразу фон есть ,  а после обновления изчезает.
      И так с любой картинкой
      Подробней в скриншотах
       
    • Автор: WebNewbe
      Здравствуйте. Я занимаюсь версткой сайтов: лендингов, интернет-магазинов, флаеров и тп. Ищу работу, для набора опыта и заработка первых денег на данной позиции.

       Мое портфолио:
      https://alex2033.github.io/sites/BlackDone/index.html
      https://alex2033.github.io/sites/Sandeo/index.html
      https://alex2033.github.io/sites/Barbershop/index.html
      https://alex2033.github.io/sites/Skylith/index.html
      https://alex2033.github.io/sites/Unicorn/index.html
      https://alex2033.github.io/sites/Bouncy/index.html
      Остальные работы вы можете посмотреть здесь:
      https://alex2033.github.io/
      Навыки:
      - Знание HTML5, CSS3
      - Опыт адаптивной, семантической, кроссбраузерной верстки
      - CSS3 анимация
      - знания Javascript на уровне jQuery
      - Использование препроцессоров LESS/SASS/Stylus + Pug
      - Опыт работы в Adobe Photoshop, Illustrator, Zeplin, Avocode
      - Именование классов по методологии БЭМ-нейминг
      - Gulp, npm, bower
      - Умение работать с сетками (bootstrap 3+, foundation, flexboxgrid)
      - Умение работать с фреймворками bootstrap 3, 4, foundation
      - Знание английского на уровне чтения документации
      - Навык работы с векторной графикой SVG
      - Умение использовать flexbox, css-grid там где это необходимо
      Форма связи:
      Email - XoxlofAlexandr@yandex.ru - преимущественно
      Skype - Xronaliz
      Также можете написать на этом сайте
      Благодарю за внимание и хорошего дня:)
    • Автор: WebNewbe
      Здравствуйте. Я занимаюсь версткой сайтов: лендингов, интернет-магазинов, флаеров и тп. Ищу работу, для набора опыта и заработка первых денег на данной позиции.

       Мое портфолио:
      https://alex2033.github.io/sites/BlackDone/index.html
      https://alex2033.github.io/sites/Sandeo/index.html
      https://alex2033.github.io/sites/Barbershop/index.html
      https://alex2033.github.io/sites/Skylith/index.html
      https://alex2033.github.io/sites/Unicorn/index.html
      https://alex2033.github.io/sites/Bouncy/index.html
      Остальные работы вы можете посмотреть здесь:
      https://alex2033.github.io/
      Навыки:
      - Знание HTML5, CSS3
      - Опыт адаптивной, семантической, кроссбраузерной верстки
      - CSS3 анимация
      - знания Javascript на уровне jQuery
      - Использование препроцессоров LESS/SASS/Stylus + Pug
      - Опыт работы в Adobe Photoshop, Illustrator, Zeplin, Avocode
      - Именование классов по методологии БЭМ-нейминг
      - Gulp, npm, bower
      - Умение работать с сетками (bootstrap 3+, foundation, flexboxgrid)
      - Умение работать с фреймворками bootstrap 3, 4, foundation
      - Знание английского на уровне чтения документации
      - Навык работы с векторной графикой SVG
      - Умение использовать flexbox, css-grid там где это необходимо
      Форма связи:
      Email - XoxlofAlexandr@yandex.ru - преимущественно
      Skype - Xronaliz
      Также можете написать на этом сайте
      Благодарю за внимание и хорошего дня:)

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

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

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