• 0
advokatua

Border из кругов

Вопрос

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

907d942ed0.jpg

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

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

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


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

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

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

  • 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 пикселей получается, я думаю это мало где подойдет

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


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

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

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

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

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

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

Войти

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

Войти сейчас


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

    • Автор: Андрей39
      Всем привет!
      Подскажите пожалуйста новичку, что за иконки на этом сайте. Пытаюсь скопировать её через исходный код, но выдает вот такой фрагмент кода:
      .fa-search:before { content: "\f002"; } Скриншот картинки, прикрепил. Буду рад, если Вы мне поможете. Спасибо!


    • Автор: Odinokiy_volk
      Сайт https://knyaz85.github.io/
      Сайт тестовый, для критики.. Идея - аналог страницы в соцсети в основном для размещения медиа-контента и документов
      Прошу оценить всё в целом - дизайн, верстку, код, юзабилити, общее впечатление и др.
      Примечания. Сайт делался под гугл хром, в мозилле другой медиаплеер и почему то по другому выглядит тень от белого фона - получается не очень красиво.. В эксплоурере вообще черт знает что получилось, прошу также хотя бы в общих чертах просвятить как адаптировать сайт к интернет эксплоурер..
      Медиа загружается через гугл очень долго, через мозиллу почему то быстрее.. Если кто знает почему, так же прошу просвятить)
    • Автор: Mixfixpix
      Всем привет, форумчане!
      Есть задача сделать вот такую штуку как на картинке, она должна быть 100% шириной по отношению к контенту, но ограниченной высотой, к примеру 60 пикселей.
      У меня уже есть решение которое я сделал https://jsfiddle.net/x5Lavn55/, но может имеется более элегантное и лучше чем мое?
      Пробовал с svg, но не могу растянуть на 100% не изменив высоту...