Введение в W3.CSS (кухонная мойка)
Цвета W3.CSS
Классы w3-color вдохновлены современными цветами, используемыми в маркетинге, дорожных знаках и стикерах:
Контейнеры W3.CSS
Класс w3-container — самый важный из классов W3.CSS. Он обеспечивает равенство, например:
- Общие поля
- Общие прокладки
- Общие вертикальные выравнивания
- Общие горизонтальные выравнивания
- Общие шрифты
- Общие цвета
Класс w3-container обычно используется с элементами контейнера HTML, например:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form> и другие.
Это заголовок
Эта статья светло-серая, а текст коричневый. Эта статья светло-серая, а текст коричневый. Эта статья светло-серая, а текст коричневый. Эта статья светло-серая, а текст коричневый. Эта статья светло-серая, а текст коричневый.
Это нижний колонтитул.
Панели W3.CSS, примечания и цитаты
Класс w3-panel может отображать все виды заметок и цитат:
Лондон — самый густонаселенный город Соединенного Королевства с населением более 9 миллионов человек.
Лондон — самый густонаселенный город Соединенного Королевства с населением более 9 миллионов человек.
Оповещения W3.CSS
Класс w3-panel также можно использовать для всех видов предупреждений:
Опасность!
Красный часто указывает на опасную или негативную ситуацию.
Предупреждение!
Желтый часто указывает на предупреждение, которое может потребовать внимания.
Успех!
Зеленый часто указывает на что-то успешное или позитивное.
Информация!
Синий часто указывает на нейтральное информативное изменение или действие.
Пример
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
Карточки W3.CSS
Классы w3-card подходят как для изображений, так и для заметок:
Автомобиль
Автомобиль – это колесное самоходное транспортное средство, используемое для передвижения. В большинстве определений этого термина указывается, что автомобили предназначены для движения в основном по дорогам, вмещают от одного до восьми человек и обычно имеют четыре колеса.
(Википедия)
Удивительный
Французские Альпы
Пример
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>
W3.CSS-таблицы
Классы w3-table могут обрабатывать все виды таблиц:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
| Аня | Скважина | 100 |
Пример
<table class="w3-table w3-striped w3-border">
Списки W3.CSS
Класс w3-ul может обрабатывать все виды списков:
-
Майк
Веб-дизайнер -
Джилл
Поддержка -
Джейн
Бухгалтер -
Джек
Эдвайзор
Пример
<ul class="w3-ul w3-border">
<li><h2>Names</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 А Б
Новый Предупреждение Опасность Информация
ДЫШАТЬ
ПОД ВОДОЙ
W3.CSS Отзывчивый
Классы Responsive Grid обеспечивают отзывчивость для всех типов устройств: ПК, ноутбуков, планшетов и мобильных устройств.
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
50 пикселей
отдых
1/4
отдых
100 пикселей
45 пикселей
отдых
W3.CSS также поддерживает 12-колоночную гибкую сетку Mobile- First с малыми, средними и большими классами.
W3.CSS Отображение
Классы w3-display позволяют отображать элементы HTML в определенных позициях:
Модальные окна W3.CSS
Класс w3-modal предоставляет модальный диалог на чистом HTML:
Модальное изображение:
Индикаторы выполнения W3.CSS
Подробнее читайте в W3.CSS Progress Bars.
Выпадающие списки W3.CSS
Классы w3-dropdown предоставляют раскрывающиеся списки:
Аккордеоны W3.CSS
Read more at W3.CSS Accordions
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.
Accordion with Images:
French Alps
W3.CSS Tabs
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.
London
London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Tabbed Image Gallery (Click on one of the pictures):
W3.CSS Navigation
The w3-bar class can be used to create a navigation bar:
Navigation bar with input:>
Navigation bar with dropdown:
The w3-sidebar class creates a side navigation:
W3.CSS Pagination
W3.CSS provides simple ways for page pagination.
Slideshows
W3.CSS provide slideshows for cycling through images or other content:
Lightbox
Combine Modals and Slideshows to create a lightbox (modal image gallery):
Nature and sunrise
❮ ❯
W3.CSS Animations
The w3-animate classes provide an easy way to slide and fade in elements:
W3.CSS Images
Styling images in W3CSS is easy:
W3.CSS Effects
Add special effects to any element:
Opacity
Grayscale
Sepia
W3.CSS Input Forms
The w3-input classes are for input forms:
Input Form
Input Form
W3.CSS Filters
Use W3.CSS Filters to search for a specific element inside a list, table, dropdown, etc:
| Name | Country |
|---|---|
| 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 Fonts
With W3.CSS it is extremely easy to add fonts to a web page:
W3.CSS Tooltips
The w3-tooltip class can display all kinds of tooltips:
Hover over this text! Tooltip content
Hover over this text! Tooltip content
Color Themes
Color themes can easily be added to any web application:
Theme Indigo
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Theme Teal
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Color themes are a perfect match for mobile applications.