เมื่อเห็นชื่อนี้ เราก็สามารถเพิกเฉยต่อเบราว์เซอร์ IE ก่อนได้
ฉันยอมรับว่าฉันมีแนวโน้มแบบมินิมอลลิสต์ และฉันต้องการทำสิ่งต่างๆ ได้มากขึ้นโดยใช้โค้ดและรูปภาพจำนวนน้อยที่สุด
แม้ว่า CSS3 จะเพิ่มคุณสมบัติใหม่เพียงไม่กี่อย่าง แต่คุณสมบัติเหล่านี้สามารถทำสิ่งที่มีประโยชน์ได้มากมาย และทำให้งานของเราง่ายขึ้นอย่างมาก ปุ่มที่เราทำในวันนี้ใช้ประโยชน์จากมุมโค้งมน เงาของกล่อง และเอฟเฟกต์เงาข้อความของ CSS3 ได้อย่างเต็มที่ ในขณะที่ใช้สี RGBa
มาดูการสาธิตก่อน:
เราสามารถสร้างปุ่มที่สวยงามเหล่านี้ได้ในสี่ขั้นตอน:
1. การตั้งค่าพื้นฐานของปุ่ม
เราจำเป็นต้องตั้งค่ารูปแบบพื้นฐานของปุ่มก่อน ในที่นี้ เราใช้แท็ก คุณยังสามารถใช้อินพุต แท็กปุ่ม ฯลฯ แท็ก a ถูกใช้ที่นี่เนื่องจากมีเพียงแท็กในสามแท็กเหล่านี้เท่านั้นที่สนับสนุน :โฮเวอร์คลาสหลอก
ต่อไปนี้เป็นเนื้อหาที่ยกมา: .btn { |
ขอขอบคุณ ytzong Children's Shoes สำหรับคำแนะนำของเขา เราเปลี่ยนเป็น display:inline-block ซึ่งสามารถบันทึกบรรทัดลอยและบรรทัดขอบของโค้ดได้ ——เสินเฟย@05.31.2009
2. รูปภาพไล่ระดับสี PNG กึ่งโปร่งใส
นี่เป็นภาพเดียวที่เราใช้ที่นี่ ภาพ png โปร่งใสนี้ใช้เพื่อให้ได้การไล่ระดับสี เราสามารถเรียกภาพนี้ว่าการไล่ระดับสีโปร่งใสแบบเอกรงค์ได้ ใน CSS คุณสามารถบรรลุเอฟเฟกต์การไล่ระดับสีที่แตกต่างกันได้โดยใช้การสาธิตพื้นหลัง + รูปภาพ PNG เช่นนี้ แน่นอนว่านี่ไม่ใช่คุณสมบัติของ CSS3 ยกเว้นเบราว์เซอร์ที่ต่ำกว่า IE6 เบราว์เซอร์ทั้งหมดสามารถบรรลุผลนี้ได้ คุณสามารถคลิกที่นี่เพื่อดูไฟล์ PNG
ต่อไปนี้เป็นเนื้อหาที่ยกมา: .btn { |
3. มุมโค้งมน
มุมโค้งมน (รัศมีเส้นขอบ) เป็นหนึ่งในคุณสมบัติ CSS3 ที่ดีที่สุดที่เบราว์เซอร์รองรับในปัจจุบัน นอกเหนือจากเบราว์เซอร์ IE แล้ว เบราว์เซอร์ระดับ A ทั้งหมดยังรองรับ แม้ว่าส่วนใหญ่จะใช้งานผ่านแอตทริบิวต์ส่วนตัว แต่อย่างน้อยก็สามารถใช้งานได้ .
ต่อไปนี้เป็นเนื้อหาที่ยกมา: .btn { |
4.เงาและ RGBa
Box-shadow และ text-shadow เป็นคุณสมบัติสำคัญสองประการที่เพิ่มเข้ามาใน CSS3 โดยสามารถใช้เงาขององค์ประกอบระดับบล็อกและเงาข้อความได้อย่างง่ายดาย อย่างไรก็ตาม จะดีกว่าไหมหากสีเงาเป็นแบบกึ่งโปร่งใส วิธีนี้จะทำให้องค์ประกอบกลมกลืนกับพื้นหลังได้ดีขึ้น เป็นที่น่าสังเกตว่า FF รองรับเฉพาะแอตทริบิวต์ text-shadow จนถึงเวอร์ชัน 3.5 (ปัจจุบันรองรับโดย Firefox 3.5beta4)
ต่อไปนี้เป็นเนื้อหาที่ยกมา: .btn { |
เอาล่ะ ตอนนี้ปุ่มของเราก็เสร็จสมบูรณ์แล้ว มันบรรลุเป้าหมายของเราแล้ว
ปุ่มนี้เป็นสีดำ ดังนั้นปุ่มสีอื่นจึงใช้งานได้ง่ายกว่า:
ต่อไปนี้เป็นเนื้อหาที่ยกมา: - |
โปรดทราบว่าต้องวางสไตล์เหล่านี้ไว้หลัง .btn ด้วยวิธีนี้ สีพื้นหลังของปุ่มสีเขียว น้ำเงิน แดง ฯลฯ เหล่านี้สามารถแทนที่สีพื้นหลังของ .btn ได้ แล้วใช้
สุดท้ายนี้ ขอให้เราสงสารเบราว์เซอร์ IE บ้าง ปุ่มเหล่านี้จะแสดงมุมขวา สีไล่ระดับสี ไม่มีเงา และไม่มีสีโปร่งใสในเบราว์เซอร์ IE7 และ IE8 แต่ใน IE6 จะแสดงพื้นหลังเป็นสีฟ้าอ่อน เนื่องจาก IE6 ไม่รองรับความโปร่งใสของ png หากคุณต้องการให้ดูเหมือนปุ่มใน IE6 เพียงใช้ตัวกรอง IE หลัง js