Skip navigation.
Home
Chiang Mai Dev Hub
Home » Blogs » Shikima's blog

ทำปุ่มโค้งมนแบบง่ายๆ ไม่ต้องใช้รูปเลย

Submitted by Shikima on Wed, 28/10/2009 - 15:56

ปกติเวลาทำปุ่มใน HTML แบบไม่ปกติ เช่น ขอบมน หรือ วงกลม ผมก็จะใช้รูปทำเป็น Background เอา แต่ไปเจอวิธีง่ายๆ ใช้แค่ CSS ก็กลมมนได้อย่างสวยงาม

แบบนี้เลย

มนกลม สวยงามมากมาย ดูๆ ไปแล้วคงต้องใช้รูปเป็นพื้นหลังแน่ๆ เลย แต่ไม่ต้องหรอกครับ แค่ CSS บ้านๆ นี่แหละ ก็ทำให้ขอบมันมนได้้เลย แค่เขียนโค๊ดสั่งให้แต่ละด้านมนตามนี้

  1.    -moz-border-radius-bottomleft:15px;
  2.    -moz-border-radius-bottomright:15px;
  3.    -moz-border-radius-topleft:15px;
  4.    -moz-border-radius-topright:15px;

ถ้าเขียนเต็มๆ แบบในรูปข้างบนก็เขียนได้ราวๆ นี้ครับ

  2.    <head>
  3.       <style type="text/css">
  4.          .radius {
  5.             -moz-border-radius-bottomleft:15px;
  6.             -moz-border-radius-bottomright:15px;
  7.             -moz-border-radius-topleft:15px;
  8.             -moz-border-radius-topright:15px;
  9.             background-color:#F00;
  10.             display:block;
  11.             line-height:2em;
  12.             width:200px;
  13.             text-align:center;
  14.             color:#FFF;
  15.             font-weight:bolder;
  16.          }
  17.       </style>
  18.    </head>
  19.        
  20.    <body>
  21.       <div class="radius">
  22.          RADIUS
  23.       </div>
  24.    </body>
  25. </html>

เห็นไหมง่ายๆ เลยแต่ มันใช้ได้แค่ Firefox นะครับ เพราะว่ามันใช้ Gecko เป็น Render engine อ่ะ ลองกับ IE และ Opera แล้วใช้งานไม่ได้ครับ จะเป็นสี่เหลี่ยมเฉยๆ ก็อย่าไปคิดมากครับ คนใช้ Firefox เยอะแหละ งิงิ

No votes yet
»