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

03 March 2014 By Ninenik Narkdee
css number pad

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ css number pad



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


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: css number pad







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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ