| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Кроссбраузерно встановити округлені куточки у фотографій, розмір яких відомий і поставлено.
Рішення
Якщо на сайті застосовується група фотографій однакової ширини і висоти, то для них досить просто можна встановити округлені куточки. Принцип полягає в тому, що поверх кожної фотографії накладається малюнок, який ховає під собою частину фотографії, утворюючи тим самим бажані куточки.
Спочатку слід підготувати зображення з куточками. В графічному редакторі створюємо прозору основу і заливаємо куточки кольором, що збігається з кольором фону веб-сторінки. На рис. 1 показано зображення розміром 120х120 пікселів, назвемо його round.png. Шахове поле позначає прозорість, а куточки відзначені темним кольором.
Рис. 1. Зображення з куточками для накладення на фотографію
Далі створюємо шар, який додаємо два зображення — фотографію і картинку з куточками. Для управління положенням куточків тегу <img> слід додати унікальний клас або помістити його всередину контейнера <div>, як показано в прикладі 1. Позиціонування основного блоку повинно бути задано відносним (position: relative), а з внутрішнього куточками — абсолютним (position: absolute).
Приклад 1. Створення фотографії з куточками
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Округлені куточки</title>
<style>
.roundcorner {
position: relative; /* Відносне позиціонування */
float: left; /* Вирівнювання по лівому краю з обтіканням */
margin-right: 20px; /* Відступ праворуч */
}
.roundcorner div {
position: absolute; /* Абсолютне позиціонування */
top: 0; left: 0; /* Нульові координати */
}
</style>
</head>
<body>
<div class="roundcorner">
<img src="images/thumb1.jpg" alt="Малюнок 1" width="120" height="120">
<div><img src="images/round.png" alt="" width="120" height="120"></div>
</div>
<div class="roundcorner">
<img src="images/thumb2.jpg" alt="Фотографія 2" width="120" height="120">
<div><img src="images/round.png" alt="" width="120" height="120"></div>
</div>
</body>
</html>
Результат цього прикладу показано на рис. 2. Для білого фону веб-сторінки був підготовлений малюнок з білими куточками.
Рис. 2. Фотографії із закругленими куточками
Оскільки <div> відноситься до блочних елементів, то зображення всередині нього завжди буде починатися з нового рядка. Для розташування декількох зображень в один ряд у прикладі застосовується стильове властивість float зі значенням left. Тут треба врахувати, що варто додати після фотографій текст, як він теж буде займати місце праворуч від зображень, а не починатися з нового рядка. Тому для відміни дії float слід додати <div style="clear: left"></div> після останнього блоку з фотографією.
Другий спосіб імітації заокруглених куточків пов'язаний з накладенням фонового малюнка поверх фотографії. Для цього дещо модифікуємо приклад 1, залишивши порожній <div> замість картинки з куточками (приклад 2). В стилях шару слід вказати шлях до фонового малюнку через властивість background, а також встановити абсолютне позиціонування (position: absolute). Це зроблено, щоб визначити точне положення куточків щодо батьків (шару з ім'ям roundcorner), з цією метою додаються властивості left і top з нульовими значеннями. Також необхідно задати ширину і висоту блоку як 100%.
Приклад 2. Використання фонового малюнка
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Округлені куточки</title>
<style>
.roundcorner {
position: relative; /* Відносне позиціонування */
float: left; /* Вирівнювання по лівому краю з обтіканням */
margin-right: 20px; /* Відступ праворуч */
}
.roundcorner div {
background: url(images/round.png); /* Малюнок з куточками */
position: absolute; /* Абсолютне позиціонування */
left: 0; top: 0; /* Положення від лівого верхнього кута */
width: 100%; height: 100%; /* Розміри співпадають з фотографією */
}
</style>
</head>
<body>
<div class="roundcorner">
<img src="images/thumb1.jpg" alt="Фотографія 1">
<div></div>
</div>
<div class="roundcorner">
<img src="images/thumb2.jpg" alt="Фотографія 2">
<div></div>
</div>
</body>
</html>