Созданная тема
Тема In Use:
☰ Фильмы
замороженный
Реакция на анимации было смешно.
Звездные войны
Люди вышли на новый фильм Звездные войны.
Мстители
Огромный успех для Marvel и Disney.
Сформирован 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 | Цветовая тема Желтый |