สร้าง CSS จากเลเยอร์

ฟีเจอร์ Copy CSS จะสร้างคุณสมบัติ Cascading Style Sheet โดยตรงจากเลเยอร์ใน Photoshop โดยบันทึกข้อกำหนดการออกแบบที่สามารถวางลงในไฟล์สไตล์ชีตได้เวิร์กโฟลว์นี้ช่วยเชื่อมช่องว่างระหว่างการออกแบบด้านภาพกับการนำโค้ดไปใช้ โดยเฉพาะเมื่อต้องเตรียมแอสเซทสำหรับโปรเจกต์เว็บ หรือทำงานร่วมกับนักพัฒนาที่ต้องการข้อกำหนดสไตล์ที่แม่นยำ

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

คุณสมบัติ CSS ที่บันทึกจากเลเยอร์

Copy CSS จะดึงคุณสมบัติที่แตกต่างกันตามประเภทเลเยอร์ที่เลือก

เลเยอร์รูปร่างสร้าง CSS สำหรับ:

• พิกัดขนาดและตำแหน่ง
• สีการลากเส้น
• สีเติม รวมถึงคำจำกัดความการไล่ระดับสี
• เอฟเฟกต์เงาตก

เลเยอร์ข้อความบันทึกคุณสมบัติรูปร่างรวมถึงข้อกำหนดการออกแบบตัวอักษร:

• ตระกูลแบบอักษร
• ขนาดและน้ำหนักแบบอักษร
• ความสูงของบรรทัด
• การตกแต่งข้อความ (ขีดเส้นใต้ ขีดทับ)
• การจัดตำแหน่งในแนวตั้ง (ตัวยก ตัวห้อย)
• การจัดแนวข้อความ

กลุ่มเลเยอร์จะสร้างคลาส CSS ที่มีโครงสร้างแสดงความสัมพันธ์แบบพาเรนต์-ไชลด์ตัวกลุ่มเองจะกลายเป็น parent div ในขณะที่เลเยอร์แต่ละเลเยอร์ภายในกลุ่มจะสร้าง child divค่าตำแหน่งบนและซ้ายขององค์ประกอบย่อยจะคำนวณโดยอ้างอิงกับคอนเทนเนอร์หลัก ซึ่งเป็นไปตามลักษณะการจัดตำแหน่งแบบ CSS มาตรฐาน

ข้อจำกัดของการคัดลอก CSS

การคัดลอก CSS ใช้ไม่ได้กับ Smart Object ถ้าเลเยอร์เป็น Smart Object ให้ดับเบิลคลิกเพื่อแก้ไขเนื้อหาและคัดลอก CSS จากเลเยอร์ภายในเอกสาร Smart Object หรือแรสเตอร์ไลซ์เลเยอร์ก่อนหากเหมาะกับเวิร์กโฟลว์

ฟีเจอร์นี้ไม่สามารถประมวลผลเลเยอร์รูปร่างหรือข้อความหลายเลเยอร์ที่เลือกพร้อมกันได้ เว้นแต่จะจัดกลุ่มไว้หากต้องการคัดลอก CSS จากหลายเลเยอร์พร้อมกัน ให้จัดกลุ่มเลเยอร์เหล่านั้นไว้ก่อน

การสร้างโค้ด CSS จากเลเยอร์

โค้ด CSS พร้อมใช้งานในคลิปบอร์ดแล้ว และสามารถนำไปใช้กับโปรเจคเว็บได้ทันที ตรวจสอบพร็อพเพอร์ตี้ที่สร้างขึ้นเพื่อให้สอดคล้องกับความต้องการในการพัฒนา และปรับค่าตามความเหมาะสมสำหรับการออกแบบที่ตอบสนองทันใจหรือความเข้ากันได้กับเบราว์เซอร์