Tema creat
Tema În Utilizare:
☰ Filme
Îngheţat
Răspunsul la animații ridicol.
Razboiul Stelelor
Oamenii au ieșit pentru noul film Star Wars.
Răzbunătorii
Un mare succes pentru Marvel și Disney.
CSS generat:
Cinque Terre
Cinque Terre (five lands) este o parte din Riviera Italiană. Linia de coastă cu cinci sate: Monterosso, Vernazza, Corniglia, Manarola și Riomaggiore este un Patrimoniului Mondial UNESCO.
Monterosso
Monterosso al Mare este situat în centrul unui golf mic naturale, protejate de un mic recif artificial, în Riviera La Spezia. Este satul nordic al Cinque Terre.
Vernazza
Vernazza este un alt dintre cele cinci orașe din regiunea Cinque Terre. Vernazza este al patrulea oraș spre nord. Acesta are nici un trafic auto, și este una dintre cele mai adevărate "fishing villages" de "fishing villages" pe Riviera Italiană.
Teme de culoare
Cu W3.CSS, este ușor de a personaliza aplicațiile cu propriile teme de culoare.
Exemplu
<!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 ">Teme predefinite
În aplicațiile HTML, puteți limita utilizarea culorilor prin alegerea nuanțe diferite de culori predefinite:
| W3-roșu | Incearca-l |
| W3-roz | Incearca-l |
| w3-violet | Incearca-l |
| w3-deep-violet | Incearca-l |
| W3-indigo | Incearca-l |
| W3-albastru | Incearca-l |
| W3-lumină-albastru | Incearca-l |
| W3-cian | Incearca-l |
| W3-teal | Incearca-l |
| W3-verde | Incearca-l |
| W3-lumină-verde | Incearca-l |
| W3-tei | Incearca-l |
| W3-kaki | Incearca-l |
| w3-galben | Incearca-l |
| W3-chihlimbar | Incearca-l |
| w3-orange | Incearca-l |
| w3-deep-orange | Incearca-l |
| W3-gri-albastru | Incearca-l |
| w3-brun | Incearca-l |
| W3-gri | Incearca-l |
| w3-gri închis | Incearca-l |
| W3-negru | Incearca-l |
| W3-w3ii | Incearca-l |
Filme 2014
Îngheţat
Răspunsul la animațiile ridicol
Deranjament stelele noastre
Touching, prindere și cu adevărat bine făcut
Răzbunătorii
Un mare succes pentru Marvel și Disney
Filme 2014
Îngheţat
Răspunsul la animațiile ridicol
Deranjament stelele noastre
Touching, prindere și cu adevărat bine făcut
Răzbunătorii
Un mare succes pentru Marvel și Disney
Teme private
Cu W3.CSS, este ușor de a personaliza un aplicații cu o temă de culoare privată.
Puteți lega la o temă privată într - un <link> tag - ul, sau puteți pune tema privată într - un <style> tag - ul:
Exemplu
<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>Adăugarea Gradienții
Un cititor ne-a trimis această sugestie: S-ar putea dori să ia în considerare adăugarea de un gradient pentru fiecare temă.
Am folosit culorile și L2 din tema l1 albastru pentru a crea acest gradient de:
Exemplu
.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%)}
Teme de culoare
Iată câteva teme de culori care pot fi descărcate inspirate de designul material al Google:
| Foaie de stil | Descriere |
|---|---|
| W3-tema-amber.css | Temă de culoare Amber |
| W3-tema-black.css | Temă de culoare negru |
| W3-tema-blue.css | Tema Culoare Albastru |
| W3-tema-albastru-grey.css | Culoare Tema Albastru Gri |
| W3-tema-brown.css | Temă de culoare maro |
| W3-tema-cyan.css | Temă de culoare Cyan |
| W3-tema-dark-grey.css | Temă de culoare Gri închis |
| W3-tema-deep-orange.css | Temă de culoare portocaliu-intens |
| W3-tema-deep-purple.css | Temă de culoare Deep Purple |
| W3-tema-green.css | Temă de culoare verde |
| W3-tema-grey.css | Temă de culoare gri |
| W3-tema-indigo.css | Temă de culoare indigo |
| W3-tema-khaki.css | Temă de culoare Kaki |
| W3-tema-light-blue.css | Temă de culoare albastru deschis |
| W3-tema-light-green.css | Temă de culoare verde deschis |
| W3-tema-lime.css | Temă de culoare Lime |
| W3-tema-orange.css | Temă de culoare portocaliu |
| W3-tema-pink.css | Temă de culoare roz |
| W3-tema-purple.css | Temă de culoare violet |
| W3-tema-red.css | Temă de culoare roșie |
| W3-tema-teal.css | Temă de culoare Turcoaz |
| W3-tema-yellow.css | Temă de culoare galben |