เรียนรู้การสร้าง ปุ่มกด ตัวเลข ด้วย css (ทำงานได้ดีกับ บราวเซอร์ที่รองรับ css3 และ html5)
ในที่นี้ จะให้เห็นเป็นแนวทางเท่านั้น ไม่ได้เพิ่มโค้ดหรือ javascript โค้ดเข้าไป
ใช้ ul และ li เท่านั้น และปรับแต่งสีสัน รูปแบบด้วย css
เช่น ที่ใช้ในที่นี้คือ
การกำหนด รัศมี ของ li ทำให้กลม ด้วย
border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%;
หรือสามารถใช้เครื่องมือ จากเว็บไซต์ นี้ได้เลย http://www.cssmatic.com/border-radius
การกำหนดเงา หรือรูปแบบของเงา
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
ใช้เครื่องมือ จากเว็บไซต์ http://www.cssmatic.com/box-shadow
ดูตัวอย่าง และโค้ดทั้งหมด สำหรับทดสอบ ด้านล่าง
ตัวอย่าง
- Clr
- ,
- .
- _
- Del
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 0
โค้ดทั้งหมด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.i_num_pad{
position: absolute;
list-style: none;
margin: 0px;
padding: 0px;
width: 170px;
height: 105px;
background-color: #4D4646;
padding: 5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #666666;
display:block;
box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.75);
}
.i_num_pad li{
position: relative;
list-style: none;
margin: 2px;
padding: 0px;
display: block;
width: 30px;
float: left;
text-align: center;
height: 30px;
line-height: 30px;
background-color: #949494;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 0px solid #000000;
font-size:15px;
font-weight:bold;
cursor:pointer;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}
</style>
</head>
<body>
<br /><br />
<ul class=i_num_pad>
<li>Clr</li><li>,</li><li>.</li><li>_</li><li>Del</li>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
<li>6</li><li>7</li><li>8</li><li>9</li><li>0</li>
</ul>
</body>
</html>
