เป้าหมายของแอปพลิเคชัน: สร้างเอฟเฟกต์พิเศษให้กับข้อความ
แอพพลิเคชั่นซอฟต์แวร์: Dreamweaver MX
ความยากในการดำเนินงาน: ★★☆☆☆
เครื่องมือสร้างหน้าเว็บที่ใช้กันทั่วไปของเรา Dreamweaver MX ไม่เพียงแต่สามารถสร้างหน้าเว็บเท่านั้น แต่ยังใช้ตัวกรอง CSS เพื่อแสดงเอฟเฟกต์พิเศษง่ายๆ บนข้อความหรือ รูปภาพ จัดการกับ ลองมาดูตัวอย่างเล็กๆ น้อยๆ เพื่อดูวิธีสร้างข้อความเอฟเฟกต์พิเศษใน Dreamweaver
Halo Word
เริ่ม Dreamweaver ก่อน แทรกตาราง 1×1 ในเอกสารใหม่ ตั้งค่าเส้นขอบเป็น 0 จากนั้นป้อนข้อความที่ต้องแก้ไข
คลิก "ออกแบบ→สไตล์ CSS" ในแผงลอยทางด้านขวาเพื่อเปิดแผงลอยนี้
ปุ่มสี่ปุ่มที่มุมขวาล่างของแผง ได้แก่ เพิ่ม สร้าง แก้ไข และลบสไตล์ CSS
หมายเหตุ: ใน Dreamweaver ตัวกรอง CSS สามารถใช้ได้เฉพาะกับวัตถุที่มีข้อจำกัดด้านพื้นที่ เช่น ตาราง เซลล์ รูปภาพ ฯลฯ แต่ไม่สามารถใช้กับข้อความได้โดยตรง ดังนั้นเราจึงต้องใส่ข้อความที่ต้องเพิ่มด้วยข้อความพิเศษ เอฟเฟกต์ในตารางล่วงหน้า จากนั้นใช้สไตล์ CSS กับตารางเพื่อสร้างเอฟเฟกต์พิเศษให้กับข้อความ
รูปที่ 1 สร้างสไตล์ CSS ใหม่
คลิกปุ่มสไตล์ CSS ใหม่ จากนั้นกล่องโต้ตอบที่แสดงในรูปที่ 1 จะปรากฏขึ้น
เลือก "สร้างสไตล์ที่กำหนดเอง" สำหรับรายการ "ประเภท" เลือก "เฉพาะสำหรับเอกสารนี้" สำหรับ "กำหนดใน" และคลิกตกลงเพื่อเปิดกล่องโต้ตอบคำจำกัดความสไตล์ CSS (รูปที่ 2) เราสามารถทำได้ กำหนดแบบอักษร ขนาดตัวอักษร สี และเนื้อหาอื่นๆ ในตัวอย่างนี้ เราเลือกแบบอักษรให้เป็นสคริปต์อย่างเป็นทางการ ขนาดเป็น 50 พิกเซล และสีเป็นสีขาว
รูปที่ 2 ในการกำหนดสไตล์ CSS
เพื่อสร้างเอฟเฟกต์ข้อความสิ่งที่สำคัญที่สุดคือการตั้งค่าในแผงส่วนขยาย (รูปที่ 3) ตัวกรอง CSS ทั้งหมดแสดงอยู่ในตัวกรองภายใต้ "เอฟเฟกต์ภาพ" ซึ่งสามารถทำได้ ข้อความมีเอฟเฟกต์ขอบเรืองแสง รูปแบบไวยากรณ์ของฟิลเตอร์ Glow คือ Glow(Color=?, Strength=?) ซึ่งมีพารามิเตอร์สองตัว: Color เป็นตัวกำหนดสีของรัศมี คุณสามารถใช้รหัสฐานสิบหก เช่น ffffff หรือคำต่างๆ เช่น Red และ Yellow แสดงถึงความแรงแสดงถึงความเข้มของการส่องสว่างตั้งแต่ 0 ถึง 255 ในตัวอย่างนี้ เราตั้งค่าสีเป็นสีแดง ความเข้มของการส่องสว่างเป็น 8 จากนั้นจึงตกลง
รูปที่ 3 หลังจากตั้งค่าตัวกรองเรืองแสง
เราจะใช้สไตล์ CSS นี้กับตาราง เลื่อนเคอร์เซอร์ไปที่เซลล์ คลิกป้ายกำกับที่มุมซ้ายล่างของ
หน้าต่าง
เอกสาร เพื่อเลือกเซลล์ จากนั้นคลิกสไตล์ที่สร้างขึ้นใหม่ในแผงสไตล์ CSS ในขณะนี้ ป้ายกำกับจะเปลี่ยนเพื่อระบุว่าเป็นสไตล์ CSS ได้ถูกนำไปใช้กับเซลล์แล้วเราไม่เห็นการเปลี่ยนแปลงในหน้าต่างเอกสาร กดปุ่ม F12 เพื่อดูตัวอย่างใน IE และเอฟเฟกต์จะปรากฏขึ้น (รูปที่ 4)
รูปที่ 4 ผลกระทบของคำรัศมี
มันไม่ด้อยไปกว่าเอฟเฟกต์ฟิลเตอร์ใน Photoshop การใส่คำเอฟเฟกต์พิเศษเหล่านี้สองสามคำบนหน้าเว็บจะทำให้หน้าเว็บสวยงามยิ่งขึ้น และเรายังสามารถใช้ปุ่ม PrintScreen เพื่อจับภาพหน้าจอ จากนั้นวางและบันทึกลงในโปรแกรมวาดภาพเพื่อทำให้เป็นภาพแยกต่างหาก
มีตัวกรอง CSS สองตัวสำหรับคำเงา
ที่สามารถสร้างเอฟเฟกต์เงาให้กับข้อความ ได้แก่ Drowshadow และ Shadow
ขั้นตอนในการสร้างคำเงาโดยพื้นฐานแล้วเหมือนกับการสร้างคำรัศมี คุณเพียงแค่ต้องเลือกตัวกรองในรูปแบบ CSS อีกครั้ง
ไวยากรณ์ของตัวกรอง Drowshadow มีดังนี้: DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
ในบรรดาสีเหล่านั้น สีแสดงถึงสีของเงา ซึ่งแสดงเป็นเลขฐานสิบหก OffX และ OffY แสดงถึงจำนวนความเบี่ยงเบนของเงาจากตำแหน่งข้อความ ในหน่วยพิกเซล ค่าบวกคือค่าตรรกะ 1 แสดงถึงการสร้างเงาสำหรับความทึบแสงทั้งหมด องค์ประกอบ 0 หมายถึงการสร้างเงาที่มองเห็นได้สำหรับองค์ประกอบโปร่งใสทั้งหมด
รูปที่ 5 Shadow Word Effect
ตัวอย่างเช่น ถ้าฟิลเตอร์ถูกตั้งค่าเป็น DropShadow (Color=6699cc, OffX=2, OffY=2, Positive=1) เอฟเฟกต์ก็จะดังแสดงในรูปที่ 5
ตัวกรอง CSSคำมาส์ก
ยังให้ฟังก์ชันมาส์ก ซึ่งสามารถประมวลผลส่วนข้อความให้มาส์กได้ หากใช้รูปภาพที่เหมาะสมในพื้นหลัง ก็จะสามารถสร้างเอฟเฟกต์ข้อความกลวงที่สวยงามได้
แทรกตาราง 1×1 ลงในหน้าต่างเอกสาร คลิกป้ายกำกับที่มุมซ้ายล่างของหน้าต่างเอกสารเพื่อเลือกทั้งตาราง เลือกรูปภาพที่เหมาะสมในภาพพื้นหลังของตัวตรวจสอบคุณสมบัติ (ดังแสดงในรูปที่ 6) และ จากนั้นกรอกข้อความที่ต้องการ
รูปที่ 6
ต่อไปเราจะเพิ่มตัวกรองมาสก์ลงในเซลล์ ขั้นตอนจะคล้ายกับสองตัวอย่างก่อนหน้านี้ เลือก Mask (Color=?) ในฟิลเตอร์ พารามิเตอร์นี้จะกำหนดสีของมาสก์
หมายเหตุ: การเลือกสีของข้อความในตัวอย่างนี้ไม่สำคัญ เนื่องจากข้อความจะถูกกลวงออกในเอฟเฟกต์สุดท้ายและสีจะไม่ปรากฏ
รูปที่ 7 หลังจากตั้งค่าเอฟเฟกต์คำมาสก์
แล้ว ให้ใช้สไตล์ CSS นี้กับเซลล์ จากนั้นกดปุ่ม F12 เพื่อดูเอฟเฟกต์ (รูปที่ 7)
หมายเหตุ: รูปภาพพื้นหลังจะถูกเพิ่มลงในทั้งตารางและสอดคล้องกับป้ายกำกับ ในขณะที่สไตล์ CSS จะถูกเพิ่มลงในเซลล์และเป็นป้ายกำกับ อย่าทำผิดพลาด
ในการสร้างตัวละครแบบไดนามิก
เราจำเป็นต้องใช้ตัวกรอง Blur ซึ่งใช้เพื่อสร้างเอฟเฟกต์เบลอ รูปแบบไวยากรณ์ของมันคือ Blur(Add=?, Direction=?, Strength=?) พารามิเตอร์ Add คือค่าบูลีน โดยทั่วไป เมื่อใช้ตัวกรองสำหรับรูปภาพ จะใช้ 0 และเมื่อใช้กับข้อความ จะใช้ 1 ทิศทางแสดงถึงทิศทางที่เบลอ และหน่วยคือมุม ค่าการเคลื่อนไหวเบลอ และหน่วยเป็นพิกเซล ตัวอย่างเช่น หากเรากำหนด Blur(Add=1, Direction=90, Strength=150) คุณจะเห็นเอฟเฟกต์ดังแสดงในรูปที่ 8 ในภาพตัวอย่าง
รูปที่ 8 เอฟเฟกต์คำแบบไดนามิก
อันที่จริงแล้ว ฟิลเตอร์จำนวนมากใน CSS ยังสามารถใช้เพื่อแก้ไขรูปภาพได้ เช่น ฟิลเตอร์เบลอ ซึ่งสามารถสร้างเอฟเฟกต์เบลอให้กับรูปภาพได้ ถ้าเราสามารถใช้ฟิลเตอร์เหล่านี้ได้อย่างชำนาญ บางครั้งเราก็สามารถสร้างเอฟเฟ็กต์ภาพที่ค่อนข้างดีได้โดยไม่ต้องใช้ซอฟต์แวร์ประมวลผลภาพระดับมืออาชีพ