Круглі зображення на сайті, створення, налагодження та просування сайтів

Для розуміння цієї статті, я рекомендую Вам прочитати минулий пост, який допоможе краще орієнтуватися в темі.

Ще хотілося б уточнити: Чому саме зображення? Насправді не тільки зображення можна зробити круглими, але і будь-які інші елементи. Просто ми розберемо цю можливість саме на зображеннях, так як подібні можливості застосовуються частіше до різних картинок на сайті.

Круглі зображення, використовуючи CSS.

Властивості прописуємо за допомогою атрибута style. але це тільки для прикладу. Правильніше використовувати окремий файл у форматі CSS.

Як я вже згадав вище, щоб зробити картинку круглої ми будемо використовувати ту ж властивість, що і при заокругленні кутів елементів: border-radius. Тільки в цей раз ми вкажемо значення у відсотках, так як це найпростіший спосіб зробити зображення будь-якого розміру круглим, ну або інший елемент, наприклад DIV.

Додамо властивість border-radius. значення якого дорівнює 50 відсоткам від ширини або висоти елемента:

Ну і звичайно не забуваємо про префіксах, які можуть дозволити змусити працювати деякі більш старі версії веб-браузерів.

Chrome до версії 4.0, Safari до версії 5.0, iOS використовують нестандартне властивість -webkit-border-bottom-left-radius.

Firefox до версії 4.0 використовує нестандартне властивість -moz-border-radius-bottomleft.

Круглі зображення у всіх браузерах.

Тут є два варіанти:

Другий: Другий варіант також не завжди застосуємо через особливості дизайну сайту, однак цей варіант набагато краще першого.

Для початку натискаємо клавіші Ctrl + N. З'явиться віконце в якому ми можемо задати параметри створюваного зображення. В даному прикладі я створю зображення з однаковими сторонами рівними 100 пікселів і прозорим фоном.

Після цього, заливаємо зображення потрібним кольором, залежно від кольору фону вашого сайту. У нашому випадку це буде білий. Для цього натискаємо клавіші Shift + F5. з'явиться віконце, де в поле «Використовувати» необхідно вибрати «Колір ...», і вибрати потрібний колір заливки. Крім цього, необхідно зняти галочку «Зберегти прозорість», якщо вона стоїть

В результаті у нас повинно вийти зображення, повністю залите кольором, який відповідає кольору фону на сайті. У моєму випадку - це білий.

Тепер залишається останній крок. Нам необхідно вирізати середину, щоб вона стала прозорою. Вибираємо інструмент «Овальний область».

Після чого цим інструментів виділяємо круглу область в центрі зображення. По суті, залишаться тільки кути, а середина і краю картинки стануть прозорими. Але по краях також можна залишити трохи фону, наприклад один піксель. Тут справа особисто кожного, як зробити коло. Врахуйте, що коло, який ми зараз виділимо, і буде утворювати кругле зображення на сайті. Ось що вийшло у мене.

Після того, як потрібна область виділена, просто натискаємо на кнопку Delete і зберігаємо зображення в форматі PNG. щоб зберегти його прозорість. Кінцевий результат повинен бути приблизно таким:

І отримаємо такий результат:

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

У мене на цьому все. Успіхів!