Creado Tema
En el tema de uso:
☰ Películas
Congelado
La respuesta a las animaciones era ridícula.
Guerra de las Galaxias
La gente se salieron de la nueva película de Star Wars.
Los Vengadores
Un gran éxito para Marvel y Disney.
CSS generado:
Cinque Terre
El Cinque Terre (Cinco Tierras) es una parte de la Riviera italiana. La costa con cinco pueblos: Monterosso, Vernazza, Corniglia, Manarola y Riomaggiore es un patrimonio de la humanidad.
Monterosso
Monterosso al Mare está situado en el centro de un pequeño golfo natural protegida por un pequeño arrecife artificial, en la Riviera de La Spezia. Es el pueblo más al norte de las Cinque Terre.
Vernazza
Vernazza es otro de los cinco municipios de la región de Cinque Terre. Vernazza es la cuarta ciudad en dirección norte. No tiene ningún tráfico de automóviles, y es uno de los más verdaderos "pueblos pesqueros" en la Riviera italiana.
color Temas
Con W3.CSS, es fácil de personalizar sus aplicaciones con sus propios temas de color.
Ejemplo
<!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
En las aplicaciones HTML, se puede limitar el uso de los colores eligiendo diferentes tonalidades de colores predefinidos:
| w3-rojo | Intentalo |
| W3-rosa | Intentalo |
| W3-púrpura | Intentalo |
| W3-deep-púrpura | Intentalo |
| W3-índigo | Intentalo |
| W3-azul | Intentalo |
| W3-Celeste | Intentalo |
| W3-cian | Intentalo |
| W3-verde azulado | Intentalo |
| W3-verde | Intentalo |
| W3-verde claro | Intentalo |
| W3-cal | Intentalo |
| W3-caqui | Intentalo |
| W3-amarillo | Intentalo |
| W3-ámbar | Intentalo |
| w3-naranja | Intentalo |
| W3-deep-naranja | Intentalo |
| W3-azul-gris | Intentalo |
| W3-marrón | Intentalo |
| W3-gris | Intentalo |
| W3-gris oscuro | Intentalo |
| W3-negro | Intentalo |
| W3-w3ii | Intentalo |
Películas de 2014
Congelado
La respuesta a las animaciones era ridículo
La Falla en nuestras estrellas
Tocar, agarrar y realmente bien hecho
Los Vengadores
Un gran éxito para Marvel y Disney
Películas de 2014
Congelado
La respuesta a las animaciones era ridículo
La Falla en nuestras estrellas
Tocar, agarrar y realmente bien hecho
Los Vengadores
Un gran éxito para Marvel y Disney
Temas privados
Con W3.CSS, es fácil de personalizar una aplicación con un tema de color privada.
Puede enlazar a un tema privado en una etiqueta <link>, o puede poner el tema privado en una etiqueta <style>:
Ejemplo
<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>Adición de gradientes
Un lector nos envió esta sugerencia: Es posible que desee considerar la adición de un gradiente para cada tema.
He utilizado los colores L2 y L1 del tema azul para crear el gradiente:
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%)}
color Temas
Aquí están algunos temas de color descargables inspirada en el diseño de materiales de Google:
| Hoja de estilo | Descripción |
|---|---|
| W3-theme-amber.css | Tema de color ámbar |
| W3-theme-black.css | Tema de color Negro |
| W3-theme-blue.css | Tema de color azul |
| W3-theme-azul-grey.css | Tema de color azul gris |
| W3-theme-brown.css | Tema de color marrón |
| W3-theme-cyan.css | Tema de color cian |
| W3-theme-oscuro-grey.css | Tema de color gris oscuro |
| W3-theme-profundo-orange.css | Tema de color anaranjado profundo |
| W3-theme-profundo-purple.css | Tema de color de color morado oscuro |
| W3-theme-green.css | Tema de color verde |
| W3-theme-grey.css | Tema de color gris |
| W3-theme-indigo.css | Tema de color añil |
| W3-theme-khaki.css | Tema de color caqui |
| W3-theme-luz-blue.css | Tema de color azul claro |
| W3-theme-luz-green.css | Tema de color verde claro |
| W3-theme-lime.css | Tema de color lima |
| W3-theme-orange.css | Tema de color naranja |
| W3-theme-pink.css | Tema de color rosado |
| W3-theme-purple.css | Tema de color púrpura |
| W3-theme-red.css | Tema de color rojo |
| W3-theme-teal.css | Tema de color Teal |
| W3-theme-yellow.css | Tema de color amarillo |