W3.CSS कलर थीम्स
रंग विषय-वस्तु
W3.CSS के साथ, रंगीन थीम के साथ अपने एप्लिकेशन को कस्टमाइज़ करना आसान है।
मूवी 2014
-
जमा हुआ
एनिमेशन की प्रतिक्रिया हास्यास्पद थी
-
हमारे सितारों में खोट है
स्पर्श करना, पकड़ना और वास्तव में अच्छी तरह से बनाया गया
-
द एवेंजर्स
मार्वल और डिज्नी के लिए एक बड़ी सफलता
«»
मूवी 2014
-
जमा हुआ
एनिमेशन की प्रतिक्रिया हास्यास्पद थी
-
हमारे सितारों में खोट है
स्पर्श करना, पकड़ना और वास्तव में अच्छी तरह से बनाया गया
-
द एवेंजर्स
मार्वल और डिज्नी के लिए एक बड़ी सफलता
«»
आपको बस एक पूर्वनिर्धारित (या घर का बना) विषय के लिए एक लिंक जोड़ना है:
उदाहरण
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://www.w3schools.com/lib/w3-theme-indigo.css">
पूर्वनिर्धारित विषय-वस्तु
ये W3.CSS में पूर्वनिर्धारित थीम हैं:
| w3-थीम-लाल | |
| w3-विषय-गुलाबी | |
| w3-विषय-बैंगनी | |
| w3-विषय-गहरे-बैंगनी | |
| w3-थीम-इंडिगो | |
| w3-विषय-नीला | |
| w3-विषय-हल्का-नीला | |
| w3-थीम-सियान | |
| w3-थीम-चैती | |
| w3-थीम-हरा | |
| w3-थीम-लाइट-ग्रीन | |
| w3-थीम-लाइम | |
| w3-विषय-खाकी | |
| w3-थीम-पीला | |
| w3-थीम-एम्बर | |
| w3-थीम-नारंगी | |
| w3-विषय-गहरे-नारंगी | |
| w3-विषय-नीला-ग्रे | |
| w3-विषय-भूरा | |
| w3-थीम-ग्रे | |
| w3-थीम-डार्क-ग्रे | |
| w3-थीम-ब्लैक | |
| w3-विषय-w3विद्यालय |
ग्रेडिएंट जोड़ना
एक पाठक ने हमें यह सुझाव भेजा है: आप प्रत्येक विषय के लिए एक ग्रेडिएंट जोड़ने पर विचार कर सकते हैं।
मैंने इस ढाल को बनाने के लिए नीले रंग की थीम से l2 और l1 रंगों का उपयोग किया है:
उदाहरण
.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%)}
डाउनलोड करने योग्य रंग थीम
Google के मटीरियल डिज़ाइन से प्रेरित कुछ डाउनलोड करने योग्य रंग थीम यहां दी गई हैं:
| शैली पत्रक | विवरण |
|---|---|
| w3-theme-amber.css | रंग थीम एम्बर |
| w3-थीम-ब्लैक.सीएसएस | रंग थीम काला |
| w3-विषय-नीला.css | रंग थीम नीला |
| w3-विषय-नीला-ग्रे.css | कलर थीम ब्लू ग्रे |
| w3-विषय-भूरा.css | रंग थीम भूरा |
| w3-थीम-सियान.css | रंग थीम सियान |
| w3-थीम-डार्क-ग्रे.css | कलर थीम डार्क ग्रे |
| w3-theme-deep-orange.css | कलर थीम डीप ऑरेंज |
| w3-theme-deep-purple.css | रंग थीम डीप पर्पल |
| w3-theme-green.css | रंग थीम हरा |
| w3-थीम-ग्रे.css | रंग थीम ग्रे |
| w3-थीम-इंडिगो.css | कलर थीम इंडिगो |
| w3-theme-khaki.css | रंग थीम खाकी |
| w3-विषय-प्रकाश-नीला.css | रंग थीम हल्का नीला |
| w3-थीम-लाइट-ग्रीन.css | रंग थीम हल्का हरा |
| w3-theme-lime.css | कलर थीम लाइम |
| w3-theme-orange.css | रंग थीम नारंगी |
| w3-थीम-गुलाबी.सीएसएस | रंग थीम गुलाबी |
| w3-थीम-purple.css | रंग थीम बैंगनी |
| w3-विषय-लाल.css | रंग थीम लाल |
| w3-theme-teal.css | कलर थीम टील |
| w3-विषय-पीला.css | रंग थीम पीला |