เรื่อค่าสี RGB นี่เพื่อนอาจจะเคยประสบพบเจอกันมามั่งแล้ว ยิ่งถ้าใครเคยใช้ Photoshop มาก็จะรู้ว่าเราสามารถเอาโค้ทสีนี้จากไหน โดยเจ้า RGB เนี๊ยะ มันย่อมาจาก
R=Red
G=Green
B=Blue
โดยสีในที่นี้จะเป็นสีของระบบแสง (เหมือนโลโก้ทีวีบ้านเราช่องใดช่องหนึ่ง) โค้ดที่ออกมาจะมีรูปแบบเหมือนๆกัน แต่จะต่างกันตรงค่าตัวเลขหรือตัวอักษรเท่านั้นเอง
#000000
โดยรหัสของสีเราสามารถกำหนดให้มีความ เข้มหรือ อ่อนได้ มีค่าของตัวเลขอยู่ที่ 0-15 โดยจะใช้ตัวเลข 0-9 และ A-F แทนตัวเลข 0-15 โดย 0จะเป็นค่าที่อ่อน(ขาว)ไล่ไปจน F(เข้ม) ยกตัวอย่างเช่นผมจะใช้สีแดงโค้ดที่ออกมาก็จะเป็น
#FF0000
หรือเราจะใส่ค่าสีมาตรฐานเช่น red, green, blue, violet, yellow, salmon, tomato แทนก็ได้นะครับ ไว้เด๋วผมจะทำตารางสี หรือเด๋วหาโหลดไฟล์แฟลชจานสีมาไว้ให้ใช้กัน หรือถ้าใครมี Photoshop เปิดขึ้นมาแล้วคลิกที่สีดูโค้ดเอาก็ได้นะครับ(ง่ายกว่า)
*** หมายเหตุ ***
สีที่ใช้แสดงผลใน Browser นั้นจะมีด้วยกัน 216 สี โดยจะกำหนดด้วยตัวเลข 00 33 66 99 CC และ FF เท่านั้น ไม่เหมือนกับใน Photoshop ที่กำหนดค่าได้ 16ล้านสี แต่เราสามารถใส่ค่าที่เอามาจาก Photoshop เมื่อนำมาใช้กับเว็บแล้วก็ใช้ได้ แต่สีอาจจะเพี้ยนๆไปเพราะ Browser จะหาสีที่ใกล้เคียงกันมาแทนครับ
ฝากเรื่องจานสี แฟลชไว้ก่อนนะไว้เด๋วหาเจอแล้วจะเอามาลงไว้ให้ ม่ายลืมหรอกน่าาา อุอุ
*** มาอัพเดตครับ*** จานสีตกลงหาไม่เจอ แต่ไปเจอเจ้า Addons ของ บราวเซอร์ ของ หมาไฟ Firefox มาแทน มานมีชื่อว่า Colorzilla ใช้ง่ายครับรูปแบบการใช้ก็จะเป็นหลอดสีเหมือน Photoshop เลย แต่เราสามารถชี้ไปที่จุดใดของหน้าเพ็จก็ได้ มันจะแสดงค่าสีออกมาให้เห็นครับ (ใช้แก้ขัดไปก่อนละกานเน้อ) ไว้ค้นเจอจะเอามาอัพเดตให้ครับ
สำหรับคนที่มี Firefox อยู่แล้ว โหลด Addons ได้เลย ที่นี่
ถ้ายังไม่มี Firefox ต้องลงก่อนนะครับโหลดเอาจากที่ไหนก็ได้ครับฟรี (ในนี้ก็มีนะลองมองดูดีๆ อุอุ)
วันพฤหัสบดีที่ 28 กุมภาพันธ์ พ.ศ. 2551
การใส่ Background หรือ พื้นหลัง
สวัสดีครับ หายไปนาน(มากก)แหะๆ ไม่ใช่อะไรหรอกครับคือบอกกันตรงๆเลยว่าขิเกียจ มัวแต่เล่นเกมอยู่ ต้องขอโทษด้วยนะครับ เรามาว่ากันต่อเรื่องที่สัญญาไว้คราวที่แล้วนั่นก็คือ การใส่ พื้นหลังให้กับเว็บไซต์ของเรานั้นเอง
โดยปกติแล้วนะครับ พื้นหลังของเว็บเราถ้าไม่ได้กำหนดค้าอะไรหรือใส่ภาพลงไป ก็จะเป็นสีขาวทั้งหมด แต่การที่เรากำหนดสีพื้นหลังจะทำให้เว็บเราดูน่าสนใจมากขึ้น ตาม ฟาม-พอ-จาย (ความพอใจ -*-) ของเราด้วยครับ
เพื่อนๆทุกคนยังคงจำแท็ก <BODY> ได้ใช่ไหมครับ แต่จำเรื่องแอตทริบริวได้ด้วยหรือเปล่า
รูปแบบการใส่สีพื้นให้กับ Background คือ
<BODY bgcolor="ค่าสี"></BODY>
ว่าแต่ค่าสีที่ได้นั้นเอามาจากไหนกันหล่ะ เรามาทำความรู้จักกับค่าสีกันดีก่า ค่าสี RGB
ตามนี้เลย คลิก
ทีนี้พอเราได้สีที่ต้องการมาแล้วนะครับก็ให้เอาโค้ทสีไปใส่แทนที่ "ค่าสี" ได้เลยสมมุตติ ผมจะใช้สีแดงตะแล๊ดแปร๊ด โค้ทคือ #FF0000 หรือ red ตัวอย่างการใส่โค้ทก็จะเป็น
<BODY bgcolor="red"></BODY>
หรือ
<BODY bgcolor="#FF0000"></BODY>
นั่นเองครับ ลองเซฟเป็น .html ดูครับพอเปิดมาก็จะพบว่าพื้นหลังได้เปลี่ยนสีไปแล้ว
เพื่อนๆหลายคนคงสังเกตุเห็นอิกว่า บางเว็บไซต์ หรือตาม Blog ต่างๆ หรือ ที่กำลังนิยมอยู่ตอนนี้ก็ hi5 นอกจาก Theme ที่ทางผู้ให้บริการจัดหาไว้ให้(มากมาย)แล้ว เรายังทำพื้นหลังให้เป็นสไตล์ของเราเองโดยการกำหนดรูปภาพเข้าไปด้วย โดยรูปแบบก็จะคล้ายๆ กับการเปลี่ยนสีพื้นหลัง แต่แตกต่างกันแค่ตรง แอทริบิวต์เท่านั้นเอง (แอทริบิวต์เขียนไม่เหมือนกันสักที แหะๆ ช่างมานให้อ่านออกเป็นพอ)
รูปแบบ
<BODY background="ชื่อไฟล์ภาพ.นามสกุล"></BODY>
ภาพในที่นี้ถ้าเรามีโฮสของตัวเองเราสามารถอ้างอิงไฟล์ภาพจากชื่อได้เลยถ้ารูปภาพนั้น อยู่แฟ้มเดียวกันกับไฟล์ .html ที่เราสร้างขึ้น สมมุติว่าภาพชื่อ image.gif ก็จะเป็น
<BODY background="image.gif"></BODY>
แต่ถ้าอยู่ต่างแฟ้มกันเราจะต้องอ้างถึง แฟ้มนั้นก่อนด้วย ยกตัวอย่างเช่น เราเก็บไฟล์ภาพไว้ในแฟ้ม /picture/image.gif รูปแบบก็จะเปลี่ยนไปเป็น
<BODY background="picture/image.gif"></BODY>
แต่ถ้าเราไม่มีโฮสหล่ะ (กรณีที่เราทำบล๊อกหรือว่าใช้บริการพวก hi5 หรือที่อื่นๆ ที่ให้เราสามารถเข้าไปแแก้ไขหน้าเพจได้ เราก็สามารถอ้างอิงภาพจากผู้ให้บริการเว็บฟากไฟล์ภาพนั้นๆได้ด้วยนะครับ) งงแหงม มาดูตัวอย่างกันดีกว่า
สมมุตติว่าผมจะเอาภาพ Background โดยค้นหาจากกูเกิ้ล เจ้าเก่า โดยเลือกขนาด 800*600 แล้วผมนำไปฝากไฟล์ไว้กับผู้ให้บริการหนึ่ง(uppic) ได้ Link มาดังนี "http://www.uppic.net/if/ffvii08l.jpg"
ทีนี้ผมก็เอาโค้ทที่ได้ไปใส่แทนที่ชื่อภาพ.นามสกุลเลย รูปแบบที่ได้ก็จะเป็น
<BODY background="http://www.uppic.net/if/ffvii08l.jpg"></BODY>
แล้วเซฟไฟล์เป็น .html แล้ว Run ดูก็จะพบว่าพื้นหลังเราได้เปลี่ยนไปแล้วโดยจะมีรูปนาย could(เกม Final Fantasy VII) ที่ผมอัพโหลดเอาไว้แทนครับ
*** หมายเหตุ ***
1.ภาพที่เราฝากไฟล์ไว้ อย่างใน ต.ย.นี้ http://www.uppic.net/if/ffvii08l.jpg วันดีคืนดีอาจจะหายไปได้ถ้าเว็บ Uppic ที่ผมใช้บริการเกิดลบไฟล์นี้ออกไป
2.การทำภาพพื้นหลังจะทำให้หน้าเพจนั้นโหลดช้ากว่าปกตินะครับ อันนี้เป็นข้อเสียสำหรับคนเน็ตช้ามาก
3.เมื่อหน้าเพจเรายาวลงมาเรื่อยๆ จะพบว่า เมื่อเราเลื่อน ScrollBar ด้านขวามือเราลงไปเนี๊ยะ ภาพจะเลื่อนขึ้นไปด้วย ถ้าใครไม่อยากให้ภาพเลื่อนนะครับก็ให้เพิ่ม แอทริบริวต์ bgproperties="fixed" เข้าไป
<BODY background="http://www.uppic.net/if/ffvii08l.jpg" bgproperties="fixed"></BODY>
ภาพที่ออกมาก็จะไม่เลื่อนใหลไปตามแล้วครับ ***และฟังก์ชั่นนี้ใช้ได้ในเฉพาะ Browser ของ IE(Internet Explorer)เท่านั้นนะครับ ถ้าเปิดด้วย Firefox หรือ Opera ก็จะเลื่อนตาม ScorllBar ครับ
วันนี้พอแค่นี้ก่อนละกันนะครับ เด๋วจะเบลอซะเปล่าๆ สงสัยตรงไหนก็ถามได้นะครับ ผมก็มือใหม่แต่ถ้าตอบได้หรือไม่ได้ ก็จะพยายามเสาะหามาตอบให้จงได้ครับ อิอิ บายๆครับ
สมัครสมาชิก:
บทความ (Atom)