- - เพิ่มเอฟเฟกต์เงาให้กับรูปภาพด้วย CSS3 Auto Code Generator

เพิ่มเอฟเฟกต์เงาให้กับรูปภาพด้วย CSS3 Auto Code Generator

CSS ช่วยให้คุณออกแบบเว็บเพจได้ง่ายมากอย่างง่ายดาย คุณสามารถกำหนดรูปแบบข้อความได้มากกว่าร้อยแบบในหน้าเดียว (แน่นอนว่าหน้าของคุณจะออกมาดูเหมือนเต็นท์วงเวียน) แต่มันเกี่ยวกับความง่ายและความยืดหยุ่นที่มาพร้อมกับการใช้ CSS ในหน้าเว็บThemeShock มีตัวสร้าง coder CSS ที่จะช่วยคุณเพิ่มเอฟเฟกต์เงาตกที่แตกต่างกันสำหรับรูปภาพของคุณด้วยการคลิกเพียงไม่กี่ครั้ง คุณเลือกเอฟเฟกต์และเขียนโค้ด; สามารถเพิ่มเอฟเฟกต์ลงด้านล่างด้านข้างด้านบน & ล่างซ้ายล่างขวาล่างขวาบนและล่างซ้ายหรือในมุมทแยง

CSS-เงา generator_HQ

ก่อนที่คุณจะเริ่ม; ตรวจสอบขนาดของคุณรูปภาพ (สิ่งที่คุณต้องการเพิ่มเอฟเฟกต์ให้) ตัวสร้างโค้ดมีขีด จำกัด บนและล่างที่กำหนดไว้ล่วงหน้า 130 - 347px สำหรับความกว้างและความสูงของภาพ หากขนาดภาพของคุณเกินขนาดนี้คุณสามารถแก้ไขความกว้างและความสูงได้ในภายหลัง รหัสยังช่วยให้คุณกำหนดความทึบและเบลอของเงา คุณไม่สามารถอัปโหลดภาพของคุณในเครื่องกำเนิดรหัสจะใช้ภาพเริ่มต้นเพื่อให้คุณสามารถดูตัวอย่างผลกระทบ

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

Css3 Drop Shadow

เมื่อทุกอย่างถูกตั้งค่าแล้วให้คัดลอกโค้ด CSS ลงในไฟล์ CSS และตั้งชื่อให้กับหน้าเว็บของคุณ (หรือธีม) โค้ด HTML ที่ไปในหน้าเว็บของคุณก็ถูกสร้างขึ้นด้วย (มันเป็นเอกลักษณ์สำหรับแต่ละเอฟเฟกต์ที่คุณเลือกจากเมนูแบบเลื่อนลง) คัดลอกและวางรหัสรูปภาพ (img src =”“) ที่มันบอกว่า

สิ่งที่ดีที่สุดเกี่ยวกับตัวสร้างรหัสนี้คือใช้งานได้และฟรี มันมีข้อ จำกัด ด้านมิติสำหรับรูปภาพ แต่สามารถแก้ไขได้จากโค้ด หากคุณใช้ภาพโปร่งใส (เหมือนภาพด้านบน) ภาพนั้นจะให้พื้นหลังสีเทาหม่น คุณสามารถแก้ไขสีพื้นหลังในภายหลังจากรหัส (แก้ไขพื้นหลังบรรทัดโค้ด: #ccc) รหัสยังให้เฟรมขนาด 5px ให้กับรูปภาพทั้งหมดคุณสามารถแก้ไขเฟรมได้เช่นกัน แต่การเพิ่มและลดความกว้างจะเป็นการซ่อนหรือแสดงเงามากกว่าที่จำเป็นดังนั้นจึงเป็นสิ่งที่ดีที่สุด

เยี่ยมชม ThemeShock CSS Drop Shadow Generator

ความคิดเห็น