Як з допомогою CSS у WordPress налаштувати відображення зображень та галерей

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

Зміна Рамок Зображень

Приклад 1: Додавання Рамки до Зображення

img {
    border: 2px solid #000000; /* Чорна рамка шириною 2px */
}

Приклад 2: Круглі Зображення

img.rounded {
    border-radius: 50%; /* Робить зображення круглими */
}

Приклад 3: Рамка з Закругленими Кутами

img.rounded-corners {
    border-radius: 10px; /* Закруглені кути для рамки */
}

Приклад 4: Рамка з Тінню

img.shadow-border {
    border: 3px solid #000000;
    box-shadow: 3px 3px 5px #000000; /* Додає тінь навколо рамки */
}

Додавання Тіней до Зображень

Приклад 5: Створення Тіні для Зображення

img.shadow {
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.5); /* Додає тінь */
}

Приклад 6: М'яка Тінь

img.soft-shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* М'яка тінь */
}

Приклад 7: Тінь Справа

img.right-shadow {
    box-shadow: 5px 0 5px rgba(0, 0, 0, 0.3); /* Тінь справа від зображення */
}

Приклад 8: Тінь Знизу

img.bottom-shadow {
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3); /* Тінь знизу зображення */
}

Розмір та Масштабування Зображень

Приклад 9: Зміна Розміру Зображення

img.resize {
    width: 100%; /* Зображення займає 100% ширини контейнера */
    height: auto; /* Висота автоматично змінюється зберігаючи пропорції */
}

Приклад 10: Фіксована Ширина і Висота

img.fixed-size {
    width: 300px;
    height: 200px; /* Фіксовані розміри зображення */
}

Приклад 11: Масштабування при Наведенні

img:hover {
    transform: scale(1.1); /* Збільшення зображення при наведенні курсору */
}

Приклад 12: Кругле Зображення з Фіксованим Розміром

img.round-fixed-size {
    border-radius: 50%;
    width: 100px;
    height: 100px; /* Кругле зображення з фіксованим розміром */
}

Стилізація Галерей

Приклад 13: Відображення Галереї у Вигляді Сітки

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки однакової ширини */
    gap: 15px; /* Відступи між зображеннями */
}

Приклад 14: Галерея з Плаваючими Зображеннями

.gallery img {
    float: left; /* Кожне зображення плаває ліворуч */
    margin-right: 10px; /* Відступ справа від кожного зображення */
}

Приклад 15: Галерея з Оверлей Ефектом

.gallery img:hover {
    opacity: 0.7; /* Зменшення прозорості при наведенні */
}

Приклад 16: Галерея із Зображеннями Різних Розмірів

.gallery img.large {
    width: 50%; /* Більші зображення */
}

.gallery img.small {
    width: 25%; /* Менші зображення */
}

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

Також вам буде цікаво: Як додати стилізовані кнопки в WordPress

Хостинг для ваших сайтів на WordPress

Ви шукаєте надійний хостинг для своїх веб-сайтів на WordPress? Подумайте про Host4Biz. Це надійний хостинг, який забезпечується українською командою та сучасними серверами в Європі.

Крім того, ви можете отримати 10% знижки на першу оплату за допомогою промокоду MYHOST10. Перед оплатою зареєструйтеся та введіть код, щоб зробити це.