Цветовые темы W3.CSS
Цветовые темы
С W3.CSS легко настроить ваши приложения с помощью цветовых тем.
Фильмы 2014 года
-
замороженный
Реакция на анимацию была смешной
-
Виноваты звезды
Трогательный, захватывающий и действительно хорошо сделанный
-
Мстители
Огромный успех для Marvel и Disney
«»
Фильмы 2014 года
-
замороженный
Реакция на анимацию была смешной
-
Виноваты звезды
Трогательный, захватывающий и действительно хорошо сделанный
-
Мстители
Огромный успех для 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-тема-красный | |
| w3-тема-розовый | |
| w3-тема-фиолетовый | |
| w3-тема-темно-фиолетовый | |
| w3-тема-индиго | |
| w3-тема-синий | |
| w3-тема-голубой | |
| w3-тема-голубой | |
| w3-тема-бирюзовый | |
| w3-тема-зеленый | |
| w3-тема-светло-зеленый | |
| w3-тема-лайм | |
| w3-тема-хаки | |
| w3-тема-желтый | |
| w3-тема-янтарь | |
| w3-тема-оранжевый | |
| w3-тема-темно-оранжевый | |
| w3-тема-сине-серый | |
| w3-тема-коричневый | |
| w3-тема-серый | |
| w3-тема-темно-серый | |
| w3-тема-черный | |
| w3-тема-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 | Цветовая гамма Янтарный |
| w3-тема-черный.css | Цветовая гамма Черный |
| w3-тема-синий.css | Цветовая гамма Синий |
| w3-тема-сине-серый.css | Цветовая схема Синий Серый |
| w3-theme-brown.css | Цветовая гамма Коричневый |
| w3-theme-cyan.css | Цветовая гамма Голубой |
| w3-тема-темно-серый.css | Цветовая схема Темно-серый |
| w3-theme-deep-orange.css | Цветовая гамма Глубокий оранжевый |
| w3-theme-deep-purple.css | Цветовая гамма Deep Purple |
| w3-theme-green.css | Цветовая гамма Зеленый |
| w3-тема-grey.css | Цветовая гамма Серый |
| w3-тема-indigo.css | Цветовая гамма индиго |
| w3-тема-хаки.css | Цветовая гамма хаки |
| w3-тема-светло-синий.css | Цветовая гамма Светло-голубой |
| w3-тема-светло-зеленый.css | Цветовая схема Светло-зеленый |
| w3-тема-лайм.css | Цветовая гамма Лайм |
| w3-тема-оранжевый.css | Цветовая гамма Оранжевый |
| w3-тема-pink.css | Цветовая гамма Розовый |
| w3-theme-purple.css | Цветовая гамма Фиолетовый |
| w3-тема-red.css | Цветовая тема Красный |
| w3-theme-teal.css | Цветовая гамма Бирюзовый |
| w3-тема-желтый.css | Цветовая гамма Желтый |