เกริ่นนำ
บทความนี้จะมาบอกถึงเทคนิคในการสร้างบอลลูนคำพูดง่ายๆ ด้วยคำสั่ง CSS ซึ่งจะใช้ 2 คำสั่งพื้นฐาน คือ คำสั่ง before และ การสร้างสามเหลี่ยม (trangle) กัน
คำสั่ง before กับ after
คือ คำสั่งที่ใช้แทรกสิ่งที่เราต้องการไว้ก่อน หรือ หลังคลาสที่เราระบุ ซึ่งถือเป็นการช่วยลดปัญหาการสร้างคลาสเยอะจนเกินไปได้เป็นอย่างดีเลยทีเดียว
.talk::before{
content: '...';
}
สร้างสามเหลี่ยม (trangle)
ใน CSS แรกๆ จะไม่สามารถสร้างสามเหลี่ยมได้ จึงต้องใช้รูปแทนการสร้างสามเหลี่ยม แต่ในเวอร์ชั่นปัจจุบันสามารถสร้างสามเหลี่ยมได้แล้ว ซึ่งสะดวก และ ง่ายในการปรับแต่งมากเลยที่เดียว และยังสามารถเข้าไป generator code ได้ที่ app.eky.hk เลย
.trangle{
width: 0;
height: 0;
border-style: solid;
border-width: 20px 15px 0 15px;
border-color: #fff transparent transparent transparent;
}
ตัวอย่างโค้ด
Narongchai Suphiratwanich (K)
นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ SeedWebs & SeedThemes และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย