iSchool เรียน web design, graphic design, final cut studio

Posts tagged curve box

ทำกล่องขอบโค้งด้วย css

Jan 15th

เรามาทำกล่องขอบโค้ง โดยใช้รูป มุมมน และเขียนแบบพื้นฐาน ด้วย html แบบ standards กัน ผมขอเสนอ วิธีที่เคยใช้ง่ายๆ 3 แบบด้วยกัน ลองนำไปใช้ ตามโอกาส

แบบที่ 1 ตัดรูป ขอบด้านบนและล่างมาแบบนี้

= curve_top.gif

= curve_bottom.gif

เขียน html ดังนี้

<div class=”curvetop”></div>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
<div class=”curvebottom”></div>

เขียน css ดังนี้
<style type=”text/css”>
.curvetop {background:url(curve_top.gif) no-repeat; height:9px; font-size:1px}

.curvebottom {background:url(curve_bottom.gif) no-repeat; height:9px; font-size:1px}

ul {background:#8ACA80; margin:0; padding:0 10px 0 10px; list-style:none; width:157px}

li {border-bottom:1px #FFFFFF dashed}
</style>

ได้ผลดังนี้

ไม่มีอะไรมาก ก็ใส่รูปที่ .curvetop และ .curvebottom แล้วก็ใส่สี ที่ ul ใส่ เส้นประที่ li ส่วนที่ว่าทำไมต้องใส่ font-size:1px อ่านอันนี้ประกอบ การจัดการกับความสูง และ อ่าน อันนี้ด้วยก็ได้ ถ้ายังไม่เข้าใจ ul li เรียนรู้การใช้ ul li step by step
Read more…