ตัวสร้าง Glassmorphism สำหรับเอฟเฟกต์ CSS กระจกฝ้า
ตัวสร้าง Glassmorphism สร้างค่า CSS สำหรับเอฟเฟกต์กระจกฝ้า ทั้งสีแต้มพร้อม alpha, backdrop blur, ขอบ, ความโค้ง และเงา ปรับตัวเลือกที่มี สร้างค่า แล้วตรวจสอบเทียบพรีวิวไล่สีหลากสี เอาต์พุตมีการประกาศ backdrop-filter ที่มีคำนำหน้า -webkit- คุณจึงคัดลอกค่า CSS ลงโปรเจกต์ได้
ตัวสร้าง Glassmorphism สร้างค่า CSS สำหรับเอฟเฟกต์กระจกฝ้า มันรวมสีแต้มพร้อม alpha, backdrop blur, ขอบบาง ๆ ความโค้ง และเงา แล้วแสดงผลลัพธ์ในพรีวิว ใช้สำรวจการตกแต่งแบบกระจกและคัดลอกค่าที่สร้างสำหรับงานของคุณ
ตั้งค่าตัวเลือกที่มีแล้วสร้างสแต็ก backdrop-filter พรีวิวอยู่บนไล่สีหลากสีเพื่อให้คุณเห็น blur ในบริบท และ CSS ที่สร้างมีคำนำหน้า -webkit- คุณสามารถสร้างค่าทั้งชุดแทนการคิดแต่ละค่าด้วยมือ และค่านั้นสุ่มอย่างถูกต้อง
CSS อธิบายว่าเบราว์เซอร์ควรเรนเดอร์เอฟเฟกต์อย่างไร ส่วนพรีวิวให้วิธีดูภาพเพื่อตรวจสอบการตกแต่งกระจกฝ้าที่สร้าง Glassmorphism มีประโยชน์เมื่อต้องการให้องค์ประกอบดูโปร่งแสงและเบลอตัดกับสิ่งที่อยู่ข้างหลัง การสร้างค่า CSS ให้จุดเริ่มต้นสำหรับดีไซน์ ฟิกซ์เจอร์ทดสอบ หรือข้อมูล seed ได้
ตัวสร้าง Glassmorphism ทำงานในเบราว์เซอร์ของคุณทั้งหมด อินพุตประมวลผลบนอุปกรณ์ของคุณ ไม่มีอะไรถูกอัปโหลด จัดเก็บ หรือส่งไปยังเซิร์ฟเวอร์ เมื่อโหลดหน้าแล้วจะทำงานได้โดยไม่ต้องเชื่อมต่อ คุณจึงใช้ออฟไลน์ได้ มีประโยชน์สำหรับนักพัฒนาและวิศวกร DevOps ที่ต้องการสร้าง พรีวิว หรือใช้ซ้ำค่า CSS กระจกฝ้า
ขั้นตอนที่ 1: ตั้งค่าตัวเลือกที่มีสำหรับเอฟเฟกต์กระจกฝ้า เช่น สีแต้ม blur ขอบ ความโค้ง และเงา
ขั้นตอนที่ 2: สร้างค่าเพื่อสร้างสแต็ก backdrop-filter สำหรับดีไซน์ของคุณ
ขั้นตอนที่ 3: ตรวจสอบพรีวิวเทียบพื้นหลังไล่สีหลากสีเพื่อดูว่า blur ดูเป็นอย่างไร
ขั้นตอนที่ 4: คัดลอกค่า CSS ที่ต้องการ รวมถึงการประกาศที่มีคำนำหน้า -webkit-
กรณีการใช้งาน: สร้างค่า Glassmorphism พร้อมใช้สำหรับการทดสอบ ฟิกซ์เจอร์ หรือข้อมูล seed โดยไม่ต้องเขียนค่าแต่ละค่าด้วยมือ
กรณีการใช้งาน: สร้างค่าทั้งชุดพร้อมกันเมื่อต้องการสไตล์กระจกฝ้าหลายแบบ
กรณีการใช้งาน: ได้ค่าที่สุ่มอย่างถูกต้องแทนการพึ่งการเดาที่พิมพ์จากคีย์บอร์ด
กรณีการใช้งาน: ลองการผสมสีแต้ม blur ขอบ ความโค้ง และเงาที่ต่างกันขณะสร้างการ์ดกระจกฝ้า
กรณีการใช้งาน: พรีวิว blur เทียบไล่สีหลากสีเมื่อประเมินว่าเอฟเฟกต์กระจกอาจดูเป็นอย่างไรบนสีที่หลากหลาย
กรณีการใช้งาน: คัดลอกค่า CSS ที่สร้างลงโปรเจกต์เมื่อต้องการจุดเริ่มต้นสำหรับเอฟเฟกต์กระจกฝ้า