Temas de cores W3.CSS
Temas de cores
Com o W3.CSS, é fácil personalizar seus aplicativos com temas de cores.
Filmes 2014
-
Congeladas
A resposta às animações foi ridícula
-
A falha em nossas estrelas
Tocante, emocionante e genuinamente bem feito
-
Os Vingadores
Um enorme sucesso para a Marvel e Disney
«»
Filmes 2014
-
Congeladas
A resposta às animações foi ridícula
-
A falha em nossas estrelas
Tocante, emocionante e genuinamente bem feito
-
Os Vingadores
Um enorme sucesso para a Marvel e Disney
«»
Tudo o que você precisa fazer é adicionar um link para um tema predefinido (ou feito em casa):
Exemplo
<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">
Temas predefinidos
Estes são os temas predefinidos no W3.CSS:
| w3-tema-vermelho | |
| w3-tema-rosa | |
| w3-tema-roxo | |
| w3-tema-roxo profundo | |
| w3-tema-índigo | |
| w3-tema-azul | |
| w3-tema-azul-claro | |
| w3-tema-ciano | |
| w3-tema-azul | |
| w3-tema-verde | |
| w3-tema-verde-claro | |
| w3-tema-cal | |
| w3-tema-caqui | |
| w3-tema-amarelo | |
| w3-tema-âmbar | |
| w3-tema-laranja | |
| w3-tema-laranja profundo | |
| w3-tema-azul-cinza | |
| w3-tema-marrom | |
| w3-tema-cinza | |
| w3-tema-cinza-escuro | |
| w3-tema-preto | |
| w3-tema-w3escolas |
Adicionando gradientes
Um leitor nos enviou esta sugestão: Você pode considerar adicionar um gradiente para cada tema.
Usei as cores l2 e l1 do tema azul para criar este 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 cores para download
Aqui estão alguns temas de cores para download inspirados no Material Design do Google:
| Folha de estilos | Descrição |
|---|---|
| w3-theme-âmbar.css | Cor Tema Âmbar |
| w3-theme-black.css | Cor Tema Preto |
| w3-theme-blue.css | Cor Tema Azul |
| w3-tema-azul-cinza.css | Cor Tema Azul Cinza |
| w3-theme-brown.css | Cor Tema Marrom |
| w3-theme-cyan.css | Cor Tema Ciano |
| w3-theme-dark-grey.css | Cor Tema Cinza Escuro |
| w3-theme-deep-orange.css | Cor Tema Laranja Profundo |
| w3-theme-deep-purple.css | Cor Tema Roxo Profundo |
| w3-theme-green.css | Cor Tema Verde |
| w3-theme-grey.css | Cor Tema Cinza |
| w3-theme-indigo.css | Tema de cor índigo |
| w3-theme-khaki.css | Tema de cores cáqui |
| w3-theme-light-blue.css | Cor Tema Azul Claro |
| w3-theme-light-green.css | Cor Tema Verde Claro |
| w3-theme-lime.css | Cor Tema Cal |
| w3-theme-orange.css | Cor Tema Laranja |
| w3-theme-pink.css | Cor Tema Rosa |
| w3-theme-purple.css | Cor Tema Roxo |
| w3-theme-red.css | Cor Tema Vermelho |
| w3-theme-teal.css | Tema de cor azul-petróleo |
| w3-theme-yellow.css | Cor Tema Amarelo |