Покращуємо межі зображення за допомогою CSS, CSS-Tricks українською

Коли ми використовуємо кордон для зображення, ми хочемо, щоб результат виглядав більш привабливим. Це, як відомо, дозволяє відокремити зображення від іншого контенту на сторінці. Розглянемо методи малювання кордону.

Без використання кордону:

допомогою

Використовуючи кордон:

межі

З “Подвійний кордоном “:

допомогою

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

Як ми це зробимо?

Найпростіший бордер:

Подвійний бордер, підсвічений кольором:

Інші переваги цієї техніки.

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