W3.CSS Generator kolorów
Za pomocą tego generatora kolorów możesz tworzyć własne prywatne motywy.
Wprowadź kolor w żółtym polu poniżej lub wybierz kolor z kolorów roku.
W3.Przykład motywów CSS
Pięć krain
Cinque Terre (pięć krain) to część Riwiery Włoskiej. Linia brzegowa z pięcioma wioskami: Monterosso, Vernazza, Corniglia, Manarola i Riomaggiore jest wpisana na Listę Światowego Dziedzictwa UNESCO.
Monterosso
Monterosso al Mare znajduje się w centrum małej naturalnej zatoki, chronionej małą sztuczną rafą, na Riwierze La Spezia. Jest to najbardziej wysunięta na północ wieś Cinque Terre.
Vernazzy
Vernazza to kolejne z pięciu miast regionu Cinque Terre. Vernazza to czwarte miasto jadące na północ. Nie ma ruchu samochodowego i jest jedną z najprawdziwszych „wiosek rybackich” na Riwierze Włoskiej.
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>