W3.CSS Інтро. Загальне уявлення
W3.CSS Кольори
Класи w3-color основані на сучасних кольорах, що використовуються в маркетингу, дорожніми знаками та вказівниками:
W3.CSS Контейнери
Клас w3-container є найбільш важливим із класів W3.CSS. Це забезпечує рівність, як:
- Загальні поля (margin)
- Загальні відступи (padding)
- Загальні вертикальні вирівнювання
- Загальні горизонтальні вирівнювання
- Загальні шрифти
- Загальні кольори
Клас w3-container зазвичай використовується з елементами HTML-контейнера, наприклад:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form> та ін.
Це заголовок
Ця стаття світло-сіра, а текст коричневого кольору. Ця стаття світло-сіра, а текст коричневого кольору. Ця стаття світло-сіра, а текст коричневого кольору. Ця стаття світло-сіра, а текст коричневого кольору. Ця стаття світло-сіра, а текст коричневого кольору.
Це нижній колонтитул.
W3.CSS Панелі, замітки та цитати
Клас w3-panel може відображати будь-які замітки та цитати:
JavaScript — це мультипарадигменна мова програмування. Підтримує об’єктно-орієнтований, імперативний та функціональний стилі. Є реалізацією стандарту ECMAScript (стандарт ECMA-262).
Python — це високорівнева мова програмування загального призначення, орієнтована на підвищення продуктивності розробника та читабельності коду.
W3.CSS Оповіщення
Клас w3-panel також може бути використано для всіх видів оповіщень:
Небезпека!
Червоний колір часто вказує на небезпечну або негативну ситуацію.
Попередження!
Жовтий колір часто вказує на попередження, яке може потребувати уваги.
Успіх!
Зелений колір часто вказує на щось успішне або позитивне.
Інформація!
Синій часто вказує на нейтральну інформативну зміну або дію.
Приклад
<div class="w3-panel w3-yellow">
<h3>Предупреждение!</h3>
<p>Жовтий часто вказує на попередження, яке може потребувати уваги.</p>
</div>
Спробуйте самі »
W3.CSS Картки
Класи w3-card підходять як для зображень, так і для заміток:
Автомобіль
Автомобіль - це самохідний транспортний засіб на колесах, що використовується для перевезення. В більшості визначень цього терміна вказується, що автомобілі призначені для руху в основному по дорогах, для розміщення від одного до восьми осіб і, як правило, мають чотири колеса.
(Вікіпедія)
Тут офігєнно!
Французькі Альпи
Приклад
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Французькі Альпи">
<div class="w3-container w3-center">
<p>Французькі Альпи</p>
</div>
</div>
Спробуйте самі »
W3.CSS Таблиці
Класи w3-table можуть обробляти всі види таблиць:
| Ім’я | Прізвище | Розмір голови, см |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Anja | Bore | 100 |
W3.CSS Списки
Клас w3-ul може обробляти всі види списків:
-
Mike
Веб-дизайнер -
Jill
Служба підтримки -
Jane
Бухгалтер -
Jack
Дармоїд
Приклад
<ul class="w3-ul w3-border">
<li><h2>Імена</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Спробуйте самі »
W3.CSS Кнопки
Класи w3-button та w3-btn представляють кнопки всіх розмірів і типів.
Широкі кнопки:
Круглі або квадратні кнопки:
W3.CSS ярлики, етикетки, значки та знаки
Класи w3-tag та w3-badge здатні відображати всі види ярликів, етикеток, значків та знаків:
2 8 A B
Новий Попередження Небезпека Інфо
НЕ ПУКАТИ
ПІД ВОДОЮ
W3.CSS Адаптивність
Класи адаптивної сітки забезпечують адаптивність для всіх типів пристроїв: ПК, ноутбуків, планшетів та мобільних гаджетів.
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50px
залишок
1/4
залишок
100px
45px
залишок
W3.CSS також підтримує 12 колонну рухливу гумову сітку за допомогою класів small, medium та large.
W3.CSS Відображення
Класи w3-display дозволяють відображати елементи HTML у визначених позиціях:
W3.CSS Модальні вікна
Клас w3-modal забезпечує модальний діалог в чистому HTML:
Модальне зображення:
W3.CSS Прогрес-бари
Дізнайтесь більше про W3.CSS Прогрес-бари
W3.CSS Спадні ефекти
Класи w3-dropdown надають спадні ефекти:
W3.CSS Акордеони
Дізнатись більше можна в розділі W3.CSS Акордеони
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Акордеон із зображеннями:
Французькі Альпи
W3.CSS Вкладки
Вкладки ідеально підходять для односторінкових вебдодатків або для вебсторінок, здатних відображати різні теми.
Лондон
Лондон - це столиця Англії.
Це найбільш густонаселене місто в Сполученому Королівстві, з населенням понад 9 мільйонів осіб.
Париж
Париж - це столиця Франції.
Агломерація Парижу є однією з найбільших населених пунктів в Європі з населенням понад 12 мільйонів людей.
Токіо
Токіо - це столиця Японії.
Це центр Великого Токіо і найбільш густонаселений мегаполіс у світі.
Галерея зображень із вкладками (натисніть на одну із картинок):
W3.CSS Навігація
Клас w3-bar можна використовувати для створення панелі навігації:
Панель навігації із введенням:
Панель навігації зі спадним ефектом (Dropdown):
Клас w3-sidebar створює бокову навігацію:
W3.CSS Пагінація
W3.CSS надає прості способи пагінації сторінок.
Слайд-шоу
W3.CSS надає слайд-шоу для перегляду зображень або іншого контенту:
Лайтбокс / Lightbox
Об’єднайте Модали та Слайд-шоу для створення лайтбокса (галерея модальних зображень):
W3.CSS Анімації
Класи w3-animate забезпечують простий спосіб ковзання та зникнення в елементах:
W3.CSS Зображення
Стилізувати зображення в W3CSS - це легко:
W3.CSS Ефекти
Додайте спеціальні ефекти до будь-якого елемента:
Прозоро
Відтінки сірого
Сепіа
W3.CSS Форми введення
Класи w3-input для форм введення:
Форма введення
Форма введення
W3.CSS Фільтри
Використовуйте W3.CSS Фільтри для пошуку визначеного елемента в списку, таблиці, випадаючому списку і т.д.:
| Ім’я | Країна |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
| Laughing Bacchus Winecellars | Canada |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris specialites | France |
W3.CSS Шрифти
За допомогою W3.CSS дуже легко додати шрифти на веб-сторінку:
W3.CSS Виринаючі підказки
Клас w3-tooltip може відображати всі види підказок:
Наведіть курсор на цей текст! Зміст виринаючої підказки
Наведіть курсор на цей текст! Зміст виринаючої підказки
Кольорові теми
Кольорові теми можна легко додати в будь-який вебдодаток:
Тема Індиго
Фільми 2014
-
Заморожений
Реакція на анімацію була дурною
-
Винуваті зірки
Зворушливий, захопливий і дійсно добре зроблений
-
Мстители
Величезний успіх для Marvel та Disney
Тема Бірюзова
Фільми 2014
-
Заморожений
Реакція на анімацію була дурною
-
Винуваті зірки
Зворушливий, захопливий і дійсно добре зроблений
-
Мстители
Величезний успіх для Marvel та Disney
Кольорові теми ідеально підходять для мобільних додатків.
