เครื่องมือสร้างเอฟเฟกต์ข้อความ CSS

แกลเลอรีเอฟเฟกต์ข้อความ CSS ส่วนใหญ่จะตั้งค่าล่วงหน้าให้กับคุณ: แสงนีออนหนึ่งอัน, การอัดขึ้นรูป 3D หนึ่งอัน จะเอาหรือปล่อยไว้ ตัวสร้างนี้สร้าง CSS จากพารามิเตอร์ของคุณแทนบนข้อความที่คุณพิมพ์จริงๆ เลือกแสงนีออน การพ่นสามมิติ การกดตัวอักษร/ลายนูน การใส่โครงร่างหรือการไล่ระดับสีจากการเลือกเอฟเฟกต์ ปรับการควบคุมเอฟเฟกต์นั้นเอง และดูตัวอย่างแบบสดพร้อมบล็อก CSS ที่คัดลอกได้ด้านล่าง โดยจะอัปเดตทุกครั้งที่มีการเปลี่ยนแปลง

เอฟเฟกต์ 3D-extrude เป็นสิ่งที่ควรค่าแก่การทำความเข้าใจ: สำหรับความลึกที่เลือก (จำนวนเลเยอร์ที่ซ้อนกัน) และมุม เลเยอร์ i จะถูกชดเชยด้วย i × cos(มุม) ในแนวนอน และ i × sin(มุม) ในแนวตั้ง คำนวณใน JavaScript ด้วยฟังก์ชันตรีโกณมิติจริง — ไม่ได้อ่านจากตารางค้นหาของมุมที่ตั้งไว้ล่วงหน้า ที่ 45 องศา ค่าออฟเซ็ตแนวนอนและแนวตั้งจะออกมาเท่ากันสำหรับทุกเลเยอร์ เนื่องจากโคไซน์และไซน์ของ 45° เป็นค่าเดียวกัน หมุนแถบเลื่อนมุมและดูเลเยอร์ 'เงาข้อความ' ทั้งหมดแกว่งไปมารอบตัวอักษรแบบเรียลไทม์ โดยแต่ละเลเยอร์มืดลงมากกว่าชั้นสุดท้ายเล็กน้อยเพื่อสร้างใบหน้า 3 มิติที่สว่างขึ้น

แสงนีออนจะซ้อนเลเยอร์ `ข้อความ-เงา` สี่ชั้นเพื่อเพิ่มรัศมีความเบลอในสีที่คุณเลือก โดยมีตัวเลือกการสั่นไหว: เปิดสวิตช์และกฎ `@keyframes` ที่มีลำดับความทึบของการสุ่มแบบสุ่มจะถูกสร้างขึ้นและเคลื่อนไหวแบบสดๆ และปุ่มสับเปลี่ยนช่วยให้คุณเปลี่ยนรูปแบบใหม่ได้โดยไม่ต้องเขียนคีย์เฟรมเดียวด้วยมือ ข้อความที่มีโครงร่างจะใช้ `-webkit-text- stroke` สำหรับเบราว์เซอร์ที่รองรับ บวกกับทางเลือก `text-shadow` แบบตรงไปตรงมา 8 ทิศทางสำหรับเบราว์เซอร์ที่ไม่รองรับ ทั้งสองบรรทัดจัดส่งใน CSS ที่คัดลอกพร้อมหมายเหตุว่าทำไม การเติมไล่ระดับสีจะคลิป "การไล่ระดับสีเชิงเส้น" เข้ากับรูปร่างข้อความด้วย "คลิปพื้นหลัง: ข้อความ" ซึ่งปัจจุบันเป็นคุณสมบัติมาตรฐานที่มีการรองรับในวงกว้าง โดยคงบรรทัดนำหน้า "-webkit-" แบบเก่าไว้สำหรับเครื่องมือแบบเดิม

ทุกอย่างแสดงผลในเบราว์เซอร์ของคุณ — ข้อความที่คุณพิมพ์ไม่เคยถูกส่งไปทุกที่ คัดลอกบล็อก CSS ที่เสร็จแล้ว รวมถึงกฎ `@keyframes` เมื่อจำเป็นต้องใช้เอฟเฟกต์ ลงในสไตล์ชีตของคุณโดยตรง