คุณเคยประสบปัญหา เรื่องเส้นใต้ที่ลิ้งค์อยู่ใช่มั้ย
วันนี้เราจะมาแก้ปัญหานี้ด้วยกันดีกว่า
แค่คุณเอาโค้ด นี้ไปติดไว้และเรียกใช้ปัญหานี้ก็จะหายไปแล้ว
text-decoration: none;
สำหรับวิธีการเรียกใช้ ให้เราไปเปิดหน้า Code
นะค่ะ
<a
href="http://www.webthaidd.com">http://www.webthaidd.com</a>
โค้ดลิ้งค์ทั่วๆ ไปจะเป็นแบบนี้ใช่มั้ยล่ะ
วิธีการเรียกใช้คำสั่ง text-decoration: none; ก็ง่ายๆน่ะแค่คุณใส่
style="คำสั่งที่ต้องการ"
ตัวอย่างคำสั่งจริง
<a
href="http://www.webthaidd.com"style="text-decoration:
none;">http://www.webthaidd.com </a>
สมาชิกหลาย ๆ ท่าน คงอยากได้เทคนิคการตกแต่งสินค้าให้ดูมีลูกเล่นน่าสนใจ วันนี้ทางทีมงาน Web Design ขอนำเสนอเทคนิคดี ๆ ที่ให้สมาชิก สามารถนำไปตกแต่งสินค้า ให้ดูหลากหลายมากขึ้น นั่นคือ เทคนิคการสร้างบาร์โค้ด ค่ะ
1. สร้างเอกสารใหม่ File ---> New ขนาด 180 x 60 pixels
2. ตั้งค่าสี Forground = #FFFFFF (สีขาว) ,ฺbackground = #000000 (สีดำ) และทำการสร้าง Layer ขึ้นมาใหม่ โดยคลิกที่ Create a new layerที่ด้านล่าง จากนั้นให้เลือกเครื่องมือ Paint Bucket Tool
เทสีขาวลง Layer ที่สร้างขึ้นมาใหม่
3. เมื่อเทสีลง Layer ที่สร้างใหม่เรียบร้อยแล้ว ให้มาที่เมนู Filter ---> Noise ---> Add Noise... จากนั้นปรับค่า Amount = 400% และคลิกเลือกที่ Gaussian และติ๊กเครื่องหมายถูกที่ช่อง Monochromatic
4. จากนั้นไปที่เมนู Filter ---> Blur ---> Motion Blur... และปรับค่า Distance = 999 pixels
5. ไปที่เมนู Edit ---> Transform ---> Rotate 90 CW
6.ไปที่เมนู Image ---> Adjustments ---> Levels (Ctrl + L) และปรับค่า Input Levels = 94, 0.40, 228
7. เมื่อตั้งค่าต่างๆเรียบร้อยแล้ว จากนั้นให้ทำการ Copy Layer โดยการคลิกขวาที่ Layer 1 และเลือก Duplicate Layer... โดยให้ทำการ Copy Layer 1 เอาไว้ 2 ครั้ง ดังรูป เมื่อทำการ Copy เรียบร้อยแล้ว ให้ทำการจัดรูปให้เรียงกันเป็นเหมือน barcode โดยใช้เครื่องมือ Move Tool
8. จากนั้นให้ทำเลือก Layerทั้งหมด โดยการกด Shift ที่คีย์บอร์ดค้างไว้ และทำการเลือก Layer ที่ต้องการ ให้เป็นแถบสีน้ำเงิน และกด Ctrl + E ดังรูป
9. เลือกที่เครื่องมือ Rectangular Marquee Toolsและทำการเลือกพื้นที่ส่วนที่ต้องการลบ เพื่อเว้นที่สำหรับพิมพ์ตัวเลขดังรูป
10. ใช้เครื่องมือ Horizontal Type Toolและทำการพิมพ์ตัวเลขลงในพื้นที่ ที่ได้เตรียมเอาไว้ เพียงเท่านี้ก็จะได้ Barcode แบบเก๋ๆ ง่ายๆ เอาไว้ตกแต่งรูปภาพสินค้าแล้วคะ
ผลลัพธ์ที่ได้
เพื่อหลีกเลี่ยงข้อจำกัดของการแสดงผลข้อความ
ซึ่งมีรูปแบบไม่คงที่ขึ้นอยู่กับเว็บเบราเซอร์ของผู้ใช้ และอาจมีรูปแบบตัวอักษร (Font)
ไม่เพียงพอต่อการใช้งาน
อาจใช้วิธีการสร้างข้อความที่ต้องการด้วยโปรแกรมตกแต่งภาพแล้วนำมากำหนด ใน Property
"background-image" แทนข้อความปกติได้ เช่น การแสดงหัวข้อเรื่อง
เป็นต้น
แต่ข้อเสียของเทคนิคนี้ก็คือ
ถ้าภาพที่แสดงมีขนาดใหญ่อาจทำให้เสียเวลาในการโหลดรูปภาพนาน
เพราะฉะนั้นควรกำหนดขนาดรูปภาพให้เล็กที่สุดเท่าที่จะทำได้เพื่อลดระยะเวลาในการโหลดรูปภาพมาแสดง
และหากเว็บเบราเซอร์ของผู้ใช้ไม่สามารถโหลดรูปภาพได้อาจทำให้ไม่เห็นข้อความ
ดังนั้นจึงต้องใส่ข้อความปกติไว้ด้วยพร้อมกับกำหนดค่าจำนวนเต็มลบใน Property
"text-indent" เพื่อเลื่อนข้อความไปทางซ้ายของจอภาพ
(ซ่อนข้อความแล้วแทนที่ด้วยรูปภาพ)
ตัวอย่างโค้ต
ผลลัพธ์ที่ได้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น