En son web geliştirme öğreticiler
 

W3.CSS Renk Temaları




düzenlendi Tema

Kullanımda Tema:

00:30

Filmler

+
avatar

Dondurulmuş

animasyonlara tepki saçmaydı.


Yıldız Savaşları

İnsanlar yeni Star Wars filmi için çıkıldı.


avatar

Yenilmezler

Marvel ve Disney için büyük bir başarı.

«»

Oluşturulan CSS:

w3ii

W3.CSS Temalar Örnek

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 ">

Kendin dene "


Ö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>

Kendin dene "


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%)}

Kendin dene "


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ı