Temas de color W3.CSS
Temas de color
Con W3.CSS, es fácil personalizar sus aplicaciones con temas de color.
Películas 2014
-
Congelado
La respuesta a las animaciones fue ridícula.
-
La falla en nuestras estrellas
Conmovedor, apasionante y genuinamente bien hecho.
-
Los Vengadores
Un gran éxito para Marvel y Disney
«»
Películas 2014
-
Congelado
La respuesta a las animaciones fue ridícula.
-
La falla en nuestras estrellas
Conmovedor, apasionante y genuinamente bien hecho.
-
Los Vengadores
Un gran éxito para Marvel y Disney
«»
Todo lo que tiene que hacer es agregar un enlace a un tema predefinido (o hecho en casa):
Ejemplo
<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
Estos son los temas predefinidos en W3.CSS:
| w3-tema-rojo | |
| w3-tema-rosa | |
| w3-tema-púrpura | |
| w3-theme-deep-purple | |
| w3-tema-índigo | |
| w3-tema-azul | |
| w3-tema-azul claro | |
| w3-tema-cian | |
| w3-tema-verde azulado | |
| w3-tema-verde | |
| w3-tema-verde-claro | |
| w3-tema-lima | |
| w3-tema-caqui | |
| w3-tema-amarillo | |
| w3-tema-ámbar | |
| w3-tema-naranja | |
| w3-theme-deep-orange | |
| w3-tema-azul-gris | |
| w3-tema-marrón | |
| w3-tema-gris | |
| w3-tema-gris oscuro | |
| w3-tema-negro | |
| w3-tema-w3escuelas |
Agregar degradados
Un lector nos envió esta sugerencia: es posible que desee considerar agregar un degradado para cada tema.
Usé los colores l2 y l1 del tema azul para crear este degradado:
Ejemplo
.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 color descargables
Estos son algunos temas de color descargables inspirados en Material Design de Google:
| Hoja de estilo | Descripción |
|---|---|
| w3-tema-ámbar.css | Tema de color Ámbar |
| w3-tema-negro.css | Tema de color negro |
| w3-tema-azul.css | Tema de color azul |
| w3-tema-azul-gris.css | Tema de color azul gris |
| w3-tema-marrón.css | Tema de color Marrón |
| w3-tema-cyan.css | Tema de color cian |
| w3-tema-gris-oscuro.css | Tema de color gris oscuro |
| w3-theme-deep-orange.css | Tema de color naranja intenso |
| w3-tema-deep-purple.css | Tema de color Púrpura profundo |
| w3-tema-verde.css | Tema de color Verde |
| w3-tema-gris.css | Tema de color Gris |
| w3-tema-índigo.css | Tema de color índigo |
| w3-tema-caqui.css | Tema de color Caqui |
| w3-tema-azul-claro.css | Tema de color azul claro |
| w3-tema-verde-claro.css | Tema de color verde claro |
| w3-tema-lima.css | Color Tema Lima |
| w3-tema-naranja.css | Tema de color Naranja |
| w3-tema-rosa.css | Tema de color rosa |
| w3-tema-púrpura.css | Tema de color Púrpura |
| w3-tema-rojo.css | Tema de color rojo |
| w3-tema-verde azulado.css | Tema de color verde azulado |
| w3-tema-amarillo.css | Tema de color amarillo |