CSS3 : Box Gradient Radius & Shadow ง่ายๆ ใน 4 ขั้นตอน

By -

วันนี้มีเพื่อนคนนึงมาถามเรื่อง การสร้างเงาให้กับขอบของเว็บไซต์ ผมก็เลยได้ไอเดีย ลองเขียนให้เพื่อน พร้อมกับยกตัวอย่างให้ดู ไหนๆก็ได้ ทำไว้แล้ว ก็เลยเอามาแชร์ให้เพื่อนๆ พี่ๆ น้องๆ สำหรับคนที่ยังไม่รู้ได้เอาไปใช้ หรือสำหรับคนที่รู้ ก็ทบทวนความรู้ กันไป….

เริ่มต้นสร้าง div ขึ้นมา โดยใส่ คลาส ให้กับ div นั้น โดยใช้ชื่อว่า box

<div class="box"> </div>

ขั้นตอนที่ 1

เขียน css ผมยกตัวอย่างให้ box ที่ผมสร้างมีขนาด 500* 100 px นะครับ  และให้มีเส้นกรอบที่เป็น สีฟ้าด้วย เขียนโด้ด

<style type="text/css">
.box {
	width:500px;
	height:100px;
	/* ส่วนของ การแสดงเส้น  */
	border-color:#6CF;
	border-style:solid;
	/* จบส่วนของ การแสดงเส้น  */
}
</style>

ผลลัพธ์

ขั้นที่2

แต่ง box ของเรา ด้วยการใส่ gradient เพื่อเพิ่ม มิติให้กับ box เขียนโค้ด

<style type="text/css">
.box {
	width:500px;
	height:100px;
	/* ส่วนของ การแสดงเส้น  */
	border-color:#6CF;
	border-style:solid;
	/* จบส่วนของ การแสดงเส้น  */
	/* ส่วนของ gradient */
	background: rgb(254,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(254,255,255,1) 0%, rgba(210,235,249,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,255,1)), color-stop(100%,rgba(210,235,249,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#d2ebf9',GradientType=0 ); /* IE6-9 */
	/* จบ ส่วนของ gradient */
}
</style>

ผลลัพธ์

ขั้นที่ 3

ยังไม่พอ ต้องเพิ่ม ออฟชั่นกันอีก ด้วยการกำหนด เพิ่ม radius ให้กับ box (ผมยกตัวอย่างแค่ 5px นะครับ ถ้าอยากให้ โค้งมากกว่านี้ ก็กำหนดค่าที่มากกว่า ได้เลยนะครับ ) เท่อย่าบอกใครเลยหล่ะ เขียนโค้ด

<style type="text/css">
.box {
	width:500px;
	height:100px;
	/* ส่วนของ การแสดงเส้น  */
	border-color:#6CF;
	border-style:solid;
	/* จบส่วนของ การแสดงเส้น  */
	/* ส่วนของ gradient */
	background: rgb(254,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(254,255,255,1) 0%, rgba(210,235,249,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,255,1)), color-stop(100%,rgba(210,235,249,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#d2ebf9',GradientType=0 ); /* IE6-9 */
	/* จบ ส่วนของ gradient */
	/* ส่วนการแสดง ผล radius*/
	-webkit-border-radius: 5px;
	border-radius: 5px; 
   /*สบ ส่วนการแสดง ผล radius*/
}
</style>

ผลลัพธ์

ขั้นที่ 4

ยังไม่หนำใจ ปิดด้วย การ สร้างเงาให้กับ box ของเราอีกซักนิด เขียนโค้ด

<style type="text/css">
.box {
	width:500px;
	height:100px;
	/* ส่วนของ การแสดงเส้น  */
	border-color:#6CF;
	border-style:solid;
	/* จบส่วนของ การแสดงเส้น  */
	/* ส่วนของ gradient */
	background: rgb(254,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(254,255,255,1) 0%, rgba(210,235,249,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,255,1)), color-stop(100%,rgba(210,235,249,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#d2ebf9',GradientType=0 ); /* IE6-9 */
	/* จบ ส่วนของ gradient */
	/* ส่วนการแสดง ผล radius*/
	-webkit-border-radius: 5px;
	border-radius: 5px; 
   /*สบ ส่วนการแสดง ผล radius*/
	/*ส่วนของ shadow */
	-webkit-box-shadow: 0px 0px 5px 5px rgba(200, 197, 200, 1);
    box-shadow: 0px 0px 5px 5px rgba(200, 197, 200, 1); 
	 /* จบ ส่วนของ shadow */
}
</style>

ผลลัพธ์ที่เสร็จ

โค้ดทั้งหมด

<!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>CSS BOX</title>
<style type="text/css">
.box {
	width:500px;
	height:100px;
	/* ส่วนของ การแสดงเส้น  */
	border-color:#6CF;
	border-style:solid;
	/* จบส่วนของ การแสดงเส้น  */
	/* ส่วนของ gradient */
	background: rgb(254,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(254,255,255,1) 0%, rgba(210,235,249,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,255,1)), color-stop(100%,rgba(210,235,249,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(254,255,255,1) 0%,rgba(210,235,249,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#d2ebf9',GradientType=0 ); /* IE6-9 */
	/* จบ ส่วนของ gradient */
	/* ส่วนการแสดง ผล radius*/
	-webkit-border-radius: 5px;
	border-radius: 5px; 
   /*สบ ส่วนการแสดง ผล radius*/
	/*ส่วนของ shadow */
	-webkit-box-shadow: 0px 0px 5px 5px rgba(200, 197, 200, 1);
    box-shadow: 0px 0px 5px 5px rgba(200, 197, 200, 1); 
	 /* จบ ส่วนของ shadow */
}
</style>
</head>

<body>

<div class="box"> </div>
</body>
</html>
mitsumasa