Magnific Popup: как закруглить углы в MFP плагине

Magnific Popup представляет собой качественный и быстрый скрипт для реализации модальных окон на сайте. Но в базовом варианте при релизации всплывающего окна изображения товара мы столкнулись с двумя проблемами:

  1. Если фото товара в PNG и имеет прозрачность — то ему нужна белая подложка;
  2. Если при создании у фото нет белых отступов — оно сливается с границами, что не очень то аккуратно выглядит;
  3. Сразу так и не поймешь как закруглить углы у рамки фото, а вель это всего одна строчка кода CSS.

Добавляем подложку, оступы, закругление углов для фото в Magnific Popup

  1. В файле magnific-popup.css находим строчку с классом .mfp-figure:after и добавляем свойство background#fff
  2. В этом же классе добавляем свойство margin-10px
  3. Там же добавляем свойство border-radius4px (ну или сколько вам нужно).

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

Демо Скачать тему css для Magnific Popup


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *