สร้างธีม
ในรูปแบบการใช้งาน:
☰ภาพยนตร์
แช่แข็ง
เพื่อตอบสนองต่อการเคลื่อนไหวเป็นเรื่องน่าขัน
Star Wars
คนถูกออกใหม่ Star Wars ภาพยนตร์
เวนเจอร์ส
ความสำเร็จอย่างมากสำหรับมาร์เวลและดิสนีย์
CSS สร้าง:
Cinque Terre
Cinque Terre (ห้าดินแดน) เป็นส่วนหนึ่งของริเวียร่าอิตาลี ชายฝั่งที่มีห้าหมู่บ้าน: มอนเต, Vernazza, Corniglia, Manarola และ Riomaggiore เป็นมรดกโลก
มอนเต
Monterosso al Mare ตั้งอยู่ที่ใจกลางของอ่าวธรรมชาติขนาดเล็กได้รับการคุ้มครองโดยปะการังเทียมขนาดเล็กในริเวียลาสเปเซีย มันเป็นหมู่บ้านเหนือสุดของ Cinque Terre
Vernazza
Vernazza เป็นอีกหนึ่งในห้าเมืองในภูมิภาค Cinque Terre Vernazza เป็นหนึ่งในสี่เมืองที่มุ่งไปทางเหนือ มันไม่มีการจราจรรถ, และเป็นหนึ่งใน truest "หมู่บ้านชาวประมง" ในริเวียร่าอิตาเลี่ยน
ธีมสี
ด้วย W3.CSS มันเป็นเรื่องง่ายที่จะปรับแต่งการใช้งานของคุณด้วยธีมสีของคุณเอง
ตัวอย่าง
<!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 ">ธีมที่กำหนดไว้ล่วงหน้า
ในการใช้งาน HTML คุณสามารถ จำกัด การใช้งานของสีโดยการเลือกเฉดสีที่แตกต่างจากสีที่กำหนดไว้ล่วงหน้า:
| W3 แดง | ลองมัน |
| W3 สีชมพู | ลองมัน |
| W3 ม่วง | ลองมัน |
| W3 ลึกสีม่วง | ลองมัน |
| W3-คราม | ลองมัน |
| W3 สีฟ้า | ลองมัน |
| W3 แสงสีฟ้า | ลองมัน |
| W3-ฟ้า | ลองมัน |
| W3-นกเป็ดน้ำ | ลองมัน |
| W3 เขียว | ลองมัน |
| W3 แสงสีเขียว | ลองมัน |
| W3 มะนาว | ลองมัน |
| W3-สีกากี | ลองมัน |
| W3 สีเหลือง | ลองมัน |
| W3-สีเหลืองอำพัน | ลองมัน |
| W3 ส้ม | ลองมัน |
| W3 ลึกส้ม | ลองมัน |
| W3-สีฟ้าเทา | ลองมัน |
| W3 น้ำตาล | ลองมัน |
| W3 เทา | ลองมัน |
| W3-สีเทาเข้ม | ลองมัน |
| W3 ดำ | ลองมัน |
| W3-w3ii | ลองมัน |
หนัง 2014
แช่แข็ง
เพื่อตอบสนองต่อการเคลื่อนไหวเป็นเรื่องน่าขัน
ดาวบันดาล
สัมผัสจับและทำดีอย่างแท้จริง
เวนเจอร์ส
ความสำเร็จอย่างมากสำหรับมาร์เวลและดิสนีย์
หนัง 2014
แช่แข็ง
เพื่อตอบสนองต่อการเคลื่อนไหวเป็นเรื่องน่าขัน
ดาวบันดาล
สัมผัสจับและทำดีอย่างแท้จริง
เวนเจอร์ส
ความสำเร็จอย่างมากสำหรับมาร์เวลและดิสนีย์
ธีมส์เอกชน
ด้วย W3.CSS มันเป็นเรื่องง่ายที่จะปรับแต่งการใช้งานกับชุดรูปแบบสีส่วนตัว
คุณสามารถเชื่อมโยงไปยังรูปแบบส่วนตัวใน <link> แท็กหรือคุณสามารถใส่ธีมเอกชนใน <style> tag:
ตัวอย่าง
<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>เพิ่มการไล่ระดับสี
หนึ่งผู้อ่านส่งมาให้เราข้อเสนอแนะนี้: คุณอาจต้องการที่จะพิจารณาเพิ่มการไล่ระดับสีสำหรับแต่ละธีม
ผมใช้ 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 ชุดรูปแบบสีฟ้า grey.css | ชุดรูปแบบสีฟ้าสีเทา |
| W3-theme-brown.css | ชุดรูปแบบสีสีน้ำตาล |
| W3-theme-cyan.css | ชุดรูปแบบสีฟ้า |
| W3-theme-เข้ม grey.css | ชุดรูปแบบสีเทาเข้ม |
| W3-theme-ลึก orange.css | ชุดรูปแบบสีส้มลึก |
| W3-theme-ลึก purple.css | ชุดรูปแบบสีสีม่วงเข้ม |
| W3-theme-green.css | ชุดรูปแบบสีเขียว |
| W3-theme-grey.css | ชุดรูปแบบสีเทา |
| W3-theme-indigo.css | ชุดรูปแบบสีคราม |
| W3-theme-khaki.css | ชุดรูปแบบสีกากี |
| W3-theme-แสง blue.css | ชุดรูปแบบสีฟ้าอ่อน |
| W3-theme-แสง 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 | ชุดรูปแบบสีเหลือง |