Матвей Земсков

Заметки веб-мастера

Пятница, 23 августа 2013 18:02

Размещаем круглые изображения на веб-странице

Оцените материал
(2 голосов)

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

картинки круглой формы

1 способ. Обрабатывать каждое изображение в графическом редакторе перед размещением на сайте.

Этот способ неудобен, потому что занимает лишнее время.

2 способ. Использовать CSS для маскировки изображения.

Для использования этого способа сначала, нужно создать «изображение-маску» с прозрачной окружностью в центре. Подразумевается, что все картинки, на которые будет наложена «маска», имеют одинаковый размер. Размер маски должен быть таким же, как у изображений. Создаем маску в Adobe Photoshop или другом графическом редакторе.

Маска для изображений

Квадратиками показана прозрачная область. Сохраняем картинку-маску в формате PNG. При сохранении в поле “Matte” выбираем “white”.

Сохраняем изображение «маски»

Далее переходим к верстке. Создаем в текстовом редакторе, например, в Notepad++ html-страничку и вставляем в нее следующий код:

HTML

  <div id="expml1">
    <img src="/img/cat.jpg" />
    <img src="/img/mask.png" class="mask" />
  </div> 

Блок с id="expml1" – будет контейнером для изображений. Изображений будет 2 – собственно картинка и «маска». Изображение «маски» будет абсолютно позиционировано относительно контейнера, а картинка, которую нужно показать в круге не будет «выпадать» из нормального потока документа. В итоге получится, что абсолютно позиционированное изображение «маски» «накроет» основную картинку. Чтобы все это произошло нужно написать следующие CSS-правила:

CSS

   #expml1{
       position: relative;
   }
   
   #expml1 .mask{
       position: absolute;
       top:0;
       left:0;
   }

Есть еще один способ поместить изображение под «маской» с помощью CSS. Подход будет немного другой.

HTML

   <div id="expml2">
      <img src="/img/mask.png" style="background: url('/img/cat.jpg') no-repeat;"  />
   </div>

Здесь вообще все просто: размещаем на странице «картинку-маску», а основное изображение делаем ее фоном.

Может случиться так, что основное изображение будет немного крупнее, чем «картинка-маска», тогда, можно его центрировать.

CSS

   background:url(img/cat.jpg) no-repeat 50% 50%;

3 способ. Использовать правило CSS3 border-radius.

На данный момент самый правильный способ. Первые 2 можно считать устаревшими и использовать их только для отображения в браузерах, не поддерживающих border-radius.

Просто применим правило к рисунку. Рисунок должен быть квадратным. Можно оформить в виде класса.

HTML

   <div id="expml3">
      <img src="/img/image.jpg" class="rouned" />
   </div>

CSS

.rounded{border-radius:50%;}
Прочитано 5938 раз

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


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: