Разделы

Скругленные уголки у фотографии фиксированного размера

Метки:

уголки

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

Вначале следует подготовить изображение с уголками. В графическом редакторе создаем прозрачную основу и заливаем уголки цветом, совпадающим с цветом фона веб-страницы. На рис. 1 показано изображение размером 120х120 пикселов, назовем его round.png. Шахматное поле обозначает прозрачность, а уголки отмечены темным цветом.

Рис. 1

Рис. 1. Изображение с уголками для наложения на фотографию

Далее создаем слой, в который добавляем два изображения — фотографию и картинку с уголками. Для управления положением уголков тегу <IMG> следует добавить уникальный класс или поместить его внутрь контейнера <DIV>, как показано в примере 1. Позиционирование основного блока должно быть задано относительным (position: relative), а внутреннего с уголками — абсолютным (position: absolute).

Пример 1. Создание фотографии с уголками

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Скругленные уголки</title>
  <style type="text/css">
   .roundcorner {
    position: relative; /* Относительное позиционирование */
    float: left; /* Выравнивание по левому краю с обтеканием */
    margin-right: 20px; /* Отступ справа */
   }
   .roundcorner  div {
    position: absolute; /* Абсолютное позиционирование */
    top: 0;
    left: 0; /* Нулевые координаты */
   }
  </style>
 </head>
 <body>
  <div class="roundcorner">
    <img src="thumb1.jpg" alt="Фотография 1" width="120" height="120">
    <div><img src="round.png" alt="" width="120" height="120"></div>
  </div>
  <div class="roundcorner">
    <img src="thumb2.jpg" alt="Фотография 2" width="120" height="120">
    <div><img src="round.png" alt="" width="120" height="120"></div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2. Для белого фона веб-страницы был подготовлен рисунок с белыми уголками.

Рис. 2

Рис. 2. Фотографии со скругленными уголками

Поскольку <DIV> относится к блочным элементам, то изображение внутри него всегда будет начинаться с новой строки. Для расположения нескольких изображений в один ряд в примере применяется стилевой атрибут float со значением left. Здесь надо учесть, что стоит добавить после фотографий текст, как он тоже будет занимать место справа от изображений, а не начинаться с новой строки. Поэтому для отмены действия float следует добавить <div style="clear: left"></div> после последнего блока с фотографией.

Олег, 17.09.2008

Можно упростить <br>
<style><br>
.roundcorner div {<br>
position: absolute; /* Абсолютное позиционирование */<br>
top: 0; left: 0; /* Нулевые координаты */<br>
background:url(round.png) top left no-repeat;<br>
}/* прописываем рамку один раз, для внутреннего дивизора */<br>
</style><br>
-----------------------------------------------<br>
<div class="roundcorner"><br>
<img src="thumb1.jpg" alt="Фотография 1" width="120" height="120"><br>
<div>&nbsp;</div><br>
</div><br>

Ronef, 21.09.2008

Следует учесть, что браузер IE, ниже 7 версии не поддерживает прозрачность png. Его конечно можно научить при помощи Filter, но это уже отдельная тема...

Антон, 02.05.2009

Лучше сразу эти уголки подрисовать к фотографиям.

Разделы

Термины

Скругленные уголки у фотографии фиксированного размера

Отправить комментарий