CSS เป็นภาษาการออกแบบเว็บไซต์ที่เป็นที่รู้จักและใช้กันอย่างแพร่หลาย ในแผนเวอร์ชัน 3 (CSS3) มีการเพิ่มคุณสมบัติใหม่บางอย่างที่สามารถประหยัดเวลาได้ แม้ว่าเอฟเฟกต์เหล่านี้จะได้รับการสนับสนุนในเบราว์เซอร์เวอร์ชันล่าสุดเท่านั้น แต่ก็ยังมีความจำเป็นและน่าสนใจที่จะทราบเกี่ยวกับผลกระทบเหล่านี้ Bao Fengbinbin จะแสดง 5 เทคโนโลยีใหม่ที่น่าสนใจใน CSS ในบทความนี้: มุมโค้งมน, มุมโค้งมนแต่ละส่วน, ความทึบแสง, เงา และการปรับขนาดองค์ประกอบ
1: เครื่องหมายพื้นฐาน
ก่อนที่เราจะเริ่มบทช่วยสอนนี้ เรามาสร้างมาร์กอัปพื้นฐานที่จะใช้ตลอดบทช่วยสอนกันดีกว่า
xHTML ของเราต้องการองค์ประกอบ div ต่อไปนี้:
#round ใช้โค้ด CSS3 เพื่อให้ได้มุมโค้งมน
#อินดี้ทาเนื้อตัวละไม่กี่ตัว
#opacity สาธิตวิธีการใช้ความทึบของ CSS3 ใหม่
#shadow แสดงวิธีใช้ CSS3 เพื่อให้ได้เอฟเฟกต์เงาโดยไม่ต้องใช้ Photoshop
#resize แสดงวิธีใช้ CSS บางส่วนเพื่อให้ได้เอฟเฟกต์การปรับขนาด
โดยสรุป xHTML ของเราควรมีลักษณะดังนี้:
ต่อไปนี้เป็นเนื้อหาที่ยกมา: <ร่างกาย>  |
มาสร้างไฟล์ CSS พื้นฐานกัน:
ต่อไปนี้เป็นเนื้อหาที่ยกมา:
|
ดังที่คุณเห็นด้านบน เราได้กำหนดความกว้างและความสูงให้กับแต่ละองค์ประกอบ div ไว้ที่ 300px และปล่อยให้องค์ประกอบลอยไปทางซ้าย โดยปล่อยให้ div ของหน้าทั้งหมดไว้ให้เราจัดสไตล์ในภายหลัง
2: มุมโค้งมน
ปัจจุบันมีหลายวิธีในการสร้างเนื้อปลา แต่วิธีเหล่านี้ยุ่งยากทั้งหมด วิธีการที่พบบ่อยที่สุด: ขั้นแรก คุณต้องสร้างรูปภาพที่มีมุมโค้งมน จากนั้น คุณต้องสร้างองค์ประกอบ html จำนวนมาก และใช้รูปภาพพื้นหลังเพื่อแสดงมุมโค้งมน คุณและฉันรู้กระบวนการเฉพาะเป็นอย่างดี
ปัญหานี้แก้ไขได้อย่างง่ายดายใน CSS3 ด้วยคุณสมบัติที่เรียกว่า "border-radius" ขั้นแรกเราสร้างองค์ประกอบ div สีดำและกำหนดเส้นขอบสีดำให้กับองค์ประกอบนั้น เส้นขอบเป็นข้อกำหนดเบื้องต้นเพื่อให้บรรลุผลของแอตทริบิวต์ "border-radius"
แบบนี้:
ต่อไปนี้เป็นเนื้อหาที่ยกมา: #กลม { |
ตอนนี้คุณได้สร้างองค์ประกอบ div แล้ว มันก็ดูเหมือนที่คุณคาดหวังไว้ สูง 300px เป็นเชิงมุมและเป็นสีดำ ตอนนี้เรามาเพิ่มโค้ดเพื่อใช้มุมโค้งมนกัน มันง่ายมาก และต้องใช้โค้ดเพียงสองบรรทัดเท่านั้น
ต่อไปนี้เป็นเนื้อหาที่ยกมา: #กลม { |
ที่นี่ เราได้เพิ่มโค้ดที่คล้ายกันสองบรรทัด -moz- สำหรับเบราว์เซอร์ Firefox และ -webkit- สำหรับเบราว์เซอร์ Safari/Chrome
หมายเหตุ: จนถึงตอนนี้ เบราว์เซอร์ IE ยังไม่รองรับแอตทริบิวต์ border-radius ดังนั้นหากคุณต้องการให้ IE มีเอฟเฟกต์มุมโค้งมน คุณจะต้องเพิ่มมุมโค้งมนแยกกัน
การแปลตามตัวอักษรของคุณสมบัติ border-radius คือรัศมีของเส้นขอบ เช่นเดียวกับ Photoshop ยิ่งค่าของมันมากเท่าไร มุมโค้งมนก็จะยิ่งมากขึ้นเท่านั้น
3: มุมโค้งมนส่วนบุคคล
ถ้าทำตามนิสัยเดิมจะเสียเวลามาก ตอนนี้ CSS3 แก้ได้เร็ว!
ตอนนี้เราแค่อยากให้มุมขวาบนและมุมขวาล่างของ div ถูกปัดเศษ ดังนั้นเราจึงต้องทำการแก้ไขเพียงเล็กน้อยเท่านั้น:
ต่อไปนี้เป็นเนื้อหาที่ยกมา: #อินดี้ { |
ลองจินตนาการดูว่าจะใช้องค์ประกอบใดในหน้าเว็บ ใช่แล้ว!
4: แก้ไขความทึบโดยใช้ CSS3
ตอนนี้คุณสามารถเขียนโค้ดสองสามบรรทัดตามอัตภาพเพื่อใช้เอฟเฟกต์ความทึบ (แฮ็ก) อย่างไรก็ตาม CSS3 ทำให้กระบวนการนี้ง่ายขึ้น
บรรทัดโค้ดนี้ง่ายต่อการจดจำ เพียง "opacity: value;":
ต่อไปนี้เป็นเนื้อหาที่ยกมา: #ความทึบ { สีพื้นหลัง: #000; ความทึบ: 0.3; - |
5: เอฟเฟกต์เงา
มีหลายวิธีในการทำให้ได้เงา วิธีที่พบบ่อยที่สุดคือการใช้ Photoshop เพื่อสร้างภาพเงาแล้วนำไปใช้กับคุณสมบัติพื้นหลัง แต่ CSS3 ทำให้งานของคุณมีประสิทธิภาพมากขึ้น น่าเสียดายที่ปัจจุบันมีเพียง Safari และ Chrome เท่านั้นที่รองรับฟีเจอร์ใหม่นี้
ต้องใช้โค้ดเพียงบรรทัดเดียว แต่มีค่าที่แตกต่างกัน 4 ค่า:
ต่อไปนี้เป็นเนื้อหาที่ยกมา: -webkit-box-shadow: 3px 5px 10px #ccc; |
ให้ฉันอธิบายว่าค่าทั้งสี่นี้แสดงถึงอะไร 3px แรกคือระยะห่างในแนวนอน (แนวนอน) ระหว่างเงาที่ระบุและองค์ประกอบ div และ 5px ที่สองหมายถึงระยะห่างในแนวตั้ง (แนวตั้ง) ระหว่างเงาและ div 10px ที่สามหมายถึงความเบลอของเงา (คล้ายกับขนนกใน Photoshop) ยิ่งค่ามากเท่าไรก็ยิ่งละเอียดอ่อนมากขึ้นเท่านั้น ทุกคนรู้ดีว่าค่าสุดท้ายคือสีของเงา
โค้ดเอฟเฟกต์เงาสุดท้ายของเรา
ต่อไปนี้เป็นเนื้อหาที่ยกมา: #เงา { สีพื้นหลัง: #fff; เส้นขอบ: 1px ทึบ #000; -webkit-box-shadow: 3px 5px 10px #ccc; - |
อย่างที่คุณเห็น div ของเรามีพื้นหลังสีขาว ขอบสีดำ และเงาสีเทาอ่อน
6:ปรับขนาด
ใน CSS เวอร์ชันล่าสุด คุณสามารถปรับขนาดองค์ประกอบได้ (แต่ปัจจุบันรองรับโดย Safari เท่านั้น)
หลังจากใช้โค้ดนี้ สามเหลี่ยมเล็กๆ จะปรากฏขึ้นที่มุมขวาล่างขององค์ประกอบของเราเพื่อเตือนผู้ใช้ว่าองค์ประกอบนี้สามารถปรับขนาดได้ โค้ดยังคงเรียบง่ายมาก อาจกล่าวได้ว่าต้องใช้โค้ดเพียงบรรทัดเดียวเท่านั้น แน่นอนว่า คุณยังสามารถใช้คุณสมบัติบางอย่างที่คุณเคยใช้มาก่อนได้ เช่น "max-width", "max-height", " ความกว้างขั้นต่ำ" และ "ความสูงขั้นต่ำ"
ต่อไปนี้เป็นเนื้อหาที่ยกมา: #ปรับขนาด { สีพื้นหลัง: #fff; เส้นขอบ: 1px ทึบ #000; ปรับขนาด: ทั้งสอง; ล้น: อัตโนมัติ; - |
ที่นี่เราพูดถึงคุณลักษณะการปรับขนาดและล้นเป็นหลัก: ทั้งสองอย่าง หมายความว่าสามารถปรับขนาดทุกด้านได้รวมทั้งแนวนอนและแนวตั้งด้วย Overflow คือการทำงานกับการปรับขนาด ดังนั้นจึงใช้ auto ที่นี่
สรุป
คุณได้รับอะไรจากบทความนี้หรือไม่ แม้ว่าตอนนี้มีเบราว์เซอร์เพียงไม่กี่ตัวเท่านั้นที่รองรับ CSS3 แต่ก็ปฏิเสธไม่ได้ว่า CSS3 จะช่วยประหยัดเวลาในการทำงานของเราได้มากขึ้น หากคุณมีความรู้และความเข้าใจเกี่ยวกับการปรับปรุงแบบก้าวหน้า ฉันคิดว่าคุณพร้อมยอมรับ CSS3 เวอร์ชันใหม่อันทรงพลังนี้ทันที อย่าใช้เวลาทั้งหมดกับ IE6 ไม่เช่นนั้น คุณจะเป็นเพียงวิศวกรพัฒนาส่วนหน้าที่ล้าสมัยเท่านั้น