วันเสาร์, ธันวาคม 5

5-4 การตกแต่งรูปภาพ และวีดีโอ

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

ถ้านักศึกษาพร้อมแล้วเข้าโปรแกรม NetBeans ได้เลยนะครับ
ในการใส่เส้นขอบหรือเส้นกรอบให้กับตัวรูปภาพหรือ video เพื่อให้มันมีความสวยงามมากยิ่งขึ้น เราก็สามารถใช้คำสั่ง CSS3 ในการจัดการได้
ดังนั้นเราเข้าไปใน เราเข้าใน CSS3 เหมือนเดิม ต้องการใส่เส้นกรอบให้กับรูปภาพหรือ video ในที่นี้ อาจารย์ ขออ้างอิงการใช้งาน class เพราะว่าบ้างที่การปรับ
แต่งรูปภาพ หรือ video
แต่ละรูป
แต่ละรูป
แต่ละ video อาจมีการปรับ
แต่งที่ไม่เหมือนกัน
ดังนั้นจะเรียกใช้เป็น class เพื่อความสะดวกในการปรับ
แต่งเฉพาะจุดขึ้นมา
ดังนั้นอาจารย์ตั้งชื่อ class เป็น vBorder ต้องการใส่เส้นกรอบให้กับตัวรูปภาพหรือ VDOเราจะใช้คำสั่งว่า border จากนั้นระบุขนาดนะครับ
ของเส้นกรอบ ว่าเราต้องการให้เส้นกรอบมีขนาดเท่าไร นะครับ
สมมุติว่าอาจารย์เอา 5px จากนั้นระบุสีว่าต้องการให้เส้นกรอบเป็นสีอะไร อาจารย์เอาเป็นสีน้ำเงินแล้วกัน อันที่3 ที่ต้องระบุก็คือเป็นลักษะของเส้นกรอบที่เราจะใส่ลงไปสมมุติ อาจารย์เอาเป็นเส้นกรอบธรรมดาคือ Solid จากนั้นนักศึกษาลอง Save และลองเรียกใช้ class vBorder นะครับ
เอาในส่วนของรูปภาพก่อน เราจะเรียกใช้ class แอตทริบิวต์ class vBorder จากนั้นเราลอง Save แล้วลอง Run โปรแกรม นักศึกษาก็จะเห็นว่ารูปภาพที่เราเรียกใช้ class ที่ใส่คำสั่งBorder ก็จะมีเส้นกรอบขึ้นมาทั้ง 4 ด้าน
แต่ละด้านกำหนดขนาด 5 px มีสีเป็นสีน้ำเงินลักษณะ solid ซึ่งลักษณะ 3 อย่างนี้เราสามารถปรับเปลี่ยนได้อิสระตามความต้องการ ซึ่งในลักษณะของการใส่เส้นกรอบเราไม่จำเป็นต้องใส่ทั้ง 4 ด้าน ก็ได้เราสามารถใส่ด้านใดด้านหนึ่งหรือ 2 ด้าน 3 ด้าน ด้าน ก็ได้แล้ว
แต่เราจะเขียนขึ้นมา สมมุติอาจารย์สร้างมาอีกหนึ่ง class เป็น cBordr จากนั้นระบุคำสั่ง ในการใส่เส้นกรอบลงไป border เพียง
แต่คราวนี้
ถ้าต้องการใส่เพียงบ้างด้านให้นักศึกษาระบุลงไปเลยต้องการใส่เส้นกรอบด้านไหนต้องการใส่ที่ด้านซ้ายก็ใส่เป็น border-left จากนั่นระบุ ค่าต่างๆเหมือนเดิม 5 pixe blue solid เหมือนเดิมจากนั้น Save และลองเรียกใช้ class cBorder จากนั้น Save แล้วลอง Run โปรแกรม นักศึกษาก็จะเห็นว่า Tag Div ที่อาจารย์เรียกใช้ class cBorder ที่เราใส่ border-left ก็จะมีเส้นกรอบขึ้นมาแค่ด้านซ้ายด้านเดียว
ดังนั้นเวลาต้องการใส่เส้นกรอบเราสามารถใส่4ด้านก็ได้หรือเราจะสามารถระบุเป็นบ้างด้านก็ได้เช่นกัน นะครับ
นอกจากการใส่เส้นกรอบเรายังสามารถปรับรัศมีความโค้งให้กับมุมทั้ง 4 ของเส้นกรอบได้ว่าต้องการมีความโค้งมนเท่าไร โดยนักศึกษาใส่คำสั่งเป็น border ต้องการปรับส่วนโค้งเราก็ใช่ border-radius จากนั้นใส่รัศมีที่ต้องการให้มีความโค้ง สมมุติอาจารย์ 20px และก็ Save จากนั้นลอง Run โปรแกรม นักศึกษาก็เห็นว่า เมื่อเราใส่ border-radius ตรงเส้นกรอบ
แต่ละวงก็จะมีความโค้งโผล่ขึ้นมาตามรัศมีที่เรากำหนดค่าลงไป
ถ้าเราต้องการให้โค้งมาก เราก็กำหนดรัศมีที่มีค่ามากๆก็จะมีความโค้งมากขึ้นตามที่เรากำหนดค่าไว้ นี้คือการกำหนดรัศมีความโค้งของเส้นกรอบ นะครับ
หรือบางครั้งเวลาเราใส่เส้นกรอบกับรูปภาพกับ video เราอาจจะใส่เส้นกรอบในลักษะที่มีแสงเงาซ้อนเข้าไปด้วย
ดังนั้น
ถ้านักศึกษาต้องการใส่แสงเงาซ้อนเข้าไปด้วย ให้นักศึกษาใส่เป็นคำสั่งว่า box-shadow จากนั้นกำหนดรายละเอียดว่าต้องการให้แสงเงาของเรามีการเลื่อนตำแหน่งไปขวาแล้วก็ลงข้างล่างไประยะเท่าไหร่ แล้วก็เป็นสีอะไรสมมุติอาจารย์ให้เลือน 5px ทั้ง ขวา ทั้ง ล่างและก็เป็นสีดำ จากนั้น Save จากนั้นลอง Run โปรแกรมดู นักศึกษาก็จะเห็นว่าก็จะมีแสงเงาโผล่ขึ้นมาละ เราให้ เลื่อน ไปขวา 5 ลงล่าง 5 ก็จะมีเหลื่อมๆกันนิดนึง มีสีแสงเงาเป็นสีดำซึ่งลักษณะตรงนี้เราสามารถจะปรับ
แต่งตัว Video ได้เหมือนกันโดยส่วนหนึ่งที่สามารถนำไปประยุกต์ใช้ กับตัว video ได้ที่เค้านิยมกันก็คือเวลาเราให้ video เล่น หรือ เวลาเราโฟกัสที่ตัว video เราจะให้ตัว video ของเรามีลักษณะแสงเงาที่โด่ดเด่นขึ้นมาคราวนี้ อาจารย์ต้องการให้ทำงานที่ Tag video เลย
ดังนั้นเวลาอ้างอิง เราก็จะอ้าง Tag video ในการปรับ
แต่ง จากนั้นต้องการให้มันทำงานที่เราโฟกัสหรือเราเอาเม้าส์ไปวางเล่นที่ตัว video เราก็จะเลือก hover ก็คือวางหรือเม้าส์ที่ตัว video ขึ้นมาหรืออีกตัวหนึ่งก็ video focus ก็คือกรณีที่เราโฟกัสวิดิโอต้องการให้มีแสงเงาโฟกัสขึ้นมาเราก็ใช้คำสั่งเดิม box-shadow จากนั้นอาจารย์ต้องการให้มีขนาด เป็น 20 pixe นะครับ
และก็มีสีเป็นสีเขียวจากนั้น Save แล้วก็ลอง Run โปรแกรมดูนะครับ

ดังนั้น
ถ้าเราไม่กดเล่น หรือโฟกัสที่ video ก็จะไม่มีแสงเงาแสดงขึ้นมา

แต่…

ถ้าเมื่อใดที่เราเอาเม้าส์ไปวางข้างบนหรือเรากด play ที่ตัว Video นักศึกษาก็จะเห็นสีเขียวที่เป็นแสงเงาแสดงขึ้นมาเป็นยังกันมั่งครับ
รู้จักคำสั่งในการปรับ
แต่งรูปภาพและ video กันแล้วใช้ไหมครับ
ในหัวข้อถัดไปจะเป็นหัวข้อสุดท้ายของการปรับ
แต่งส่วนแสดงผลด้วยcss3 แล้ว ซึ่งในหัวข้อถัดไปจะเป็นส่วนที่ 4 เป็นการปรับ
แต่งฟอร์มที่เราสร้างขึ้นมา ว่าเราสามารถปรับ
แต่งให้มีความสวยงามได้ยังไง
ถ้านักศึกษาพร้อมแล้วคลิ๊กที่หัวข้อถัดไปได้เลยนะครับ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *