/* โค้ดนี้ใช้เอฟเฟกต์การไล่ระดับสีเมื่อเลื่อนเมาส์ไปเหนือลิงก์*/
{
สี: #007c21;
การเปลี่ยนแปลง: สี .4s ง่าย;
-
a:โฮเวอร์ { สี: #00bf32; }การใช้ CSS3 คุณสามารถสร้างมุมโค้งมนสำหรับองค์ประกอบส่วนใหญ่ รวมถึงองค์ประกอบของแบบฟอร์ม รูปภาพ และแม้แต่ข้อความย่อหน้า โดยไม่ต้องเพิ่มมาร์กอัปหรือรูปภาพเพิ่มเติม
<!DOCTYPE html> <html lang="th"> <หัว> <meta charset="utf-8" /> <title>มุมโค้งมน</title> <link rel="stylesheet" href="css/rounded-corners.css" /> </หัว> <ร่างกาย> <div class="ทุกมุม"></div> <div class="มุมเดียว"></div> <div class="รูปไข่มุม"></div> <div class="circle"></div> </ร่างกาย> </html>
สี่ตัวอย่างที่ใช้ CSS มุมโค้งมน รวมถึงคำนำหน้าผู้จำหน่ายที่จำเป็นเพื่อรองรับเบราว์เซอร์ Android, Mobile Safari และ Safari เวอร์ชันเก่า สำหรับ .circle การใช้ 75px จะมีผลเช่นเดียวกับ 50% เนื่องจากองค์ประกอบมี 150像素*150像素
div {
พื้นหลัง: #999;
ลอย: ซ้าย;
ความสูง: 150px;
ระยะขอบ: 10px;
ความกว้าง: 150px;
-
.ทุกมุม {
-webkit-เส้นขอบ-รัศมี: 20px;
รัศมีเส้นขอบ: 20px;
-
.หนึ่งมุม {
-webkit-border-top-left-รัศมี: 75px;
ขอบบนซ้ายรัศมี: 75px;
-
.รูปไข่มุม {
-webkit-เส้นขอบ-รัศมี: 50px / 20px;
รัศมีเส้นขอบ: 50px / 20px;
-
.วงกลม {
-webkit-เส้นขอบ-รัศมี: 50%;
รัศมีชายแดน: 50%;
- div {
พื้นหลัง: #ff9;
เส้นขอบ: 5px ทึบ #326795;
ลอย: ซ้าย;
ความสูง: 150px;
ระยะขอบ: 10px;
ความกว้าง: 150px;
-
.example-1 {
/* ทำให้รัศมีของมุมบนซ้ายและมุมล่างขวาเป็น 10px และ
มุมบนขวาและซ้ายล่าง 20px */
รัศมีเส้นขอบ: 10px 20px;
-
.example-2 {
/* ทำให้รัศมีของมุมซ้ายบนเป็น 20px และมุมอื่นๆ ทั้งหมดเป็น 0 */
รัศมีเส้นขอบ: 20px 0 0;
-
.example-3 {
/* ทำให้รัศมีของมุมซ้ายบนเป็น 10px, มุมขวาบนเป็น 20px,
มุมล่างขวา 0 และมุมซ้ายล่าง 30px */
รัศมีเส้นขอบ: 10px 20px 0 30px;
--webkit-border-radius: r โดยที่ r คือรัศมีของเนื้อ ซึ่งแสดงเป็นความยาว (พร้อมหน่วย) ป้อน border-radius: r โดยที่ r คือรัศมีของเนื้อปลา ให้ใช้ค่าเดียวกันกับในขั้นตอนที่หนึ่ง นี่คือไวยากรณ์รูปแบบสั้นมาตรฐานสำหรับคุณสมบัตินี้-webkit-border-top-left-radius: r โดยที่ r คือรัศมีของมุมซ้ายบน แสดงเป็นความยาว (พร้อมหน่วย) ป้อน border-top-left-radius: r โดยใช้ค่าเดียวกันสำหรับ r เช่นเดียวกับในขั้นตอนแรก นี่คือไวยากรณ์รูปแบบยาวมาตรฐานสำหรับคุณสมบัตินี้ หากต้องการสร้างมุมบนขวา ให้ใช้มุม top-right หากต้องการสร้างมุมล่างขวา ให้ใช้ bottom-right เพื่อสร้างมุมซ้ายล่าง ให้ใช้ bottom-left-webkit-border-radius: x/y โดยที่ x คือรัศมีของเนื้อในทิศทางแนวนอน y คือรัศมีของเนื้อในทิศทางแนวตั้ง ทั้งสองแสดงเป็นความยาว (พร้อมหน่วย) . ป้อน border-radius: x/y โดยที่ x และ y เท่ากับค่าในขั้นตอนแรก-webkit-border-radius: r โดยที่ r คือรัศมีขององค์ประกอบ (พร้อมหน่วยความยาว) หากต้องการสร้างวงกลม ให้ใช้รูปแบบสั้นของไวยากรณ์ โดยที่ค่า r ควรเท่ากับครึ่งหนึ่งของความสูงหรือความกว้างขององค์ประกอบ ป้อน border-radius: r โดยที่ r คือรัศมีขององค์ประกอบ (พร้อมหน่วยความยาว) ซึ่งเท่ากับ r ในขั้นตอนแรก นี่คือไวยากรณ์มาตรฐานที่ไม่มีคำนำหน้า หมายเหตุ: เบราว์เซอร์รุ่นเก่าที่ไม่รองรับ border-radius จะแสดงเฉพาะองค์ประกอบที่มีมุมสี่เหลี่ยมเท่านั้น border-radius มีผลกับมุมขององค์ประกอบที่ใช้สไตล์เท่านั้น ไม่ใช่มุมขององค์ประกอบลูก ดังนั้น หากองค์ประกอบลูกมีพื้นหลัง พื้นหลังอาจปรากฏที่มุมขององค์ประกอบหลักตั้งแต่หนึ่งองค์ประกอบขึ้นไป ซึ่งจะส่งผลต่อรูปแบบมุมโค้งมน บางครั้งพื้นหลังขององค์ประกอบ (ไม่ใช่พื้นหลังขององค์ประกอบลูกที่นี่) จะแสดงผ่านมุมโค้งมน เพื่อหลีกเลี่ยงปัญหานี้ คุณสามารถเพิ่มกฎสไตล์หลังการประกาศ border-radius ขององค์ประกอบ: background-clip: padding-box;
ใช้ text-shadow เพื่อเพิ่มเอฟเฟกต์เงาแบบไดนามิกให้กับข้อความในย่อหน้า ชื่อเรื่อง และองค์ประกอบอื่นๆ โดยไม่ต้องใช้รูปภาพเพื่อแสดงข้อความ
text-shadow: . ป้อนค่าที่แสดงถึง x-offset (ออฟเซ็ตแนวนอน), y-offset (ออฟเซ็ตแนวตั้ง), blur-radius (รัศมีเบลอ) และ color ตามลำดับ (สามค่าแรกมีหน่วยความยาวและไม่มีเครื่องหมายจุลภาค ระหว่างค่าสี่ค่าที่แยกจากกัน) เช่น -2px 3px 7px #999text-shadow: . ป้อนค่าของ x-offset (ออฟเซ็ตแนวนอน), y-offset (ออฟเซ็ตแนวตั้ง), blur-radius (รัศมีเบลอ) และ color ตามลำดับ (สามค่าแรกมีหน่วยความยาวและไม่มีเครื่องหมายจุลภาค การแยกระหว่างค่าทั้งสี่) ค่าของ blur-radius เป็นทางเลือก ป้อน (ลูกน้ำ) ทำซ้ำขั้นตอนที่สองด้วยค่าที่แตกต่างกันสำหรับคุณสมบัติทั้งสี่<!DOCTYPE html> <html lang="th"> <หัว> <meta charset="utf-8" /> <title>เงาข้อความ</title> <link rel="stylesheet" href="css/text-shadow.css" /> </หัว> <ร่างกาย> <p class="basic">เงาพื้นฐาน</p> <p class="basic-negative">เงาพื้นฐาน</p> <p class="blur">รัศมีเบลอ</p> <p class="blur-inversed">รัศมีเบลอ</p> <p class="multiple">เงาข้อความหลายอัน</p> </ร่างกาย> </html>
ร่างกาย {
พื้นหลัง: #fff;
สี: #222;
แบบอักษร: 100%/1.05 เฮลเวติกา, ซานเซอริฟ;
ช่องว่างด้านบน: 20px;
-
พี {
สี: #222; /* เกือบดำ */
ขนาดตัวอักษร: 4.5em;
น้ำหนักตัวอักษร: ตัวหนา;
ระยะขอบ: 0 0 45px;
-
p: ลูกคนสุดท้าย {
ระยะขอบ: 0;
-
.พื้นฐาน {
ข้อความเงา: 3px 3px #aaa;
-
/* ใช้การชดเชยเชิงลบ คุณสามารถผสมค่าบวกและลบได้เช่นกัน */
.พื้นฐานลบ {
ข้อความเงา: -4px -2px #ccc; /* สีเทาอ่อนกว่า #aaa */
-
.เบลอ {
ข้อความเงา: 2px 2px 10px สีเทา;
-
.blur-ผกผัน {
สี: ขาว;
ข้อความเงา: 2px 2px 10px #000; /* black */
-
/* ตัวอย่างนี้มีสองเงา แต่คุณสามารถรวมไว้ได้
เพิ่มเติมโดยคั่นแต่ละรายการด้วยเครื่องหมายจุลภาค */
.หลายรายการ {
ข้อความเงา:
2px 2px สีขาว
6px 6px RGB (50,50,50,.25);
- คลาสเหล่านี้สาธิตเอฟเฟกต์ text-shadow หลายแบบ ตัวแรก ที่สอง และห้า ละเว้นค่ารัศมีการเบลอทั้งหมด คลาส .multiple บอกเราว่าสามารถเพิ่มสไตล์เงาหลายแบบให้กับองค์ประกอบเดียวได้ โดยใช้เครื่องหมายจุลภาคเพื่อแยกแอตทริบิวต์แต่ละชุด ด้วยวิธีนี้ คุณสามารถสร้างเอฟเฟกต์พิเศษและน่าสนใจได้โดยการรวมสไตล์เงาหลายแบบเข้าด้วยกัน
นั่นคือป้อน text-shadow: none; ไม่จำเป็นต้องป้อนแอตทริบิวต์นี้และใช้คำนำหน้าของผู้ผลิต
คุณสมบัติ text-shadow ยอมรับค่าสี่ค่า: x-offset พร้อมหน่วยความยาว, y-offset พร้อมหน่วยความยาว, blur-radius เพิ่มเติมพร้อมหน่วยความยาว และค่า color หากไม่ได้ระบุ blur-radius ค่าจะถือว่าเป็น 0 ค่า x-offset และ y-offset อาจเป็นจำนวนเต็มบวกหรือลบ ซึ่งหมายความว่า 1px และ -1px ใช้ได้ทั้งคู่ ค่า blur-radius ต้องเป็นจำนวนเต็มบวก ทั้งสามค่าสามารถเป็น 0 ได้ แม้ว่าไวยากรณ์ของ text-shadow จะคล้ายกับคุณสมบัติของเส้นขอบและพื้นหลัง แต่ก็ไม่สามารถระบุค่าคุณสมบัติที่แยกจากกันสี่ค่าได้ เช่น เส้นขอบและพื้นหลัง หากไม่ได้ระบุ text-shadow จะใช้ค่าเริ่มต้น none
ใช้คุณสมบัติ text-shadow เพื่อเพิ่มเงาให้กับข้อความขององค์ประกอบ และใช้คุณสมบัติ box-shadow เพื่อเพิ่มเงาให้กับองค์ประกอบนั้นเอง ชุดคุณสมบัติฐานจะเหมือนกัน แต่ box-shadow ยังอนุญาตให้ใช้คุณสมบัติทางเลือกสองรายการได้: คุณสมบัติคำหลัก inset และคุณสมบัติ spread (ใช้เพื่อขยายหรือย่อเงา)
แอตทริบิวต์ box-shadow ยอมรับค่า 6 ค่า ได้แก่ x-offset และ y-offset พร้อมหน่วยความยาว blur-radius ที่เป็นตัวเลือกพร้อมหน่วยความยาว คีย์เวิร์ดแทรกที่ไม่ inset ค่า spread ที่ไม่บังคับพร้อมหน่วยความยาว และค่า color หากไม่ได้ระบุค่า blur-radius และ spread ค่าเหล่านั้นจะถูกตั้งค่าเป็น 0
<!DOCTYPE html> <html lang="th"> <หัว> <meta charset="utf-8" /> <title>เงาของกล่อง</title> <link rel="stylesheet" href="css/box-shadow.css" /> </หัว> <ร่างกาย> <ระดับ div="เงา"> <p>เงาพร้อมเบลอ</p> </div> <div class="เงา-ลบ"> <p>เงาที่มีการชดเชยเชิงลบและการเบลอ</p> </div> <div class="shadow-spread"> <p>เงาพร้อมเบลอและกระจาย</p> </div> <div class="shadow-offsets-0"> <p>เงาพร้อมออฟเซ็ตเป็นศูนย์ เบลอ และกระจาย</p> </div> <div class="inset-shadow"> <p>แทรกเงา</p> </div> <div class="หลาย"> <p>หลายเงา</p> </div> <div class="shadow-negative-spread"> <p>เงาที่มีการเบลอและการแพร่กระจายเชิงลบ</p> </div> </ร่างกาย> </html>
ร่างกาย {
พื้นหลัง: #000;
สี: #fff;
-
h1 {
ตระกูลฟอนต์: sans-serif;
ขนาดตัวอักษร: 2.25em;
ความสูงของเส้น: 1.1;
การจัดแนวข้อความ: กึ่งกลาง;
-
/* หมายเหตุ: URL ภาพพื้นหลังแตกต่างจากตัวอย่างที่แสดงในหนังสือ เนื่องจากฉันได้วางรูปภาพไว้ในโฟลเดอร์ย่อย (เรียกว่า "img") ตามปกติเมื่อจัดระเบียบไซต์ ฉันคิดว่าคงจะเป็นประโยชน์สำหรับคุณในการดูวิธีสร้าง URL ภาพพื้นหลังของคุณภายใต้สถานการณ์เหล่านี้ โปรดทราบว่า URL นั้นสัมพันธ์กับตำแหน่งของสไตล์ชีต ไม่ใช่หน้า HTML ที่แสดงรูปภาพ */
.ไนท์สกาย {
สีพื้นหลัง: น้ำเงิน; /* สีสำรอง */
ภาพพื้นหลัง:
URL(../img/ufo.png)
URL(../img/stars.png)
URL(../img/stars.png)
url(../img/sky.png);
ตำแหน่งพื้นหลัง:
50% 102%,
100% -150px,
0 -150px,
50% 100%;
พื้นหลังซ้ำ:
ไม่ซ้ำ
ไม่ซ้ำ
ไม่ซ้ำ
ทำซ้ำ-x;
ความสูง: 300px;
ระยะขอบ: 25px auto 0; /* แตกต่างจากหนังสือเล็กน้อย */
ช่องว่างด้านบน: 36px;
ความกว้าง: 75%;
- โปรแกรมด้านบนใช้เพื่อสาธิตผลของการใช้ box-shadow เพื่อเพิ่มเงาตั้งแต่หนึ่งเงาขึ้นไป ห้าคลาสแรกแต่ละคลาสใช้สไตล์การแรเงาที่แตกต่างกัน คลาสสุดท้ายใช้เงาสองอัน (สามารถนำไปใช้เพิ่มเติมได้) เบราว์เซอร์ที่ไม่เข้าใจ box-shadow จะเพิกเฉยต่อกฎสไตล์ CSS เหล่านี้ และแสดงผลหน้าเว็บโดยไม่มีเงา
-webkit-box-shadow: . ป้อนค่าที่แสดงถึง x-offset , y-offset , blur-radius , spread และ color ตามลำดับ (สี่ค่าแรกมีหน่วยความยาว) เช่น 2px 2px 5px #333 . ป้อน box-shadow: และทำซ้ำขั้นตอนที่สอง-webkit-box-shadow: . ป้อนค่าที่แสดงถึง x-offset , y-offset , blur-radius , spread และ color ตามลำดับ (สี่ค่าแรกมีหน่วยความยาว) เช่น 2px 2px 5px #333 . ป้อน inset หลังเครื่องหมายโคลอน จากนั้นเว้นวรรค (คุณสามารถป้อน inset และเว้นวรรคก่อนขั้นตอนที่ 2 ได้เช่นกัน) ป้อน box-shadow: และทำซ้ำขั้นตอนที่สองและสาม-webkit-box-shadow: . ป้อนค่าที่แสดงถึง x-offset , y-offset , blur-radius , spread และ color ตามลำดับ (สี่ค่าแรกมีหน่วยความยาว) เช่น 2px 2px 5px #333 . หากจำเป็น ให้รวมคำหลัก inset เข้าไปด้วย ป้อนลูกน้ำ ทำซ้ำขั้นตอนที่สองด้วยค่าที่แตกต่างกันสำหรับแต่ละแอตทริบิวต์ ป้อน box-shadow: และทำซ้ำขั้นตอนที่ 2-4-webkit-box-shadow: none; ใส่ box-shadow: none; หมายเหตุ: ค่า x-offset , y-offset และค่า spread อาจเป็นจำนวนเต็มบวกหรือลบ ค่า blur-radius ต้องเป็นจำนวนเต็มบวก ทั้งสามค่าสามารถเป็นศูนย์ได้ คำหลัก inset ช่วยให้สามารถวางเงาภายในองค์ประกอบได้
สามารถใช้พื้นหลังหลายแบบกับองค์ประกอบเกือบทุกชนิด
<!DOCTYPE html> <html lang="th"> <หัว> <meta charset="utf-8" /> <title>หลายพื้นหลัง</title> <link rel="stylesheet" href="css/multiple-wallpapers.css" /> </หัว> <ร่างกาย> <div class="ท้องฟ้ายามค่ำคืน"> <h1>ในท้องฟ้ายามค่ำคืน...</h1> </div> </ร่างกาย> </html>
-
.ไนท์สกาย {
สีพื้นหลัง: น้ำเงิน; /* สีทางเลือก */
ภาพพื้นหลัง:
URL(../img/ufo.png)
URL(../img/stars.png)
URL(../img/stars.png)
url(../img/sky.png);
ตำแหน่งพื้นหลัง:
50% 102%,
100% -150px,
0 -150px,
50% 100%;
พื้นหลังซ้ำ:
ไม่ซ้ำ
ไม่ซ้ำ
ไม่ซ้ำ
ทำซ้ำ-x;
ความสูง: 300px;
ระยะขอบ: 25px auto 0; /* แตกต่างจากหนังสือเล็กน้อย */
ช่องว่างด้านบน: 36px;
ความกว้าง: 75%;
-ใช้ภาพพื้นหลังหลายรูปกับองค์ประกอบเดียว (ไม่จำเป็นต้องใช้คำนำหน้าผู้ขาย)
ป้อนbackground-color: b โดยที่ b คือสีพื้นหลังสำรองที่คุณต้องการใช้กับองค์ประกอบ ป้อน background-image: u โดยที่ u คือรายการ url ที่อ้างอิงโดยพาธสัมบูรณ์หรือแบบสัมพัทธ์ (คั่นด้วยเครื่องหมายจุลภาค สำหรับเบราว์เซอร์ที่รองรับหลายพื้นหลัง รูปภาพจะซ้อนกันหลายชั้นและทับซ้อนกัน รูปภาพแรกในรายการคั่นด้วยเครื่องหมายจุลภาค . image ที่ด้านบน ) ป้อน background-position: p โดยที่ p คือคู่ของ x-offset และ y-offset (อาจเป็นค่าบวกหรือลบก็ได้ โดยมีหน่วยความยาวหรือคีย์เวิร์ด เช่น center top ) ชุดต่างๆ คั่นด้วยเครื่องหมายจุลภาค . สำหรับแต่ละ url ที่ระบุในขั้นตอนที่ 2 ควรมีชุดของ x-offset และ y-offset ป้อน background-repeat: r โดยที่ r คือค่า repeat-x , repeat-y หรือ no-repeat คั่นด้วยเครื่องหมายจุลภาค โดยมีค่า 1 ค่าสำหรับแต่ละ url ที่ระบุในขั้นตอนที่ 2สำหรับภาพพื้นหลังหลายภาพ คุณสามารถใช้ไวยากรณ์รูปแบบสั้นมาตรฐานได้ โดยใช้เครื่องหมายจุลภาคเพื่อแยกพารามิเตอร์พื้นหลังแต่ละชุด ประโยชน์ของการนำเสนอนี้คือ นักพัฒนาสามารถระบุสีพื้นหลังอื่นหรือรูปภาพสำหรับเบราว์เซอร์รุ่นเก่าได้
.ไนท์สกาย {
/* ทางเลือกที่มีทั้งสีและรูปภาพ */
พื้นหลัง: url กองทัพเรือ (../img/ufo.png) ไม่ซ้ำตรงกลางด้านล่าง;
/* เพื่อรองรับเบราว์เซอร์ */
พื้นหลัง:
url(../img/ufo.png) ไม่ทำซ้ำ 50% 102%,
url (../img/stars.png) ไม่ทำซ้ำ 100% -150px,
url (../img/stars.png) ไม่ทำซ้ำ 0 -150px,
url (../img/sky.png) ทำซ้ำ-x 50% 100%;
ความสูง: 300px;
ระยะขอบ: 25px อัตโนมัติ 0;
ช่องว่างด้านบน: 36px;
ความกว้าง: 75%;
-<!DOCTYPE html> <html lang="th"> <หัว> <meta charset="utf-8" /> <title>พื้นหลังไล่ระดับสี</title> <link rel="stylesheet" href="css/gradients.css" /> </หัว> <ร่างกาย> <div class="vertical-down"><p>ค่าเริ่มต้น</p></div> <div class="vertical-up"><p>ไปด้านบน</p></div> <div class="horizontal-rt"><p>ไปทางขวา</p></div> <div class="horizontal-lt"><p>ไปทางซ้าย</p></div> <div class="angle-bot-rt"><p>ถึง <br />มุมขวาล่าง</p></div> <div class="angle-bot-lt"><p>ถึง <br />ซ้ายล่าง</p></div> <div class="angle-top-rt"><p>ไปทางขวาบน</p></div> <div class="angle-top-lt"><p>ไปทางซ้ายบน</p></div> <div class="angle-120deg"><p>120deg</p></div> <div class="angle-290deg"><p>290deg</p></div> <ส่วนชั้น="รัศมี"> <div class="radial-center"><p>ค่าเริ่มต้น</p></div> <div class="radial-top"><p>ที่ด้านบน</p></div> <div class="radial-size-1"><p>100px, 50px</p></div> <div class="radial-size-2"><p>70% 90% ที่<br />ซ้ายล่าง</p></div> <div class="radial-various-1"><p>หลากหลาย 1</p></div> <div class="radial-various-2"><p>หลากหลาย 2</p></div> </ส่วน> <section class="สีหยุด"> <div class="color-stops-1"><p>สีเหลือง 10% สีเขียว</p></div> <div class="color-stops-2"><p>ไปขวาบน, เหลือง, <br>เขียว 70%, <br>น้ำเงิน</p></div> </ส่วน> </ร่างกาย> </html>
ร่างกาย {
ช่องว่างภายใน: 1.25em; /* 20px/16px ดังนั้น 20px ในแต่ละด้าน */
ขนาดตัวอักษร: 100%;
-
div {
ลอย: ซ้าย;
ความสูง: 150px;
ระยะขอบ: 10px;
ความกว้าง: 150px;
-
พี {
สี: #fff;
แบบอักษร: ตัวหนา 1.25em/1 sans-serif; /* 20px/16px */
ช่องว่างด้านบน: 1.65em; /* 33px/16px */
การจัดแนวข้อความ: กึ่งกลาง;
-
/* หมายเหตุ: การไล่ระดับสีด้านล่างอยู่ในไวยากรณ์ CSS3 มาตรฐาน เบราว์เซอร์ที่รองรับคือ Chrome 26+, Firefox 16+, IE 10+ และ Opera 12.10+ สำหรับสิ่งเดียวกัน เอฟเฟกต์การไล่ระดับสี แต่มีรหัสนำหน้าผู้ขายรวมอยู่ด้วย ดังนั้นการไล่ระดับสีจะทำงานบนเบราว์เซอร์รุ่นเก่าหลายตัว พื้นหลังที่มีความคิดเห็น "สำรอง" คือสีที่จะแสดงในเบราว์เซอร์ ที่ไม่สนับสนุนไวยากรณ์การไล่ระดับสี คุณสามารถใช้ภาพพื้นหลังเป็นทางเลือกได้เช่นกัน (ไม่ว่าจะใช้เดี่ยวๆ หรือใช้ร่วมกับสีก็ได้) ตัวอย่างเช่น พื้นหลัง: url สีแดง (gradient-image.jpg) ไม่ทำซ้ำ; . */
/* การไล่ระดับสีเชิงเส้น
-
/* :::: แนวตั้ง :::: */
.แนวตั้งลง {
พื้นหลัง: เงิน; /* ทางเลือก */
/* การไล่ระดับสีเริ่มต้น ดังนั้นคุณไม่จำเป็นต้องระบุ "ไปด้านล่าง" ก่อนสี */
พื้นหลัง: การไล่ระดับสีเชิงเส้น (สีเงิน, สีดำ);
-
.แนวตั้งขึ้น {
พื้นหลัง:สีเงิน;
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านบน, สีเงิน, สีดำ);
-
/* :::: แนวนอน :::: */
.horizontal-rt {
พื้นหลัง: เงิน; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวา, สีเงิน, สีดำ);
-
.horizontal-lt {
พื้นหลัง: เงิน; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางซ้าย, สีเงิน, สีดำ);
-
/* :::: มุมทแยง :::: */
/* หมายเหตุ: ตัวเลขในหน้า 377 แสดงสีน้ำเป็นสีสำรอง แต่ฉันได้เปลี่ยนแล้ว
เป็นสีกรมท่าด้านล่างเพราะข้อความสีขาวจะอ่านง่ายกว่าบนพื้นหลังสีกรมท่า */
.มุม-bot-rt {
พื้นหลัง: น้ำเงิน; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวาล่าง, น้ำ, น้ำเงิน);
-
.มุมบอท-lt {
พื้นหลัง: น้ำเงิน; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางซ้ายล่าง, น้ำ, น้ำเงิน);
-
.มุมบน-rt {
พื้นหลัง: น้ำเงิน; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวาบน, น้ำ, น้ำเงิน);
-
.angle-top-lt {
พื้นหลัง: น้ำเงิน; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ซ้ายบน, น้ำ, น้ำเงิน);
-
/* :::: มุมผ่านองศา :::: */
.มุม-120deg {
พื้นหลัง: น้ำเงิน; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีเชิงเส้น (120 องศา, น้ำ, น้ำเงิน);
-
.มุม-290deg {
พื้นหลัง: น้ำเงิน; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีเชิงเส้น (290 องศา, น้ำ, น้ำเงิน);
-
/* การไล่ระดับสีแบบเรเดียล
-
/* :::: รัศมี :::: */
.รัศมี พี {
ข้อความเงา: 0 0 3px #000;
-
.radial-ศูนย์ {
พื้นหลัง: สีแดง; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีแบบรัศมี (สีเหลือง, สีแดง); /* default */
-
.radial-top {
พื้นหลัง: สีแดง; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีแบบรัศมี (ด้านบน, สีเหลือง, สีแดง);
-
.รัศมีขนาด-1 {
พื้นหลัง: สีแดง; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีแบบรัศมี (100px 50px, สีเหลือง, สีแดง);
-
.รัศมีขนาด-2 {
พื้นหลัง: สีแดง; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีแบบรัศมี (70% 90% ที่ด้านซ้ายล่าง, สีเหลือง, สีแดง);
-
.radial-ต่างๆ-1 {
พื้นหลัง: สีแดง; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีแบบรัศมี (ด้านที่ใกล้ที่สุดที่ 70px 60px, เหลือง, มะนาว, แดง);
-
.radial-ต่างๆ-2 {
พื้นหลัง: สีแดง; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีแบบรัศมี (30px 30px ที่ 65% 70%, เหลือง, มะนาว, แดง);
-
/* การไล่ระดับสีเชิงเส้นพร้อมการหยุดสี
-
.color-stops div {
ขอบล่าง: 30px;
-
.color-stop p {
ช่องว่างด้านบน: 25px;
ข้อความเงา: 0 0 3px #000;
-
.color-stops-2 p {
ขนาดตัวอักษร: 18px;
ความสูงของเส้น: 1.05;
-
.สีหยุด-1 {
พื้นหลัง: สีเขียว; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีเชิงเส้น (สีเหลือง 10%, สีเขียว);
-
.สีหยุด-2 {
พื้นหลัง: สีเขียว; /* ทางเลือก */
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวาบน, เหลือง, เขียว 70%, น้ำเงิน);
- ป้อน background: color หรือ background-color: color โดยที่ color อาจเป็นเลขฐานสิบหก ค่า RGB หรือชื่อสีอื่นๆ ที่รองรับก็ได้ ทางที่ดีที่สุดที่จะไม่ใช้ค่า RGBA, HSL หรือ HSLA เป็นสีพื้นหลังสำรอง (ไม่ต้องกังวลหากคุณไม่ได้วางแผนที่จะรองรับ IE) เนื่องจาก IE8 และเวอร์ชันก่อนหน้าไม่รองรับ
background: linear-gradient( หากคุณต้องการให้ทิศทางการไล่ระดับสีจากบนลงล่าง (ทิศทางเริ่มต้น) คุณสามารถข้ามขั้นตอนนี้ได้ เพิ่มลูกน้ำหลังทิศทางอินพุต และทิศทางอ้างอิง to top to right to bottom right to top right ฯลฯ หรือเพิ่มลูกน้ำหลังทิศทางอินพุต โดยที่ทิศทางอ้างอิงถึงค่ามุม (เช่น 45deg , 107deg ฯลฯ) กำหนดสีไล่ระดับสีตาม "สีที่ระบุ" ที่จะกล่าวถึงในภายหลัง );background: radial-gradient( ระบุรูปร่างของการไล่ระดับสี หากคุณต้องการระบุขนาด คุณสามารถกำหนดได้ด้วยตัวเองตามขนาดที่ระบุในขั้นตอนที่ 3 หรือป้อน circle หรือ ellipse ระบุขนาดของ การไล่ระดับสี หากคุณต้องการให้ขนาดเป็นค่าที่ระบุโดยอัตโนมัติ (ค่าเริ่มต้นคือ ·มุมที่ไกลที่สุด· ซึ่งเป็นมุมที่ไกลที่สุด) มิฉะนั้น ให้ป้อนค่าความยาวที่แสดงถึงความกว้างและความสูงของการไล่ระดับสี (เช่น 200px หรือ 7em ) หรือ คู่ของค่าที่แสดงถึงความกว้างและความสูง ( 390px 175px หรือ 60% 85% ) โปรดทราบว่าหากใช้เพียงค่าเดียว ค่าดังกล่าวไม่สามารถเป็นเปอร์เซ็นต์หรือป้อน closest-side , farthest-side , closest-corner หรือ farthest-corner คีย์เวิร์ดเหล่านี้แสดงถึงระยะการไล่ระดับสีที่สัมพันธ์กับจุดศูนย์กลาง คุณสามารถข้ามขั้นตอนนี้ at right หากต้องการให้เริ่มการไล่ระดับสีที่ at top ขององค์ประกอบ at bottom left at top right ฯลฯ เพื่อแสดงค่าของตำแหน่งกึ่งกลางการไล่ระดับสี หรือป้อนคู่พิกัดที่แสดงถึงตำแหน่งกึ่งกลางการไล่ระดับสี โดยเริ่มจาก at เช่น at 200px 43px at 30% 40% at 50% -10px ฯลฯ กำหนดสีไล่ระดับสี ); ใช้แอตทริบิวต์ opacity เพื่อแก้ไขความโปร่งใสขององค์ประกอบ วิธีการคือการป้อน opacity: x โดยที่ x แสดงถึงความทึบขององค์ประกอบ (ทศนิยมสองตำแหน่งโดยไม่มีหน่วย)
ค่าเริ่มต้นของ opacity คือ 1 (ทึบแสงโดยสมบูรณ์) และช่วงคือ 0~1
การใช้แอตทริบิวต์ opacity และแอตทริบิวต์หลอก :hover คุณสามารถสร้างเอฟเฟกต์ที่น่าสนใจและใช้งานได้จริง ตัวอย่างเช่น img { opacity: .75; } สามารถตั้งค่ารูปภาพให้ทึบแสงได้ 75% โดยค่าเริ่มต้น img:hover { opacity: 1; } อาจทำให้องค์ประกอบทึบแสงเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบนั้น เอฟเฟกต์นี้มักพบเห็นได้เมื่อเชื่อมโยงภาพขนาดย่อกับเวอร์ชันขนาดเต็ม สำหรับผู้เยี่ยมชม การลอยตัวช่วยเพิ่มการเคลื่อนไหวของภาพ
แอตทริบิวต์ opacity และสีพื้นหลังโปร่งใสที่ตั้งค่าโดยใช้ RGBA หรือ HSLA เป็นสองแนวคิดที่สับสนได้ง่าย opacity ส่งผลต่อองค์ประกอบทั้งหมด (รวมถึงเนื้อหา) ในขณะที่ background-color: rgba(128,0,64,.6); การตั้งค่าดังกล่าวส่งผลต่อความโปร่งใสของพื้นหลังเท่านั้น
การใช้องค์ประกอบหลอก :before และ :after เป็นวิธีที่ยอดเยี่ยมในการเพิ่มเอฟเฟกต์การออกแบบอันน่าทึ่งให้กับเพจของคุณ สามารถรวมกับแอตทริบิวต์ content เพื่อสร้างเนื้อหาที่เรียกว่าสร้างขึ้น เนื้อหาที่สร้างขึ้นหมายถึงเนื้อหาที่สร้างผ่าน CSS แทนที่จะเป็น HTML
- <p>บริเวณนี้เป็นพื้นที่ที่เงียบสงบที่สุดแห่งหนึ่งของวิลล่า ขณะที่ฉันเดินไปรอบๆ เพลิดเพลินไปกับร่มเงาของต้นมะเดื่อและลอเรล และขับกล่อมด้วยน้ำที่สาดจากน้ำพุประติมากรรมสองแห่ง ฉันก็อดไม่ได้ที่จะคิดว่า <a href="victoria.html" class="more">อ่านเพิ่มเติม</a></p> -
/* เนื้อหาที่สร้างขึ้น */
.เพิ่มเติม:หลังจาก {
เนื้อหา: " "";
- ด้วยโค้ดข้างต้น องค์ประกอบที่มี class="more" สามารถแสดงลูกศรคู่หลังจากนั้นได้ หากจำเป็นต้องเปลี่ยนแปลงในอนาคต คุณเพียงแค่ต้องแก้ไขคลาส .more โดยไม่ต้องเปลี่ยนหน้า HTML จำนวนมาก
ข้อความแสดงอย่างรวดเร็วในเบราว์เซอร์ แต่รูปภาพมักจะทำให้การโหลดหน้าเว็บช้าลง เพื่อแก้ไขปัญหานี้ คุณสามารถรวมรูปภาพหลายรูปเป็นภาพพื้นหลังเดียว ( sprite ) จากนั้นควบคุมว่าส่วนใดของรูปภาพที่จะแสดงผ่าน CSS โดยใช้แอตทริบิวต์ background-position
.documents ลี {
ขอบบน: .45em;
-
/* แต่ละลิงค์ใน HTML มีคลาสนี้ */
.ไอคอน {
จอแสดงผล: อินไลน์บล็อก;
ความสูงของเส้น: 1.1;
ขนาดตัวอักษร: .875em;
min-height: 16px; /* ตั้งค่าความสูงของไอคอนเพื่อไม่ให้ถูกตัดออกเลย */
ช่องว่างภายในซ้าย: 23px;
ช่องว่างด้านบน: 2px;
/* อนุญาตให้วางตำแหน่งไอคอนโดยสัมพันธ์กับองค์ประกอบด้วย class="icon" ใน HTML */
ตำแหน่ง: ญาติ;
-
.icon: ก่อน {
ภาพพื้นหลัง: url(../img/sprite.png);
เนื้อหา: " ";
จอแสดงผล: บล็อก;
ความสูง: 16px; /* ความสูงของไอคอน */
left: 0; /* ค่าเริ่มต้น เปลี่ยนสิ่งนี้หากต้องการให้ไอคอนปรากฏในจุดอื่น */
ตำแหน่ง: แน่นอน;
ความกว้าง: 16px; /* ความกว้างของไอคอน */
top: 0; /* ค่าเริ่มต้น เปลี่ยนสิ่งนี้หากต้องการให้ไอคอนปรากฏในจุดอื่น */
-
/* เปลี่ยนตำแหน่งของภาพต่อเรียงสำหรับชื่อไฟล์เอกสารใดๆ ที่ลงท้ายด้วย .xls */
a[href$=".xls"]:ก่อน {
ตำแหน่งพื้นหลัง: -17px 0;
-
/* เปลี่ยนตำแหน่งของภาพต่อเรียงสำหรับชื่อไฟล์เอกสารใดๆ ที่ลงท้ายด้วย .docx */
a[href$=".docx"]:ก่อน {
ตำแหน่งพื้นหลัง: -34px 0;
- sprite สามารถนำไปใช้กับองค์ประกอบจำนวนเท่าใดก็ได้ ในตัวอย่างข้างต้น ใช้ .icon:before เพื่อให้ได้เอฟเฟกต์ที่ต้องการ ด้วยวิธีนี้ sprite คือภาพพื้นหลังของพื้นที่ที่สร้างโดย content: " "; ตั้งค่าให้ display: block; เพื่อให้คุณสามารถตั้งค่าความสูงและความกว้างให้ตรงกับขนาดของไอคอนได้ หากไม่มีคุณสมบัติทั้งสามนี้ รูปภาพจะไม่แสดง ด้วยการใช้ background-position คุณสามารถวางไอคอนที่ถูกต้องในตำแหน่งนั้นได้
นี่เป็นการสรุปบทความเกี่ยวกับการใช้ CSS3 เพื่อปรับปรุงเอฟเฟกต์สไตล์ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการปรับปรุงเอฟเฟกต์สไตล์ CSS3 โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรืออ่านบทความที่เกี่ยวข้องด้านล่าง ฉันหวังว่าคุณจะรองรับ downcodes ในอนาคต