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

Описание: Программирование в HTML
Модератор: Aleksandr

LILUS M
Автор темы, Старшина
Старшина
Аватара
LILUS M
Автор темы, Старшина
Старшина
Сообщения: 136
Зарегистрирован: 2 мая 2013
С нами: 10 лет 10 месяцев

#1 LILUS » 31 января 2014, 18:38

Fri, 23 Aug 2013 18:02:38 +0400

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



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


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


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


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


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


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


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


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


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


HTML


{code class="brush: html; gutter: false;"}
<div id="expml1">
<img src="http://mattweb.ru/img/cat.jpg" />
<img src="http://mattweb.ru/img/mask.png" class="mask" />
</div>
{/code}

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


CSS


{code class="brush: css; gutter: false;"}
#expml1{
position: relative;
}

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

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


HTML


{code class="brush: html; gutter: false;"}
<div id="expml2">
<img src="http://mattweb.ru/img/mask.png" style="background: url('/img/cat.jpg') no-repeat;" />
</div>
{/code}

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


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


CSS


{code class="brush: css; gutter: false;"}
background:url(img/cat.jpg) no-repeat 50% 50%;
{/code}


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «HTML»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 4 гостя