W3.CSS Кольорові теми
Кольорові теми
За допомогою W3.CSS легко налаштувати свої додатки за допомогою кольорових тем.
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
«»
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
«»
Все, що вам потрібно зробити, це додати посилання на попередньо визначену (або саморобну) тему:
Приклад
<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:
| Таблиця стилів | Опис |
|---|---|
| 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 |
