creato Tema
Tema in uso:
☰ Film
congelato
La risposta alle animazioni era ridicolo.
Guerre stellari
La gente era uscito per il nuovo film di Star Wars.
I Vendicatori
Un grande successo per la Marvel e Disney.
CSS Generated:
Cinque Terre
Le Cinque Terre (cinque terre) è una porzione della riviera italiana. La costa con cinque villaggi: Monterosso, Vernazza, Corniglia, Manarola, Riomaggiore ed è un patrimonio mondiale dell'UNESCO.
Monterosso
Monterosso al Mare si trova al centro di un piccolo golfo naturale, protetto da una piccola scogliera artificiale, nella riviera di La Spezia. E 'il paese più settentrionale delle Cinque Terre.
Vernazza
Vernazza è un altro dei cinque paesi della regione delle Cinque Terre. Vernazza è la quarta città in direzione nord. Non ha traffico automobilistico, ed è uno dei più veri "villaggi di pescatori" della riviera italiana.
Temi colore
Con W3.CSS, è facile personalizzare le applicazioni con i propri temi di colore.
Esempio
<!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 ">temi predefiniti
Nelle applicazioni HTML, è possibile limitare l'uso di colori, scegliendo diverse tonalità di colori predefiniti:
| w3-rosso | Provalo |
| w3-pink | Provalo |
| w3-viola | Provalo |
| w3-deep-purple | Provalo |
| w3-indigo | Provalo |
| w3-blu | Provalo |
| w3-azzurro | Provalo |
| w3-ciano | Provalo |
| w3-verde acqua | Provalo |
| w3-verde | Provalo |
| w3-verde chiaro | Provalo |
| w3-lime | Provalo |
| w3-khaki | Provalo |
| w3-gialla | Provalo |
| w3-ambra | Provalo |
| w3-arancio | Provalo |
| w3-deep-arancio | Provalo |
| w3-blu-grigio | Provalo |
| w3-marrone | Provalo |
| w3-grigio | Provalo |
| w3-grigio scuro | Provalo |
| w3-nero | Provalo |
| w3-w3ii | Provalo |
Film 2014
congelato
La risposta alle animazioni era ridicolo
La colpa nelle nostre stelle
Toccare, presa e veramente ben fatto
I Vendicatori
Un grande successo per la Marvel e Disney
Film 2014
congelato
La risposta alle animazioni era ridicolo
La colpa nelle nostre stelle
Toccare, presa e veramente ben fatto
I Vendicatori
Un grande successo per la Marvel e Disney
Temi privati
Con W3.CSS, è facile da personalizzare un applicazioni con un tema di colore privata.
È possibile collegare a un tema privato in un tag <link>, o si può mettere il tema privata in un tag <style>:
Esempio
<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>L'aggiunta di gradienti
Un lettore ci ha inviato questo suggerimento: Si potrebbe prendere in considerazione l'aggiunta di un gradiente per ogni tema.
Ho usato i colori L2 e L1 dal tema blu per creare questa sfumatura:
Esempio
.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%)}
Temi colore
Qui ci sono alcuni temi di colore scaricabili ispirati alla Material design di Google:
| Foglio di stile | Descrizione |
|---|---|
| w3-theme-amber.css | Tema colore ambra |
| w3-theme-black.css | Tema colore nero |
| w3-theme-blue.css | Tema colore blu |
| w3-theme-blu-grey.css | Colore Tema Blu Grigio |
| w3-theme-brown.css | Tema Marroni Colore |
| w3-theme-cyan.css | Tema colore Ciano |
| w3-theme-dark-grey.css | Tema colore grigio scuro |
| w3-theme-deep-orange.css | Tema colore arancione profondo |
| w3-theme-deep-purple.css | Colore Tema Deep Purple |
| w3-theme-green.css | Tema di colore verde |
| w3-theme-grey.css | Tema colore grigio |
| w3-theme-indigo.css | Colore Tema Indigo |
| w3-theme-khaki.css | Tema colore Khaki |
| w3-theme-light-blue.css | Colore Tema Azzurro |
| w3-theme-light-green.css | Colore Tema Verde chiaro |
| w3-theme-lime.css | Colore Lime Theme |
| w3-theme-orange.css | Tema colore arancione |
| w3-theme-pink.css | Tema Colore Rosa |
| w3-theme-purple.css | Tema colore viola |
| w3-theme-red.css | Tema colore Rosso |
| w3-theme-teal.css | Colore Teal Tema |
| w3-theme-yellow.css | Colore giallo tema |