ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY JAVA XML БОЛЬШЕ 🔍 ◑ КНИГИ УПРАЖНЕНИЯ СПРАВОЧНИКИ

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 Цветовые темы

❮ Prev Next ❯

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

С помощью W3.CSS легко настроить ваши приложения с цветными темами.

Фильмы 2014

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

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

  • The Fault in Our Stars / Виноваты звезды

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

  • The Avengers / Мстители

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

«»

Фильмы 2014

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

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

  • The Fault in Our Stars / Виноваты звезды

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

  • The Avengers / Мстители

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

«»

Все, что вам нужно сделать, это добавить ссылку на предопределенную (или домашнюю) тему:

Пример

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-indigo.css">

Попробуйте сами »

Предопределенные темы

Это предопределенные темы в W3.CSS:

w3-theme-red Попробуй это
w3-theme-pink Попробуй это
w3-theme-purple Попробуй это
w3-theme-deep-purple Попробуй это
w3-theme-indigo Попробуй это
w3-theme-blue Попробуй это
w3-theme-light-blue Попробуй это
w3-theme-cyan Попробуй это
w3-theme-teal Попробуй это
w3-theme-green Попробуй это
w3-theme-light-green Попробуй это
w3-theme-lime Попробуй это
w3-theme-khaki Попробуй это
w3-theme-yellow Попробуй это
w3-theme-amber Попробуй это
w3-theme-orange Попробуй это
w3-theme-deep-orange Попробуй это
w3-theme-blue-grey Попробуй это
w3-theme-brown Попробуй это
w3-theme-grey Попробуй это
w3-theme-dark-grey Попробуй это
w3-theme-black Попробуй это
w3-theme-w3schools Попробуй это

Добавление градиентов

Один читатель прислал нам это предложение: вы можете рассмотреть возможность добавления градиента для каждой темы.

Я использовал цвета l2 и l1 из синей темы, чтобы создать этот градиент:

Пример

.w3-theme-gradient {
  color: #000 !important;
  background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-moz-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-ms-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}

Попробуйте сами »

Загружаемые Цветовые Темы

Вот несколько загружаемых цветовых тем, вдохновленных Google Material Design:

Таблица стилей Описание
w3-theme-amber.css Color Theme Amber (янтарная)
w3-theme-black.css Color Theme Black (черная)
w3-theme-blue.css Color Theme Blue (голубая)
w3-theme-blue-grey.css Color Theme Blue Grey (серая)
w3-theme-brown.css Color Theme Brown (коричневая)
w3-theme-cyan.css Color Theme Cyan (синяя)
w3-theme-dark-grey.css Color Theme Dark Grey (темно-серая)
w3-theme-deep-orange.css Color Theme Deep Orange (оранжевая)
w3-theme-deep-purple.css Color Theme Deep Purple (пурпурная)
w3-theme-green.css Color Theme Green (зеленая)
w3-theme-grey.css Color Theme Grey (серая)
w3-theme-indigo.css Color Theme Indigo (индиго)
w3-theme-khaki.css Color Theme Khaki (хаки)
w3-theme-light-blue.css Color Theme Light Blue (светло-голубая)
w3-theme-light-green.css Color Theme Light Green (светло-зеленая)
w3-theme-lime.css Color Theme Lime (цвет лайма)
w3-theme-orange.css Color Theme Orange (оранжевая)
w3-theme-pink.css Color Theme Pink (розовая)
w3-theme-purple.css Color Theme Purple (пурпурная)
w3-theme-red.css Color Theme Red (красная)
w3-theme-teal.css Color Theme Teal (бирюзовая)
w3-theme-yellow.css Color Theme Yellow (желтая)
❮ Prev Next ❯