เครื่องกำเนิดกลาสมอร์ฟิซึม

ฟิลเตอร์ฉากหลัง: blur() เป็นคุณสมบัติ CSS ที่อยู่เบื้องหลังรูปลักษณ์กระจกฝ้า — แผงโปร่งแสงที่จะเบลอทุกสิ่งที่เคลื่อนไหวอยู่ด้านหลัง แทนที่จะทำให้สีเรียบๆ จางลง สิ่งที่จับได้ก็คือคุณภาพความเบลอแทบจะเป็นไปไม่ได้เลยที่จะตัดสินจากตัวอย่างแบบคงที่ มันจะอ่านได้อย่างน่าเชื่อถือเมื่อมีบางสิ่งเคลื่อนไหวอยู่ข้างใต้เท่านั้น วิธีที่จะอ่านบนหน้าจริงที่มีเนื้อหา วิดีโอ หรือฮีโร่ที่เคลื่อนไหวได้ เครื่องมือสร้างนี้วางการ์ดแสดงตัวอย่างไว้บนพื้นหลังที่เคลื่อนไหวได้อย่างแท้จริง แทนที่จะเป็นภาพนิ่ง ดังนั้นสิ่งที่คุณเห็นขณะลากแถบเลื่อนคือสิ่งที่ผู้เยี่ยมชมจะได้สัมผัสจริง

พื้นหลังเป็นภาพเคลื่อนไหว CSS จริง: การไล่ระดับสีเชิงเส้นขนาดใหญ่ที่ทาสีที่ 400% ของขนาดขององค์ประกอบ โดยที่ @keyframes จะเลื่อนตำแหน่งพื้นหลังกลับไปกลับมาในลูป ไม่มีลูปแอนิเมชัน JavaScript ไม่มีแคนวาส เป็นเพียงเทคนิคการวางตำแหน่งพื้นหลังต่อเนื่องแบบเดียวกันที่ใช้ในส่วนฮีโร่ที่ใช้งานจริง ความเบลอ สีอ่อน และความทึบ สี/ความทึบ/ความกว้างของเส้นขอบ รัศมีมุม และความนุ่มนวลของเงา ล้วนขับเคลื่อนสไตล์สดของการ์ดแบบลอย และกล่อง CSS ที่คัดลอกได้จะสะท้อนค่าเดียวกันทุกประการ

ไม่ใช่ทุกเบราว์เซอร์ที่รองรับตัวกรองฉากหลัง ดังนั้นตัวสร้างจึงปล่อยบล็อก @supports not (ตัวกรองฉากหลัง: เบลอ(1px)) จริงออกมาด้วย — ไม่ใช่ท่าทางโทเค็น แต่เป็นกฎทางเลือกที่มีสีพื้นหลังของตัวเองซึ่งคำนวณจากความทึบของสีจริงของคุณ เนื่องจากความโปร่งแสงโดยไม่เบลอจะดูแย่ลงอย่างเห็นได้ชัด (สิ่งที่อยู่ด้านหลังจะแสดงออกมาโดยไม่เบลอ) ทางเลือกสำรองจะเพิ่มช่องอัลฟ่าเหนือความทึบสีที่คุณเลือกโดยอัตโนมัติ และความคิดเห็นใน CSS ที่สร้างขึ้นจะอธิบายว่าทำไมและมากน้อยเพียงใด

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