ธีมสี W3.CSS
ธีมสี
ด้วย W3.CSS การปรับแต่งแอปพลิเคชันของคุณด้วยธีมสีทำได้ง่าย
ภาพยนตร์ 2014
-
แช่แข็ง
การตอบสนองต่ออนิเมชั่นนั้นไร้สาระ
-
ดาวบันดาล
น่าสัมผัส น่าจับ น่าจับจองจริงๆ
-
ดิ อเวนเจอร์ส
ความสำเร็จที่ยิ่งใหญ่สำหรับ Marvel และ Disney
«»
ภาพยนตร์ 2014
-
แช่แข็ง
การตอบสนองต่ออนิเมชั่นนั้นไร้สาระ
-
ดาวบันดาล
น่าสัมผัส น่าจับ น่าจับจองจริงๆ
-
ดิ อเวนเจอร์ส
ความสำเร็จที่ยิ่งใหญ่สำหรับ Marvel และ Disney
«»
สิ่งที่คุณต้องทำคือเพิ่มลิงก์ไปยังธีมที่กำหนดไว้ล่วงหน้า (หรือแบบโฮมเมด):
ตัวอย่าง
<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-theme-สีแดง | |
| w3-theme-สีชมพู | |
| w3-theme-สีม่วง | |
| w3-theme-สีม่วงเข้ม | |
| w3-theme-คราม | |
| w3-theme-สีน้ำเงิน | |
| w3-theme-แสง-ฟ้า | |
| w3-theme-ฟ้า | |
| w3-theme-นกเป็ดน้ำ | |
| w3-theme-สีเขียว | |
| w3-theme-เขียวอ่อน | |
| w3-theme-มะนาว | |
| w3-theme-สีกากี | |
| w3-theme-สีเหลือง | |
| w3-theme-สีเหลืองอำพัน | |
| w3-theme-สีส้ม | |
| w3-theme-สีส้มเข้ม | |
| w3-theme-ฟ้า-เทา | |
| w3-theme-น้ำตาล | |
| w3-theme-สีเทา | |
| w3-theme-สีเทาเข้ม | |
| w3-theme-สีดำ | |
| w3-theme-w3schools |
การเพิ่มการไล่ระดับสี
ผู้อ่านคนหนึ่งส่งคำแนะนำนี้มาให้เรา: คุณอาจต้องการพิจารณาเพิ่มการไล่ระดับสีสำหรับแต่ละธีม
ฉันใช้สี 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-theme-black.css | ธีมสี สีดำ |
| w3-theme-blue.css | ธีมสี ฟ้า |
| w3-theme-blue-grey.css | ธีมสี ฟ้า เทา |
| w3-theme-brown.css | ธีมสี สีน้ำตาล |
| w3-theme-cyan.css | ธีมสี สีฟ้า |
| w3-theme-dark-grey.css | ธีมสี สีเทาเข้ม |
| w3-theme-deep-orange.css | ธีมสี สีส้มเข้ม |
| w3-theme-deep-purple.css | ธีมสี Deep Purple |
| w3-theme-green.css | ธีมสี สีเขียว |
| w3-theme-grey.css | ธีมสี สีเทา |
| w3-theme-indigo.css | ธีมสีคราม |
| w3-theme-khaki.css | ธีมสี สีกากี |
| w3-theme-light-blue.css | ธีมสี ฟ้าอ่อน |
| w3-theme-light-green.css | ธีมสี เขียวอ่อน |
| w3-theme-lime.css | ธีมสีมะนาว |
| w3-theme-orange.css | ธีมสีส้ม |
| w3-theme-pink.css | ธีมสี ชมพู |
| w3-theme-purple.css | ธีมสี สีม่วง |
| w3-theme-red.css | ธีมสี สีแดง |
| w3-theme-teal.css | ธีมสีน้าน |
| w3-theme-yellow.css | ธีมสี สีเหลือง |