Последние учебники веб-разработки
 

W3.CSS Цвет темы




Созданная тема

Тема In Use:

12:30

Фильмы

+
аватар

замороженный

Реакция на анимации было смешно.


Звездные войны

Люди вышли на новый фильм Звездные войны.


аватар

Мстители

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

«»

Сформирован CSS:

w3ii

W3.CSS Темы Пример

Cinque Terre

Cinque Terre (пять земель) является частью Итальянской Ривьеры. Береговая линия с пятью деревнями: Монтероссо, Вернацца, Корнилья, Манарола и Риомаджоре является объектом Всемирного наследия ЮНЕСКО.

Монтероссо

Монтероссо-аль-Маре находится в центре небольшого естественного залива, защищенный небольшой искусственный риф, в Ривьера Ла Специя. Это самая северная деревня Чинкве-Терре.

Верназза

Вернацца является еще одним из пяти городов региона Чинкве-Терре. Вернацца является четвертым городом в северном направлении. Это не имеет никакого автомобильного движения, и является одним из вернейших «рыбацких деревень» на итальянской Ривьере.


Цвет темы

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

пример

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet" href=" /lib/w3-theme-indigo.css ">

Попробуй сам "


Предустановленные темы

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

W3-красный Попробуй
W3-розовый Попробуй
W3-фиолетовый Попробуй
W3-глубоко-фиолетовой Попробуй
W3-индиго Попробуй
W3-синий Попробуй
W3-светло-синий Попробуй
W3-циан Попробуй
W3-бирюзовые Попробуй
W3-зеленый Попробуй
W3-светло-зеленый Попробуй
W3-кальциево Попробуй
W3-хаки Попробуй
W3-желтый Попробуй
W3-янтарный Попробуй
W3-оранжевый Попробуй
W3-темно-оранжевого цвета Попробуй
W3-сине-серый Попробуй
W3-коричневый Попробуй
W3-серый Попробуй
w3 темно-серый Попробуй
W3-черный Попробуй
W3-w3ii Попробуй

Фильмы 2014

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

    Реакция на анимации было смешно

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

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

  • Мстители

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

«»


Фильмы 2014

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

    Реакция на анимации было смешно

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

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

  • Мстители

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

«»

Частные темы

С W3.CSS, легко настроить создания приложений с собственной цветовой темой.

Вы можете ссылаться на частной теме в теге <Link>, или вы можете поместить частную тему в теге <STYLE>:

пример

<style>
.w3-theme {
color:#fff !important;background-color:#3f51b5 !important}
.w3-theme-light {
color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-dark {
color:#fff !important;background-color:#1a237e !important}
.w3-theme-l5 {
color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-l4 {
color:#000 !important;background-color:#c5cae9 !important}
.w3-theme-l3 {
color:#000 !important;background-color:#9fa8da !important}
.w3-theme-l2 {
color:#fff !important;background-color:#7986cb !important}
.w3-theme-l1 {
color:#fff !important;background-color:#5c6bc0 !important}
.w3-theme-d1 {
color:#fff !important;background-color:#3949ab !important}
.w3-theme-d2 {
color:#fff !important;background-color:#303f9f !important}
.w3-theme-d3 {
color:#fff !important;background-color:#283593 !important}
.w3-theme-d4 {
color:#fff !important;background-color:#1a237e !important}
.w3-theme-action {
color:#fff !important;background-color:#311b92 !important}
.w3-text-theme {
color:#1a237e !important}
</style>

Попробуй сам "


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

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

Я использовал 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:

Style Sheet Описание
W3-тема-amber.css Цветовая тема Amber
W3-тема-black.css Цветовая тема Черный
W3-тема-blue.css Цветовая тема Синий
W3-тема-сине-grey.css Цвет Стиль Синий Серый
W3-тема-brown.css Цветовая тема Коричневый
W3-тема-cyan.css Цветовая тема Cyan
W3-тема темно-grey.css Цвет Стиль Темно-серый
W3-тема-глубоко orange.css Цветовая тема Deep Orange
W3-тема-глубоко purple.css Цветовая тема Deep Purple
W3-тема-green.css Цветовая тема Зеленый
W3-тема-grey.css Цвет Стиль Серый
W3-тема-indigo.css Цветовая тема Indigo
W3-тема-khaki.css Цветовая тема Хаки
W3-тема-светло-blue.css Цветовая тема Light Blue
W3-тема-светло-green.css Цветовая тема Светло-зеленый
W3-тема-lime.css Цветовая тема Известь
W3-тема-orange.css Цветовая тема Оранжевый
W3-тема-pink.css Цветовая тема Розовый
W3-тема-purple.css Цветовая тема Фиолетовый
W3-тема-red.css Цветовая тема Красный
W3-тема-teal.css Цветовая тема Teal
W3-тема-yellow.css Цветовая тема Желтый