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

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

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

แบบนี้เลย

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

   -moz-border-radius-bottomleft:15px;
   -moz-border-radius-bottomright:15px;
   -moz-border-radius-topleft:15px;
   -moz-border-radius-topright:15px;

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

[geshifilter-html]&#10;   &lt;head&gt;&#10;      &lt;style type=&quot;text/css&quot;&gt;&#10;         .radius {&#10;            -moz-border-radius-bottomleft:15px;&#10;            -moz-border-radius-bottomright:15px;&#10;            -moz-border-radius-topleft:15px;&#10;            -moz-border-radius-topright:15px;&#10;            background-color:#F00;&#10;            display:block;&#10;            line-height:2em;&#10;            width:200px;&#10;            text-align:center;&#10;            color:#FFF;&#10;            font-weight:bolder;&#10;         }&#10;      &lt;/style&gt;&#10;   &lt;/head&gt;&#10;    &#10;   &lt;body&gt;&#10;      &lt;div class=&quot;radius&quot;&gt;&#10;         RADIUS&#10;      &lt;/div&gt;&#10;   &lt;/body&gt;&#10;

[/geshifilter-html]

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

Shikima's blog
Login or register to post comments

:: ค้นหา ::

:: อยากให้รู้จัก ::

อยากคุยกันแบบสดๆ แอด MSN มาได้เลยนะครับ
shikimasan แอท hotmail.com
ยินดีต้อนรับทุกท่านเสมอ

User login

Book navigation

Navigation

:: ผู้สนับสนุน ::

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

:: ค้นหา ::

:: อยากให้รู้จัก ::

Tags