คู่มือการเริ่มต้นของ CSS3
นับตั้งแต่การประกาศในปี 2548 การพัฒนาระดับ 3 ของ Cascading Style Sheet หรือที่รู้จักกันดีในชื่อ CSS3 นั้นได้รับการเฝ้าดูและติดตามอย่างใกล้ชิดโดยนักออกแบบและนักพัฒนาหลายคน เราทุกคนตื่นเต้นที่จะได้จับมือกับคุณสมบัติใหม่ของ CSS3 - เงาข้อความ, เส้นขอบด้วยภาพ, ความทึบ, พื้นหลังหลาย ๆ ฯลฯ เพียงเพื่อชื่อไม่กี่.
จนถึงทุกวันนี้ผู้สนับสนุน CSS3 บางคนอาจไม่ได้รับการสนับสนุนอย่างเต็มที่ แต่นั่นไม่ได้หมายความว่าเราไม่สามารถทดสอบ CSS3 ใหม่ ๆ ได้อย่างสนุกสนาน โพสต์นี้มีไว้สำหรับนักออกแบบและนักพัฒนาซอฟต์แวร์ทุกคนที่คุ้นเคยกับ CSS 2.1 อยู่แล้วและต้องการทำให้มือคุณสกปรกใน CSS3.0.
มันเป็นการรวบรวมการอ่าน CSS3 ที่มีประโยชน์, โค้ดตัวอย่าง, เคล็ดลับ, แบบฝึกหัด, cheat-sheet และอีกมากมาย อย่าลังเลที่จะใช้สิ่งเหล่านี้ในโครงการของคุณเพียง แต่ทำให้แน่ใจว่ามันเข้ากับเบราว์เซอร์ที่เข้ากันไม่ได้.
เริ่มต้นกับ CSS3
รู้เบื้องต้นเกี่ยวกับ CSS3
บทนำ (roadmap) อย่างเป็นทางการเกี่ยวกับ CSS และ CSS3 เอกสารนี้ให้แนวคิดโดยรวมเกี่ยวกับการพัฒนา CSS3.
CSS3: นำการออกแบบไปสู่อีกระดับ
ข้อดีของ CSS3 พร้อมคำอธิบายและตัวอย่างของคุณสมบัติและตัวเลือก CSS3.
เทคนิคมากมายกับ CSS3
Webmonkey นำเสนอคุณด้วยเทคนิคพื้นฐานหลายอย่างใน CSS3 รวมถึงเส้นขอบที่โค้งมนเส้นขอบเงาหล่นเทคนิคภาพและอื่น ๆ.
สัมภาษณ์: หกคำถามกับ Eric Meyer ใน CSS3
คนที่ Six Revision สัมภาษณ์ Eric Meyer ด้วยข้อมูลเชิงลึกและคำตอบที่มีค่าเกี่ยวกับ CSS3.
CSS3: การเพิ่มประสิทธิภาพแบบก้าวหน้า
วิธีที่คุณสามารถใช้เทคนิคการเพิ่มประสิทธิภาพที่สง่างาม (หรือก้าวหน้า) เพื่อใช้ประโยชน์จากคุณลักษณะ CSS3 ในเบราว์เซอร์ที่สนับสนุนพวกเขาในขณะที่มั่นใจว่ารหัสของคุณจะยังคงให้ประสบการณ์การใช้งานที่น่าพึงพอใจแก่ผู้ใช้ในเบราว์เซอร์รุ่นเก่า.
CSS3: พื้นหลังและเส้นขอบ
ขอบโค้งมน (border-radius)
คำแนะนำในการสร้างขอบมนด้วย CSS3 border-radius คุณสมบัติ.
ขอบที่ล้อมรอบด้วยรูปภาพ (ขอบภาพ)
วิธีใช้รูปภาพในเส้นขอบด้วย ขอบภาพ คุณสมบัติ.
ขอบ CSS3, พื้นหลังและกล่อง
คำอธิบายรายละเอียดพร้อมตัวอย่างของคุณสมบัติ CSS3 ใหม่เช่น: พื้นหลังคลิป, พื้นหลังกำเนิด, พื้นหลังแนบ, กล่องเงา, กล่องตกแต่งแบ่ง, border-radius และ ขอบภาพ.
CSS3: ข้อความ
Letterpress Effect
สร้างเอฟเฟ็กต์ letterpress อย่างง่ายด้วย CSS3.
เอฟเฟกต์ข้อความหกแบบใช้เงาข้อความ
เอฟเฟกต์ข้อความรวมถึง: วินเทจ / ย้อนยุคนีออนสิ่งที่ใส่เข้าไป Anaglyphic เกมไฟและกระดาน.
ตัวอักษรที่สวยงาม
วิธีนำมาร์กอัปพื้นฐานและแปลงเป็นการออกแบบตัวอักษรที่สวยงามและน่าสนใจผ่าน CSS3 บริสุทธิ์.
การหมุนข้อความ
ใช้สไปรต์รูปภาพและ sprinkle ของ CSS เพื่อให้ได้ตำแหน่งที่ถูกต้อง.
จัดเค้าร่างข้อความ
วิธีเพิ่มเค้าร่างหรือลายเส้นลงในข้อความของคุณโดยใช้ CSS3 ข้อความจังหวะ คุณสมบัติ.
ผลการกำบังข้อความ
เอฟเฟกต์การปกปิดข้อความแบบอินเตอร์แอคทีฟโดยใช้ ข้อความเงา คุณสมบัติ CSS.
ลิงก์เขยิบ (ภาพเคลื่อนไหว) กับ CSS3
คลอง Javascript และสร้างผลกระทบทั้งหมดด้วย CSS3.
การเลือกสไตล์ CSS
เปลี่ยนสไตล์การเลือกข้อความด้วย CSS3.
CSS3: เมนู
เนื้อหาหลายคอลัมน์
การใช้ CSS3 เพื่อสร้างชุดคอลัมน์ในเว็บไซต์ของคุณโดยไม่ต้องกำหนดแต่ละเลเยอร์และ (หรือ) ย่อหน้าสำหรับแต่ละคอลัมน์.
เคล็ดลับเครื่องมือเซ็กซี่ด้วย CSS
วิธีใช้มาตรฐาน CSS ที่พัฒนาขึ้นสามารถเพิ่มเคล็ดลับเครื่องมือข้ามเบราว์เซอร์ที่น่ารักได้.
เคล็ดลับเครื่องมือเพิ่มเติม:
- เคล็ดลับเครื่องมือ CSS3 บริสุทธิ์
- เคล็ดลับเครื่องมือด้วย CSS3.
เมนูแบบเลื่อนลง
วิธีสร้าง Apple.com เหมือนกันโดยใช้เมนูแบบเลื่อนลงหลายระดับ border-radius, กล่องเงา, และ ข้อความเงา.
พื้นที่แท็บ CSS3 เท่านั้น
คลิกที่แท็บซ่อนพาเนลทั้งหมดแสดงแท็บที่สอดคล้องกับแท็บที่เพิ่งคลิก - ทั้งหมดด้วย CSS.
ริบบิ้น 3 มิติด้วย CSS3
สร้างริบบอน 3 มิติที่ดูดีด้วย CSS3 เท่านั้น.
CSS3: ปล่อยเงา
วางเงาในภาพ
จัดแสดงเทคนิคต่าง ๆ และลักษณะที่เป็นไปได้บางอย่างสำหรับการวางเงาโดยไม่ต้องใช้ภาพ.
แท็บเรืองแสงพร้อมกล่องเงา
วิธีสร้างแท็บที่ใช้งานง่ายและสวยงามใน CSS3 ที่ไม่มีภาพ.
CSS3: ปุ่มต่างๆ
บทช่วยสอน: ปุ่มสวย ๆ
วิธีสร้างปุ่ม CSS3 ที่สอดคล้องกับเบราว์เซอร์ที่สวยงามและเสื่อมคุณภาพลงอย่างสวยงาม.
ฟองคำพูด
เอฟเฟกต์ฟองคำพูดรูปแบบต่างๆที่สร้างด้วย CSS 2.1 และปรับปรุงด้วย CSS3.
GitHub ปุ่มเหมือนกัน
ชุดของปุ่มที่แสดงสิ่งที่เป็นไปได้โดยใช้ CSS3 ในขณะที่ยังคงรักษามาร์กอัปที่ง่ายที่สุด.
ไอคอนการหมุนเฟดและซีดจางด้วย CSS3 และ MooTools
วิธีใช้ CSS3 และ MooTools เพื่อสร้างองค์ประกอบ dymanic หมุนได้.
ภาพซ้อนทับ
การใช้งานจริงของคุณสมบัติภาพชายแดน CSS3.
มากกว่า
- CSS3 + Mootools ตัวอย่างของการทดลองใน mootools สิ่งนี้จะเพิ่มคุณสมบัติ CSS3 ลงในกรอบการทำงานหลักของ MooTools.
- โลโก้การระเบิดด้วย CSS3 และ MooTools หรือ jQuery ถ่ายภาพนิ่งและทำให้มันเป็นภาพเคลื่อนไหวและมีผลต่อการระเบิดบนเม้าส์.
- พลังของ HTML 5 และ CSS 3 HTML 5 และ CSS 3 ได้รับความนิยมอย่างรวดเร็วกดที่เน่าเปื่อยได้ที่นี่เพื่ออธิบายวิธีการและเหตุผล.
- Spinning Rays พร้อมภาพเคลื่อนไหว CSS3 และตัวอย่าง JavaScript เอฟเฟกต์การปั่นแสงที่เรียบง่ายและละเอียดอ่อนที่ด้านหลังของภาพ.
- แกลเลอรี่ภาพ CSS3 โพลารอยด์ วิธีสร้างภาพโพลารอยด์ที่ดูเท่ ๆ ด้วยสไตล์ CSS ที่บริสุทธิ์.
- HTML 5 และ CSS 3: เทคนิคที่คุณจะใช้ในไม่ช้า คำแนะนำในการสร้างบล็อกตั้งแต่แรกเริ่มด้วย HTML5 และ CSS3.
Cheatsheets & การอ้างอิง
CSS3 สูตรโกง (PDF)
cheatsheet ที่พิมพ์ได้พร้อมรายการคุณสมบัติทั้งหมดชนิดตัวเลือกและอนุญาตให้ใช้ค่าในข้อมูลจำเพาะ CSS3 ปัจจุบันจาก W3C.
รองรับ CSS ใน Opera 9.5
รายการตัวเลือก CSS ที่รองรับทั้งหมดใน Opera 0.5.
แบบอักษรพร้อมใช้งานสำหรับการฝัง @ font-face
รายการแบบอักษรที่ครอบคลุมที่ได้รับอนุญาตในปัจจุบันสำหรับ @ font-face การฝัง.
CSS 3 Selectors - อธิบาย
คำแนะนำและการอ้างอิงถึงตัวเลือก CSS3 และรูปแบบ.
ตัวสร้างกฎ CSS3 ข้ามเบราว์เซอร์
กฎ CSS3 คุณสามารถคัดลอกและวางลงบนสไตล์ชีทของคุณเอง.
CSS3 คลิกที่แผนภูมิ
รับสไตล์ CSS3 เช่นการปรับขนาดกล่องรัศมีเส้นขอบเงาข้อความและอีกมากมายภายในคลิกเดียว.
เนื้อหา CSS & ความเข้ากันได้ของเบราว์เซอร์
รายการตารางตัวเลือกทั้งของ CSS และ CSS3 พร้อมประกาศสำหรับการตรวจสอบความเข้ากันได้ของเบราว์เซอร์.
