ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

W3.CSS Учебник

W3.CSS Учебник W3.CSS Введение W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS Границы W3.CSS Открытки W3.CSS Шрифты W3.CSS Текст W3.CSS Округлости W3.CSS Внутренние отступы W3.CSS Внешние отступы W3.CSS Отображение W3.CSS Кнопки W3.CSS Примечания W3.CSS Цитаты W3.CSS Оповещения W3.CSS Таблицы W3.CSS Списки W3.CSS Изображения W3.CSS Вводы W3.CSS Значки W3.CSS Ярлыки W3.CSS Иконки W3.CSS Адаптив W3.CSS Макеты W3.CSS Анимация W3.CSS Эффекты W3.CSS Панели W3.CSS Выпадающие W3.CSS Аккордионы W3.CSS Навигация W3.CSS Сайдбар W3.CSS Вкладки W3.CSS Пагинация W3.CSS Прогресс-бары W3.CSS Слайдшоу W3.CSS Модальные окна W3.CSS Всплывающие подсказки W3.CSS Сетка W3.CSS Код W3.CSS Фильтры W3.CSS Тренды W3.CSS Кейс W3.CSS Material-дизайн W3.CSS Валидация W3.CSS Версии W3.CSS Мобильность

W3.CSS Цвета

W3.CSS Классы цветов W3.CSS Цвет Material W3.CSS Цвет Flat UI W3.CSS Цвет Metro UI W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов

Примеры

W3.CSS Примеры W3.CSS Демо W3.CSS Шаблоны

Справочники

W3.CSS Справочник W3.CSS Загрузки

W3.CSS Уроки для начинающих

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 подходят как для изображений, так и для заметок:

Автомобиль

Автомобиль - это самоходное транспортное средство на колесах, используемое для перевозки. В большинстве определений этого термина указывается, что автомобили предназначены для движения в основном по дорогам, для размещения от одного до восьми человек и, как правило, для четырех колес.

(Википедия)

Удивительно

Car

Французские Альпы

Пример

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

Делаем интернет красивым!
Создание сети!

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

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

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

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


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

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

Тема Индиго

Фильмы 2014

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

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

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

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

  • Мстители

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

«»

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

Фильмы 2014

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

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

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

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

  • Мстители

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

«»

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