Css Style ไล่สีพื้นหลัง ใช้ได้กับ Background หน้าเว็บ และButton

ตัวอย่างการกำหนดให้

       สีพื้นหลังดังตัวอย่างจาก css ทำได้ดังนี้(คลิก View Codeเพื่อดู style ครับ)

View Code

----------------------------------------------------------

<style type="text/css">
.div-frm
{
text-align:center;vertical-align : middle; display : table-cell;
background-image:-webkit-gradient(linear,left top,left bottom,from( #ffffff ),to( #5dafd3 ));
background-image:-webkit-linear-gradient( #ffffff,#5dafd3 );
background-image: -moz-linear-gradient( #ffffff,#5dafd3 );
background-image: -ms-linear-gradient( #ffffff,#5dafd3 );
background-image: -o-linear-gradient( #ffffff,#5dafd3 );
background-image: linear-gradient( #ffffff,#5dafd3 );
}
.new-Button{
width:150px;
height:70px;
border-radius:10px;
text-align:center;
vertical-align : middle;
font-size:14px;
margin:7px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) inset;
}
.new-Button:hover{
box-shadow: 0 0 12px #387BBE;
text-shadow: 0 1px 0 #fdf581;
font-size:16px;
font-weight:bold;
}
.div-style-button{
text-shadow: 0 1px 0 #FFFFFF;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) inset;
}
.div-style-button:hover{
text-shadow: 0 1px 0 #FFFFFF;
border-radius: 10px;
margin:7px;
box-shadow: 0 0 12px #387BBE;
}
</style>
<div class="div-frm" style="width:300px; height:400px;">ตัวอย่าง1</div>
<input type="submit" id="buttom" class="div-frm new-Button" value="ตัวอย่าง2" />
<div class="div-frm div-style-button" style="width:100px; height:80px;">ตัวอย่าง3</div>
------------------------------------------------


ผลที่ได้จาก code ตัวอย่างครับด้านล้างคับ

ตัวอย่าง1




ตัวอย่าง3

การใส่สีพื้นหลังแบบ Linear-Gradient อาจจะเป็นเรื่องยากสำหรับบ้างท่าน แต่ก็มีตัวช่วยเว็บตามลิ้งเลยคับ
http://jquerymobile.com/themeroller/index.php

ตรงช่อง start และ End

text-align:center;vertical-align : middle; display : table-cell;
background-image:-webkit-gradient(linear,left top,left bottom,from( #ffffff ),to( #5dafd3 ));
background-image:-webkit-linear-gradient( #ffffff,#5dafd3 );
background-image: -moz-linear-gradient( #ffffff,#5dafd3 );
background-image: -ms-linear-gradient( #ffffff,#5dafd3 );
background-image: -o-linear-gradient( #ffffff,#5dafd3 );
background-image: linear-gradient( #ffffff,#5dafd3 );

แสดงได้ทั้ง IE , Chome, FireFox
ขอจบแค่นี้ก่อนจะเอาสิ่งดีๆมาเก็บไว้ใหม่คับ