วิธีทำ Highlight ข้อความสีเหลืองใน Blogger

Natthakon M. 1 comment Blogger

ช่วงหลังมานี้ มักจะเห็นว่ามีหลายเว็บไซต์จะใช้การเน้นข้อความ (Highlight) ด้วยสีเหลือง ซึ่งสามารถทำกับ Blogger ได้โดยใช้ <mark> element ดังนี้

วิธีทำ Highlight ข้อความสีเหลืองใน Blogger

ในการทำ Highlight ข้อความสีเหลืองใน Blogger จะเหมือนกับการทำในเว็บไซต์ทั่วไป โดยโช้ <mark> element ซึ่งรองรับในทุกเว็บเบราว์เซอร์

developer.mozilla.org/en-US/docs/Web/HTML/Element/mark

ตัวอย่างเช่น

<h2><mark>Example1</mark></h2>

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

---

วิธีทำ Low Highlight ใน Blogger โดยใช้ linear-gradient()

Low Highlight Text Effect มีลักษณะคล้ายกับ Highlight ธรรมดา แต่จะมีการเลื่อนแถบสีเหลืองลงมาเล็กน้อยและเลยข้อความเล็กน้อย พบเห็นได้บ่อยเช่นเดียวกัน ส่วนตัวชอบแบบนี้มากกว่า สามารถทำได้โดยการใช้ linear-gradient() เพิ่ม CSS ต่อไปนี้ (ดูวิธีเพิ่ม CSS ใน Blogger)

.highlight{background:linear-gradient(180deg, transparent 50%, yellow 50%);}}

เรียกใช้ด้วย Class .highlight ดังนี้

<h2><span class="highlight">Example2</span></h2>

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