W3.CSS Color Generator
ဤအရောင်မီးစက်ဖြင့် သင့်ကိုယ်ပိုင်သီးသန့် အပြင်အဆင်များကို ဖန်တီးနိုင်သည်။
အောက်ရှိ အဝါရောင်အကွက်တွင် အရောင်တစ်ခုထည့်ပါ သို့မဟုတ် တစ်နှစ်၏အရောင်များမှ အရောင်တစ်ခုကို ရွေးချယ်ပါ။
W3.CSS Themes ဥပမာ
ငါးပြည်
Cinque Terre (ငါးမြေ) သည် အီတလီ ရီဗီယာ၏ အစိတ်အပိုင်းတစ်ခုဖြစ်သည်။ ရွာငါးရွာရှိသော ကမ်းရိုးတန်း- Monterosso၊ Vernazza၊ Corniglia၊ Manarola နှင့် Riomaggiore သည် UNESCO ကမ္ဘာ့အမွေအနှစ်နေရာဖြစ်သည်။
မွန်ထရိုဆို
Monterosso al Mare သည် La Spezia ၏ Riviera ရှိ သေးငယ်သော သန္တာကျောက်တန်းများဖြင့် ကာကွယ်ထားသော သဘာဝပင်လယ်ကွေ့ငယ်လေး၏ အလယ်ဗဟိုတွင် တည်ရှိသည်။ ၎င်းသည် Cinque Terre ၏မြောက်ဘက်အကျဆုံးရွာဖြစ်သည်။
Vernazza
Vernazza သည် Cinque Terre ဒေသရှိ အခြားမြို့ငါးမြို့ဖြစ်သည်။ Vernazza သည် မြောက်ဘက်သို့ ဦးတည်သော စတုတ္ထမြောက်မြို့ဖြစ်သည်။ ၎င်းတွင် ကားအသွားအလာမရှိသည့်အပြင် အီတလီမြစ်ဝကျွန်းပေါ်ရှိ စစ်မှန်သော "တံငါရွာများ" ထဲမှ တစ်ခုဖြစ်သည်။
Created Theme
| #fefbf5 w3-theme-l5 |
| #fcf2dc w3-theme-l4 |
| #f9e6ba w3-theme-l3 |
| #f5d997 w3-theme-l2 |
| #f2cd75 w3-theme-l1 |
| #efc050 w3-theme |
| #ecb535 w3-theme-d1 |
| #e9ab18 w3-theme-d2 |
| #ce9613 w3-theme-d3 |
| #b08010 w3-theme-d4 |
| #936b0e w3-theme-d5 |
Theme In Use:
Movies
Frozen
The response to the animations was ridiculous.
Star Wars
People were excited for the new Star Wars movie.
The Avengers
A huge success for Marvel and Disney.
Generated CSS:
.w3-theme-l5 {color:#000 !important; background-color:#fefbf5 !important}
.w3-theme-l4 {color:#000 !important; background-color:#fcf2dc !important}
.w3-theme-l3 {color:#000 !important; background-color:#f9e6ba !important}
.w3-theme-l2 {color:#000 !important; background-color:#f5d997 !important}
.w3-theme-l1 {color:#000 !important; background-color:#f2cd75 !important}
.w3-theme-d1 {color:#000 !important; background-color:#ecb535 !important}
.w3-theme-d2 {color:#000 !important; background-color:#e9ab18 !important}
.w3-theme-d3 {color:#fff !important; background-color:#ce9613 !important}
.w3-theme-d4 {color:#fff !important; background-color:#b08010 !important}
.w3-theme-d5 {color:#fff !important; background-color:#936b0e !important}
.w3-theme-light {color:#000 !important; background-color:#fefbf5 !important}
.w3-theme-dark {color:#fff !important; background-color:#936b0e !important}
.w3-theme-action {color:#fff !important; background-color:#936b0e !important}
.w3-theme {color:#000 !important; background-color:#efc050 !important}
.w3-text-theme {color:#efc050 !important}
.w3-border-theme {border-color:#efc050 !important}
.w3-hover-theme:hover {color:#000 !important; background-color:#efc050 !important}
.w3-hover-text-theme:hover {color:#efc050 !important}
.w3-hover-border-theme:hover {border-color:#efc050 !important}
Private Themes
With W3.CSS, it is easy to customize an application with a private color theme.
You can link to a private theme in a <link> tag, or you can put the private theme in a <style> tag:
Example
<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>