PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สร้าง number pad แป้นตัวเลข ด้วย css อย่างง่าย

03 March 2014 By


เรียนรู้การสร้าง ปุ่มกด ตัวเลข ด้วย 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>

Tags:: number pad css





URL สำหรับอ้างอิง