Magnific Popup: как закруглить углы в MFP плагине | Веб студия СтартUP
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

Понравилось? Поделитесь с друзьями!

Комментарии

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

Еще статьи