ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
W3CSS. Уроки для начинающих

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 — это высокоуровневый язык программирования общего назначения, ориентированный на повышение производительности разработчика и читаемости кода.


Java — строго типизированный объектно-ориентированный язык программирования, разработанный компанией Sun Microsystems (в последующем приобретённой компанией Oracle).


C++ (читается си-плюс-плюс) — компилируемый, статически типизированный язык программирования общего назначения.


"Помните — времени мало. Не тратьте его, чтобы жить чьей-то чужой жизнью. Не слушайте никого. Шум чужих мнений не должен заглушать ваш внутренний голос. Слушайте только свое Сердце и интуицию. Они откуда-то точно знают, кем вам быть и что делать.
А все остальное — не важно, просто не важно…"

Стив Джобс


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="Alps">
  <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

Пример

<table class="w3-table w3-striped w3-border">
Попробуйте сами »

W3.CSS Списки

Класс w3-ul может обрабатывать все виды списков:

  • × Списки Mike
    Веб-дизайнер
  • × Списки Jill
    Служба поддержки
  • × Списки Jane
    Бухгалтер
  • × Списки Jack
    Помощник

Пример

<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 A B

Новый Предупреждение Опасность Инфо

Falcon Ridge Parkway
S
A
L
E
НЕ
ДЫШАТЬ
ПОД ВОДОЙ

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 в определенных позициях:

Вверху слева
Вверху справа
Внизу слева
Внизу справа
Слева
Справа
Посередине
Вверху посередине
Внизу посередине

Pants
Вверху слева
Вверху справа
Внизу слева
Внизу справа
Слева
Справа
Посередине
Вверху посередине
Внизу посередине

W3.CSS Модальные окна

Класс w3-modal обеспечивает модальный диалог в чистом HTML:

×

Header

Какой-то текст. Какой-то текст. Какой-то текст.

Какой-то текст. Какой-то текст. Какой-то текст.

Footer



Модальное изображение:

Nature
×
Природа

W3.CSS Прогресс-бары

Узнайте больше про W3.CSS Прогресс-бары

25%

50%

0


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.

Аккордеон с изображениями:

Аккордеон с изображениями

French Alps


W3.CSS Вкладки

Вкладки идеально подходят для одностраничных веб-приложений или для веб-страниц, способных отображать различные темы.

Лондон

Лондон - это столица Англии.

Это самый густонаселенный город в Соединенном Королевстве, с населением более 9 миллионов человек.

Париж

Париж - это столица Франции.

Агломерация Парижа является одним из крупнейших населенных пунктов в Европе с населением более 12 миллионов человек.

Токио

Токио - это столица Японии.

Это центр Большого Токио и самый густонаселенный мегаполис в мире.


Галерея изображений со вкладками (нажмите на одну из картинок):


Nature ×
Nature
Snow ×
Snow
Mountains ×
Mountains
Lights ×
Northern Lights

W3.CSS Навигация

Класс w3-bar можно использовать для создания панели навигации:

Панель навигации с вводом:

Панель навигации с выпадающим эффектом (Dropdown):


Класс w3-sidebar создает боковую навигацию:


W3.CSS Пагинация

W3.CSS предоставляет простые способы пагинации страниц.

« 1 2 3 4 5 »



Слайдшоу

W3.CSS предоставляет слайдшоу для просмотра изображений или другого контента:

Слайдшоу
1 / 3
Beautiful Nature
Слайдшоу
2 / 3
French Alps
Слайдшоу
3 / 3
Mountains

Лайтбокс / Lightbox

Объедините Модалы и Слайдшоу для создания лайтбокса (галерея модальных изображений):

×
Лайтбокс Лайтбокс Лайтбокс

Природа и восход
Французские Альпы
Горы и фьорды
Природа
Снег
Горы

W3.CSS Анимации

Классы w3-animate обеспечивают простой способ скольжения и исчезновения в элементах:


Анимация это весело!
Анимация это весело!
Анимация это весело!
Анимация это весело!
Анимация это весело!
Анимация это весело!
Анимация это весело!

W3.CSS Изображения

Стилизовать изображения в W3CSS - это легко:

Northern Lights
Forest
Mountains
Nature
Nature

W3.CSS Эффекты

Добавьте специальные эффекты к любому элементу:

Эффекты

Обычно

Эффекты

Прозрачно

Эффекты

Оттенки серого

Эффекты

Сепиа


W3.CSS Формы ввода

Классы w3-input для форм ввода:



Форма ввода


Форма ввода



W3.CSS Фильтры

Используйте W3.CSS Filters для поиска определенного элемента в списке, таблице, раскрывающемся списке и т.д.:

Имя Страна
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 чрезвычайно легко добавить шрифты на веб-страницу:

Making the web beautiful!
Создание сети!

W3.CSS Всплывающие подсказки

Класс w3-tooltip может отображать все виды подсказок:

Наведите курсор на этот текст! Содержание всплывающей подсказки

Наведите курсор на этот текст! Содержание всплывающей подсказки


Цветовые темы

Цветовые темы можно легко добавить в любое веб-приложение:

Тема Индиго

Фильмы 2014

  • Замороженный

    Реакция на анимацию была нелепой

  • Виноваты звезды

    Трогательный, захватывающий и действительно хорошо сделанный

  • Мстители

    Огромный успех для Marvel и Disney

«»

Тема Бирюзовая

Фильмы 2014

  • Замороженный

    Реакция на анимацию была нелепой

  • Виноваты звезды

    Трогательный, захватывающий и действительно хорошо сделанный

  • Мстители

    Огромный успех для Marvel и Disney

«»

Цветовые темы идеально подходят для мобильных приложений.

Подробнее обо всех возможностях фреймворка W3.CSS вы сможете узнать в уроках на нашем сайте W3Schools на русском.