CSS 3 + HTML 5 เป็นอนาคตของเว็บ ยังมาไม่ถึงอย่างเป็นทางการ แม้ว่าเบราว์เซอร์จำนวนมากจะเริ่มให้การสนับสนุนบางส่วนแล้วก็ตาม บทความนี้จะแนะนำ 5 เทคนิค CSS3 ที่สามารถช่วยให้คุณบรรลุอนาคตของเว็บได้ ปัจจุบันเทคนิคเหล่านี้ไม่ควรใช้กับโครงการลูกค้าที่เป็นทางการ เนื่องจากเหมาะสำหรับเว็บไซต์บล็อกส่วนตัวของคุณ ชุมชนการออกแบบเว็บไซต์ หรือสถานการณ์ที่คุณจะไม่มีลูกค้าบ่นกับคุณ
1. เอฟเฟกต์มุมโค้งมน
หนึ่งในคุณสมบัติใหม่ที่ใช้บ่อยที่สุดของ CSS3 คือเอฟเฟกต์มุมโค้งมน วัตถุสี่เหลี่ยมจัตุรัส HTML มาตรฐานมีมุมสี่เหลี่ยมจัตุรัส 90 องศา
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
แม้แต่มุมเดียวก็สามารถปัดเศษได้ แต่ไวยากรณ์ของ Mozilla และ Webkit นั้นแตกต่างกันเล็กน้อย
-moz-border-radius-topleft: 20px;
-moz-border
-radius-
topright: 20px
; -moz-border-radius-bottomleft: 10px;
-rightright-radius: 20px;
-webkit-border-
top-right-radius: 10px
; -webkit-border-bottom-left-radius: 10px
; Firefox, Safari, Chrome
2. เส้นขอบกราฟิก
ตามชื่อที่แสดง เส้นขอบแบบกราฟิกคือเส้นขอบที่อนุญาตให้ใช้รูปภาพเป็นวัตถุได้ ไวยากรณ์มีดังนี้:
border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png ) 5 ซ้ำ;
-moz-border- image: url(/images/border-image.png) 5 ซ้ำ;
border-image: url(/images/border-image.png) 5 ซ้ำ
; ความกว้างของเส้นขอบ จากนั้น แต่ละคำจำกัดความของรูปภาพเส้นขอบจะบอกเบราว์เซอร์ว่าจะใช้รูปภาพเป็นเส้นขอบมากน้อยเพียงใด เส้นขอบรูปภาพสามารถตั้งค่าแยกกันสำหรับแต่ละขอบได้:
เส้นขอบ-ล่างขวา-ขวา-
เส้นขอบรูปภาพ-
เส้นขอบด้านล่าง-เส้นขอบรูปภาพ-ล่างซ้าย-เส้นขอบ
รูปภาพ-ซ้าย-
เส้นขอบรูปภาพ-บนซ้าย-เส้นขอบรูปภาพ
-
เส้นขอบ
ด้านบน-เบราว์เซอร์ที่รองรับภาพขวา
บน
: Firefox 3.1, Safari, Chrome
3. บล็อกเงาและเงาข้อความ
เอฟเฟกต์เงาเคยเป็นสิ่งที่นักออกแบบเว็บไซต์ทั้งชื่นชอบและเกลียด ตอนนี้ด้วย CSS3 คุณไม่จำเป็นต้องใช้ Photoshop อีกต่อไปแล้ว เช่น เว็บไซต์ 24 Ways:
-webkit-box-shadow: 10px 10px 25px #ccc ;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
สองคุณสมบัติแรกตั้งค่าการแทนที่ X / Y ของเงา นี่คือ 10px และคุณสมบัติที่สามกำหนดความเบลอของ องศาเงา อันสุดท้ายกำหนดสีของเงา เงาข้อความสามารถตั้งค่าได้ดังนี้:
text-shadow: 2px 2px 5px #ccc;
เบราว์เซอร์ที่รองรับ: Firefox 3.1, Safari, Chrome (รองรับเฉพาะเงากล่อง), Opera (รองรับเฉพาะเงาข้อความ) สีเขียว ค่าสุดท้ายของสีน้ำเงินทั้งสามสีแสดงถึงความโปร่งใส นอกจากนี้ เรายังสามารถใช้ความทึบเพื่อให้เกิดความโปร่งใสได้ (ปัจจุบันเทคนิคนี้ส่วนใหญ่จะใช้สำหรับเอฟเฟกต์กล่องไฟ - ตัวแปล)
4. ใช้ RGBA เพื่อให้ได้เอฟเฟกต์ความโปร่งใส
ในปัจจุบัน เอฟเฟกต์ความโปร่งใสในการออกแบบเว็บส่วนใหญ่ทำได้โดยรูปภาพ PNG (แต่เบราว์เซอร์ IE - โปรแกรมแปลไม่รองรับ) ใน CSS3 เอฟเฟกต์ความโปร่งใสสามารถทำได้โดยตรง
rgba(200, 54, 54, 0.5);
พื้น
หลัง: rgba(
200, 54, 54, 0.5); สี: rgba(200, 54, 54, 0.5
)
;
, Safari, Chrome, Opera (ความทึบ) และ IE7 (ความทึบ พร้อมการแก้ไข)
5. ใช้ @Font-Face เพื่อใช้แบบอักษรที่กำหนดเอง
มีฟอนต์หลายตัวที่ค่อนข้างปลอดภัยในการออกแบบเว็บไซต์ เช่น Arial, Helvetica, Verdana, Georgia และ Comic Sans (โดยทั่วไปแล้ว ภาษาจีนคือ Song Dynasty เป็นตัวแปลเพียงตัวเดียวที่ปลอดภัย) ตอนนี้ใช้ @font-face ของ CSS3 ฉันสามารถระบุแบบอักษรเองได้หรือไม่ แต่เนื่องจากปัญหาลิขสิทธิ์ แบบอักษรจริงที่สามารถใช้ได้จึงมีจำกัด (นอกจากนี้ แบบอักษรจีนขนาดใหญ่ก็เป็นปัญหาที่แก้ไขได้ยากเช่นกัน - นักแปล)
ไวยากรณ์เป็นดังนี้:
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}
เบราว์เซอร์ที่รองรับ: Firefox 3.1, Safari, Opera 10 และ IE7 (หากไม่กลัวปัญหา ก็ใช้ฟังก์ชันนี้ใน IE ได้ โปรดดูที่: ทำให้หน้าฟอนต์ทำงานใน IE)
แม้ว่า CSS3 ยังอยู่ระหว่างการพัฒนา แต่ฟังก์ชันเหล่านี้ที่กล่าวมาข้างต้นก็พร้อมใช้งานอยู่แล้ว ในเบราว์เซอร์บางตัวที่ใช้โดยเฉพาะ Safari น่าเสียดายที่ Safari ไม่ใช่เบราว์เซอร์กระแสหลัก
ปัจจุบัน Firefox มีฐานผู้ใช้จำนวนมาก นอกจากนี้ Firefox 3.1 ที่กำลังจะมาถึงยังรองรับเอฟเฟกต์ CSS3 มากมาย เนื่องจากผู้ใช้ Firefox มีแรงจูงใจสูงที่จะอัปเกรด ผู้ใช้จำนวนมากจึงสามารถสัมผัสกับคุณสมบัติใหม่ของ CSS3 ได้ล่วงหน้า
Google Chrome เพิ่งเปิดตัวในปีนี้ โดยมีพื้นฐานมาจาก Webkit engine ดังนั้นจึงคล้ายกับ Safari มาก เนื่องจาก Safari ใช้เป็นหลักในตลาด Mac ดังนั้น Chrome จึงสามารถเติมเต็มช่องว่างในตลาด Windows ได้
ตามสถิติ ณ เดือนพฤศจิกายน พ.ศ. 2551 ผู้ใช้ 44.2% ใช้ Firefox, 3.1% ใช้ Chrome และ 2.7% ใช้ Safari ซึ่งหมายความว่าฟังก์ชันบางอย่างของ CSS3 สามารถรองรับผู้ใช้อินเทอร์เน็ตได้เกือบครึ่งหนึ่งในแวดวงการออกแบบเว็บแล้ว สัดส่วนอาจสูงขึ้นประมาณ 73.6% (ข้อมูลจาก Blog.SpoonGraphics)
6. ปัจจัยเชิงลบ
คุณลักษณะ CSS3 ที่อธิบายไว้ข้างต้นจะนำผลลัพธ์ที่ยอดเยี่ยมมาสู่เว็บไซต์ของคุณ แต่ยังมีปัจจัยลบบางประการที่ต้องพิจารณา:
Internet Explorer: 46 % ของ อินเทอร์เน็ตไม่สามารถมองเห็นเอฟเฟกต์เหล่านี้ได้ ดังนั้นอย่าใช้สิ่งเหล่านี้กับการออกแบบที่สำคัญ ตรวจสอบให้แน่ใจว่าในกรณีที่เอฟเฟกต์เหล่านี้ใช้ไม่ได้ผล ก็มีการออกแบบอื่นให้เลือกใช้
ปัญหาการตรวจสอบ CSS: คุณลักษณะ CSS3 เหล่านี้ไม่ใช่เวอร์ชันสุดท้าย ในปัจจุบัน เบราว์เซอร์ที่แตกต่างกันใช้แท็กที่แตกต่างกันเพื่อใช้คุณลักษณะเหล่านี้ ซึ่งอาจทำให้เกิดปัญหาในการตรวจสอบความถูกต้องสำหรับสไตล์ชีตของคุณ
โค้ดที่บวม: เนื่องจากเบราว์เซอร์ที่แตกต่างกันใช้รูปแบบคำจำกัดความที่แตกต่างกัน โค้ด CSS ของคุณจึงจะบวมมากในที่สุด
การใช้งานที่ไม่เหมาะสม: การใช้เอฟเฟกต์เหล่านี้อย่างไม่เหมาะสมอาจทำให้เกิดผลเสียตามมา โดยเฉพาะเอฟเฟกต์เงา
แหล่งที่มาระหว่างประเทศของบทความนี้: http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
แหล่งที่มาแปลภาษาจีน: เว็บไซต์อย่างเป็นทางการของ COMSHARP CMS (35 กม.) การแปล )