หน้าเว็บ

Tech &Tips

เทคนิคการซ่อนข้อความด้วยรูปภาพ


เพื่อหลีกเลี่ยงข้อจำกัดของการแสดงผลข้อความ ซึ่งมีรูปแบบไม่คงที่ขึ้นอยู่กับเว็บเบราเซอร์ของผู้ใช้ และอาจมีรูปแบบตัวอักษร (Font) ไม่เพียงพอต่อการใช้งาน อาจใช้วิธีการสร้างข้อความที่ต้องการด้วยโปรแกรมตกแต่งภาพแล้วนำมากำหนด ใน Property "background-image" แทนข้อความปกติได้ เช่น การแสดงหัวข้อเรื่อง เป็นต้น
แต่ข้อเสียของเทคนิคนี้ก็คือ ถ้าภาพที่แสดงมีขนาดใหญ่อาจทำให้เสียเวลาในการโหลดรูปภาพนาน เพราะฉะนั้นควรกำหนดขนาดรูปภาพให้เล็กที่สุดเท่าที่จะทำได้เพื่อลดระยะเวลาในการโหลดรูปภาพมาแสดง
และหากเว็บเบราเซอร์ของผู้ใช้ไม่สามารถโหลดรูปภาพได้อาจทำให้ไม่เห็นข้อความ ดังนั้นจึงต้องใส่ข้อความปกติไว้ด้วยพร้อมกับกำหนดค่าจำนวนเต็มลบใน Property "text-indent" เพื่อเลื่อนข้อความไปทางซ้ายของจอภาพ (ซ่อนข้อความแล้วแทนที่ด้วยรูปภาพ)

ตัวอย่างโค้ด


ผลลัพธ์ที่ได้



การใส่ youtube ลงในบล็อค

1. ไปที่ YouTube แล้วคลิกเลือกวีดีโอที่เราต้องการ
2. จากนั้นให้ดูทางขวาของวีดีโอ ในส่วนที่เป็นข้อมูลเกี่ยวกับวีดีโอ ให้ copy โค้ดตรง Embed เก็บไว้ก่อนดังรูป 



ตัวอย่างโค้ดตรง Embed: 
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/6gmP4nk0EOE"></param><paramname="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/6gmP4nk0EOE" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

เราสามารถกำหนดความกว้างยาวของวีดีโอได้ โดยใส่ค่าใหม่ตรง width คือค่าความกว้างของวีดีโอ และ height คือค่าความสูงของวีดีโอ ตรงที่ hilight 
3.จากนั้น ตอนเขียนบลอคใหม่ เมื่อพิมพ์ไปถึงตำแหน่งที่เราจะใส่ youtubeให้กดที่ปุ่ม <> เพื่อเข้าสู่ HTML Mode ดังรูป 


4. วางโค้ดที่ copy มาจากเวบ youtube (จากข้อ 2) จากนั้นกดปุ่มเดิม เพื่อกลับสู่ Mode เดิม 
5. แค่นี้เราก็มีวีดีโอจาก YouTube ในบลอคเราแล้ว


เทคนิคการแต่งภาพสไตล์โลโม

  หลายคนอาจจะงงว่าภาพ โลโม (LOMO) มันคืออะไร มันก็คือภาพที่มี Contrast จัดๆ ขอบรูปมืดๆ นั้นเอง ภาพที่ตกแต่งด้วยสไตล์โลโมนั้นจะมีลักษณะสีที่ดูสดขึ้น ทำให้ภาพธรรมดา ๆ มีความโดดเด่นขึ้นในด้านของสีสรรที่สวยงาม แม้ว่าเราจะไม่มีกล้องโลโมที่จะถ่ายภาพให้ออกมาแปลกตา แต่เราก็สามารถนำภาพจากกล้องดิจิตอลของเรา มาดัดแปลงแต่งเติมให้เป็นภาพแนวโลโมได้ไม่ยากค่ะ วันนี้ทางทีมงาน Design guru ขอแนะนำวิธีการทำภาพแนวโลโมแบบไม่ต้องออกแรงมากค่ะ เพราะเราจะใช้ Script ซึ่งเป็นวิธีแบบสำเร็จรูป
       1. ให้เปิดรูปที่ต้องการขึ้นมา โดยไปที่ File---->Open

2. เมื่อได้รูปที่ต้องการแล้วให้ไปที่ เมนู File ---> Scripts --- > CHLomoScript แล้วรอสักครูเพื่อให้โปรแกรมจัดการรูปภาพให้เรา
3. จากรูปที่ได้จะเห็นว่าสีมันจัดจ้านแสบตามาก เราต้องมาลดสีมันนิดหน่อย โดยคลิกเลือกที่เลเยอร์ Background และไปที่เมนู Image ---> Adjustments ---> Hue/saturation หรือ Ctrl+U
ปรับค่า Saturation ตามใจชอบเพื่อลดความจัดของสีลงหน่อย จากในตัวอย่างปรับลดลงประมาณ -35
เปรียบเที่ยบความแตกต่างของรูปก่อนทำและหลังทำ
เขียนโดย Porn 18.31 น.