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

แกลเลอรีเอฟเฟกต์ข้อความ CSS ส่วนใหญ่ให้ค่าพรีเซ็ตตายตัวมาให้: Neon Glow แบบหนึ่ง, การอัดรีดสามมิติอีกแบบหนึ่ง จะเอาหรือไม่เอาก็ตามไป เครื่องมือสร้างนี้ประกอบ CSS จากพารามิเตอร์ของคุณ บนข้อความที่คุณพิมพ์จริง เลือก Neon Glow, 3D Extrude, Letterpress/Emboss, Outlined หรือ Gradient Fill จากตัวเลือกเอฟเฟกต์ ปรับแต่งส่วนควบคุมของเอฟเฟกต์นั้น แล้วตัวอย่างสดและบล็อก CSS ที่คัดลอกได้ด้านล่างจะอัปเดตทุกครั้งที่มีการเปลี่ยนแปลง

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

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

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