Criado Tema
Tema In Use:
☰ Filmes
Congeladas
A resposta para as animações era ridículo.
Guerra nas Estrelas
As pessoas estavam saiu para o novo filme de Star Wars.
Os Vingadores
Um enorme sucesso para a Marvel e Disney.
CSS gerado:
Cinque Terre
O Cinque Terre (cinco terras) é uma parte da Riviera italiana. O litoral, com cinco aldeias: Monterosso, Vernazza, Corniglia, Manarola e Riomaggiore é um Patrimônio Mundial da UNESCO.
Monterosso
Monterosso al Mare situa-se no centro de um pequeno fosso natural, protegido por um pequeno recife artificial, na Riviera de La Spezia. É a aldeia mais setentrional do Cinque Terre.
Vernazza
Vernazza é outra das cinco cidades na região de Cinque Terre. Vernazza é o título norte quarta cidade. Ele não tem tráfego automóvel, e é um dos mais verdadeiros "vilas de pescadores", na Riviera italiana.
Temas de cor
Com W3.CSS, é fácil de personalizar as suas aplicações com os seus próprios temas de cores.
Exemplo
<!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 ">temas predefinidos
Em aplicações HTML, você pode limitar o uso de cores, escolhendo diferentes matizes de cores pré-definidas:
| W3-vermelho | Tente |
| w3-rosa | Tente |
| w3-roxo | Tente |
| w3-deep-purple | Tente |
| w3-indigo | Tente |
| w3-blue | Tente |
| w3-azul-claro | Tente |
| w3-ciano | Tente |
| w3-teal | Tente |
| w3-verde | Tente |
| w3-luz-verde | Tente |
| w3-lime | Tente |
| w3-khaki | Tente |
| w3-amarelo | Tente |
| w3-âmbar | Tente |
| W3-laranja | Tente |
| w3-deep-laranja | Tente |
| w3-azul-cinzento | Tente |
| w3-brown | Tente |
| w3-cinza | Tente |
| w3-cinza-escuro | Tente |
| w3-preta | Tente |
| w3-w3ii | Tente |
Filmes 2014
Congeladas
A resposta para as animações era ridículo
A culpa em nossas estrelas
Tocar, emocionante e realmente bem feito
Os Vingadores
Um enorme sucesso para a Marvel e Disney
Filmes 2014
Congeladas
A resposta para as animações era ridículo
A culpa em nossas estrelas
Tocar, emocionante e realmente bem feito
Os Vingadores
Um enorme sucesso para a Marvel e Disney
Temas particulares
Com W3.CSS, é fácil de personalizar um aplicativos com um tema de cores privado.
Você pode conectar-se a um tema particular em uma tag <link>, ou você pode colocar o tema privada em uma tag <style>:
Exemplo
<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>adicionando gradientes
Um leitor enviou-nos esta sugestão: Você pode querer considerar a adição de um gradiente para cada tema.
Eu usei as cores L2 e L1 do tema azul para criar esta gradiente:
Exemplo
.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%)}
Temas de cor
Aqui estão alguns temas de cores para download inspirado pelo design de materiais do Google:
| Folha de estilos | Descrição |
|---|---|
| w3-theme-amber.css | Tema de cores âmbar |
| w3-theme-black.css | Tema de cores preto |
| w3-theme-blue.css | Tema de cores azul |
| w3-theme-blue-grey.css | Tema de cores cinza azul |
| w3-theme-brown.css | Cor Tema Brown |
| w3-theme-cyan.css | Cor Tema Cyan |
| w3-theme-dark-grey.css | Tema de cores Cinza escuro |
| w3-theme-deep-orange.css | Tema de cores laranja profunda |
| w3-theme-deep-purple.css | Cor do tema Deep Purple |
| w3-theme-green.css | Tema de cores verde |
| w3-theme-grey.css | Tema de cores Cinza |
| w3-theme-indigo.css | Cor do tema Indigo |
| w3-theme-khaki.css | Tema de cores cáqui |
| w3-theme-light-blue.css | Tema de cores azul claro |
| w3-theme-light-green.css | Cor do tema da luz verde |
| w3-theme-lime.css | Cor Lime Tema |
| w3-theme-orange.css | Tema de cores laranja |
| w3-theme-pink.css | Pink Theme cor |
| w3-theme-purple.css | Tema de cores roxo |
| w3-theme-red.css | Tema da cor vermelha |
| w3-theme-teal.css | Cor Teal Tema |
| w3-theme-yellow.css | Tema de cores amarela |