W3.CSS Зображення
Закруглене зображення:
Кругле зображення:
Зображення з межею:
Текст на зображенні:
Закруглене зображення
Клас w3-round додає закруглені кути зображенню:
Кругле зображення
Клас w3-circle формує зображення в коло:
Зображення з межею
Клас w3-border додає межі навколо зображення:
Зображення як картка
Обгорніть будь-який із класів w3-card-* навколо елемента <img> щоб відобразити його як картку (додайте тіні):
Василь Голобородько
Адмін всіх адмінів
Приклад
<div class="w3-card-4">
<img src="img_avatar.png" alt="Адмін всіх адмінів">
</div>
Спробуйте самі »
Текст на зображенні
Розмістіть текст на зображенні за допомогою w3-display-класів:
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Top Middle
Bottom Middle
Приклад
<div class="w3-display-container">
<img src="img_lights.jpg" alt="Lights">
<div class="w3-display-topleft w3-container">Top Left</div>
<div class="w3-display-topright w3-container">Top Right</div>
<div class="w3-display-bottomleft w3-container">Bottom Left</div>
<div class="w3-display-bottomright w3-container">Bottom Right</div>
<div class="w3-display-left w3-container">Left</div>
<div class="w3-display-right w3-container">Right</div>
<div class="w3-display-middle w3-large">Middle</div>
<div class="w3-display-topmiddle w3-container">Top Middle</div>
<div class="w3-display-bottommiddle w3-container">Bottom Middle</div>
</div>
Спробуйте самі »
Адаптивні зображення
Зображення може бути налаштовано на автоматичну зміну розміру відповідно до розміру його контейнера.
Якщо ви хочете, щоб зображення зменшувалось, але воно не повинно бути більше початкового розміру, використовуйте клас w3-image.
Якщо ви хочете, щоб зображення реагувало на збільшення і зменшення масштабу, встановіть для CSS-властивості width значення 100%:
Якщо ви хочете обмежити адаптивне зображення максимальним розміром, використовуйте CSS-властивість max-width:
Непрозорість / Opacity
Класи w3-opacity роблять зображення прозорим:
Звичайне
w3-opacity-min
w3-opacity
w3-opacity-max
Приклад
<img src="img_forest.jpg" alt="Ліс" class="w3-opacity-min">
<img src="img_forest.jpg" alt="Ліс" class="w3-opacity">
<img src="img_forest.jpg" alt="Ліс" class="w3-opacity-max">
Спробуйте самі »
Відтінки сірого
Класи w3-grayscale додають ефект сірого до зображення:
Звичайне
w3-grayscale-min
w3-grayscale
w3-grayscale-max
Приклад
<img src="image.jpg" alt="Стіл" class="w3-grayscale-min">
<img src="image.jpg" alt="Стіл" class="w3-grayscale">
<img src="image.jpg" alt="Стіл" class="w3-grayscale-max">
Спробуйте самі »
Примітка: Класи w3-grayscale не підтримуються в IE 11 та більш ранніх версіях.
Сепія
Класи w3-sepia додають ефект сепії до зображення:
Звичайне
w3-sepia-min
w3-sepia
w3-sepia-max
Приклад
<img src="image.jpg" alt="Стіл" class="w3-sepia-min">
<img src="image.jpg" alt="Стіл" class="w3-sepia">
<img src="image.jpg" alt="Стіл" class="w3-sepia-max">
Спробуйте самі »
Примітка: Класи w3-sepia не підтримуються в IE 11 та більш ранніх версіях.
Ефекти при наведенні
Ви також можете додати спеціальні ефекти при наведенні курсора миші.
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
Приклад
<img src="image.jpg" alt="Ейнштейн" class="w3-hover-opacity">
<img src="image.jpg" alt="Ейнштейн" class="w3-hover-grayscale">
<img src="image.jpg" alt="Ейнштейн" class="w3-hover-sepia">
Спробуйте самі »
Непрозорість вимкнена
Додати прозорість при наведенні:
Видалити прозорість при наведенні:
Клас w3-hover-opacity додає прозорість зображенню при наведенні миші, а клас w3-hover-opacity-off видаляє прозорість при наведенні курсора.
Приклад
<img src="snowtops.jpg" class="w3-hover-opacity" alt="Альпи">
<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Альпи">
Спробуйте самі »
Створення фотоальбому
В цьому прикладі ми використовуємо систему Responsive Grid W3.CSS (адаптивна сітка W3.CSS) для створення фотоальбому, який добре виглядає на всіх пристроях. Ви дізнаєтесь більше про це пізніше.
Літо 2015
5 Terre
Monterosso
Vernazza
Manarola
Corniglia
Riomaggiore
Приклад
<div class="w3-third">
<div class="w3-card">
<img src="img_monterosso.jpg" style="width:100%">
<div class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div>
Спробуйте самі »
