düzenlendi Tema
Kullanımda Tema:
☰ Filmler
Dondurulmuş
animasyonlara tepki saçmaydı.
Yıldız Savaşları
İnsanlar yeni Star Wars filmi için çıkıldı.
Yenilmezler
Marvel ve Disney için büyük bir başarı.
Oluşturulan CSS:
Cinque Terre
Cinque Terre (five lands) İtalyan Rivierası bir kısmıdır. Beş köyleri ile kıyı şeridi: Monterosso, Vernazza, Corniglia, Manarola ve Riomaggiore UNESCO Dünya Mirası Listesi'nde yer almaktadır.
Monterosso
Monterosso al Mare La Spezia Riviera, küçük yapay resif tarafından korunan küçük doğal körfezin merkezinde, yer almaktadır. Bu Cinque Terre en kuzey köydür.
Vernazza
Vernazza Cinque Terre bölgede beş şehirlerinden başka bir şeydir. Vernazza dördüncü kasaba başlığı kuzey. Hiçbir araç trafiğine sahiptir ve en doğru biridir "fishing villages" İtalyan Rivierası.
Renk Temaları
W3.CSS ile, kendi renk temaları ile uygulamalarınızı özelleştirmek için kolaydır.
Örnek
<!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 ">
Önceden tanımlı temalar
HTML uygulamalarda, önceden tanımlanmış renk farklı tonları seçerek renklerin kullanımını sınırlandırabilir:
w3-kırmızı | Dene |
w3-pembe | Dene |
w3-mor | Dene |
w3-koyu mor | Dene |
w3-indigo | Dene |
w3-mavi | Dene |
w3-açık mavi | Dene |
w3-camgöbeği | Dene |
w3-çamurcun | Dene |
w3-yeşil | Dene |
w3-açık yeşil renkli | Dene |
w3-kireç | Dene |
w3-haki | Dene |
w3 sarısı | Dene |
w3-kehribar | Dene |
w3-turuncu | Dene |
w3-derin-turuncu | Dene |
w3-mavi-gri | Dene |
w3-kahverengi | Dene |
w3-gri | Dene |
w3-koyu gri | Dene |
w3-siyah | Dene |
w3-w3ii | Dene |
Filmler 2014
Dondurulmuş
animasyonlara tepki saçma
Yıldızın Altında
, Dokunmak kavrama ve gerçekten iyi yapılmış
Yenilmezler
Marvel ve Disney için büyük bir başarı
Filmler 2014
Dondurulmuş
animasyonlara tepki saçma
Yıldızın Altında
, Dokunmak kavrama ve gerçekten iyi yapılmış
Yenilmezler
Marvel ve Disney için büyük bir başarı
Özel Temalar
W3.CSS ile, özel renk teması ile bir uygulamaları özelleştirmek kolaydır.
Bir özel bir tema bağlantı verebilirsiniz <link> etiketi veya bir özel tema koyabilirsiniz <style> etiketi:
Örnek
<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>
Degradeleri ekleme
Bir okuyucu bize bu öneriyi gönderdi: Her tema için bir gradyan eklemeyi düşünün isteyebilirsiniz.
Bu degrade oluşturmak için mavi tema gelen l2 ve l1 renklerini kullandı:
Örnek
.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%)}
Renk Temaları
İşte Google'ın Somut Tasarım esinlenerek bazı indirilebilir renk temaları şunlardır:
Stil Sayfası | Açıklama |
---|---|
w3-tema-amber.css | Renk Teması Kehribar |
w3-tema-black.css | Renk Teması Siyah |
w3-tema-blue.css | Renk Teması Mavi |
w3-tema-mavi-grey.css | Renk Teması Mavi Gri |
w3-tema-brown.css | Renk Teması Kahverengi |
w3-tema-cyan.css | Renk Teması Mavi |
w3-tema-koyu-grey.css | Renk Tema Koyu Gri |
w3-tema-derin orange.css | Renk Teması Derin Turuncu |
w3-tema-derin purple.css | Renk Tema Deep Purple |
w3-tema-green.css | Renk Teması Yeşil |
w3-tema-grey.css | Renk Teması Gri |
w3-tema-indigo.css | Renk Teması İndigo |
w3-tema-khaki.css | Renk Teması Haki |
w3-tema-ışık-blue.css | Renk Teması Açık Mavi |
w3-tema-ışık-green.css | Renk Teması Açık Yeşil |
w3-tema-lime.css | Renk Teması Kireç |
w3-tema-orange.css | Renk Teması Turuncu |
w3-tema-pink.css | Renk Teması Pembe |
w3-tema-purple.css | Renk Teması Mor |
w3-tema-red.css | Renk Teması Kırmızı |
w3-tema-teal.css | Renk Teması Teal |
w3-tema-yellow.css | Renk Teması Sarı |