สร้างสีสันให้เว็บของคุณด้วย CSS3 [Step by Step]

หมายเลขบทความ (Article ID): 2579835 - ผลิตภัณฑ์ที่เกี่ยวข้องในบทความนี้
ขยายทั้งหมด | ยุบทั้งหมด

บทนำ

หลายครั้งด้วยกันที่คุณต้องการให้เว็ปของคุณออกมามีความสวยงาม เช่นตารางหนึ่งตาราง เราอาจจะใส่ border style เข้าไป หรืออาจจะนำทั้งนำรูปภาพเข้ามาช่วยเสริมเพื่อให้หน้าตาเว็ปมีความนุ่มนวลมากยิ่งขึ้น ก่อนที่จะมี CSS3 นั้น คุณสามารถสร้างตารางแบบรูปตัวอย่างด้านล่างที่ดูแล้วอาจจะรู้สึกทื่อๆ

อาการ

ยุบรูปภาพนี้ขยายรูปภาพนี้
2579837


ตัวอย่าง Source Code ตามด้านล่าง

<div class="panel">

<div class="paneltop"><h1>Visual Studio 2010 Without CSS3</h1></div>

<div class="panelcontent">

<p>ASP.NET developers have been asking for HTML5 & CSS3 support.</p>

<p>Here comes a free extension available for Visual Studio 2010 SP1.</p>

</div>

</div>



<style type="text/css">

.panel {border: 1px solid Gray; width: 250px; margin: 20px; background: white;}

.paneltop h1 {padding: 5px; margin: 0px; font-family: Verdana}

.paneltop {background: Silver; color: white; height: 70px;}

.panelcontent {padding: 3px;} 

</style>

ความละเอียด

แต่คุณก็สามารถเพิ่ม CSS3 ในเว็ป เพื่อให้ตารางดูแล้วลดความแข็งกระด้างลงไป แต่ก่อนอื่นหากคุณใช้ Microsoft Visual Studio 2010 คุณต้องไปดาวน์โหลด Web Standards Update for Microsoft Visual Studio 2010 SP1 เพื่อให้ Visual Studio 2010 รู้จัก HTML5 และ CSS3 Tag ได้ที่ 

http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83

ยุบรูปภาพนี้ขยายรูปภาพนี้
2579838

.panel {border-radius: 9px;}

.paneltop {border-radius: 8px 8px 0 0;}

หรือถ้าเราต้องการให้มีเงาออกมาจากตารางด้านบนก็สามารถเพิ่มเติมดังตัวอย่างด้านล่าง

ยุบรูปภาพนี้ขยายรูปภาพนี้
2579839
.panel {box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);} 

นอกจากนี้ CSS3 ยังสามารถทำ Gradient, Stripes, Button และฟังก์ชั่นอื่นๆ ได้อีกมากมาย ซึ่งคุณสามารถหาข้อมูลประกอบเพิ่มเติมได้ที่ http://msdn.microsoft.com/en-us/ie/gg593671 


ข้อมูลเพิ่มเติม

สำหรับ Cross Browser อื่นๆ คุณสามารถหาข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลดังต่อไปนี้

การปฏิเสธความรับผิดเนื้อหาแนวทางแก้ปัญหาจากประชาคม

MICROSOFT CORPORATION และ/หรือ ซัพพลายเออร์ของบริษัท ไม่ได้เป็นตัวแทนรับรองถึงความเหมาะสม ความเชื่อถือได้ หรือความเที่ยงตรงของข้อมูลและภาพกราฟิคที่เกี่ยวข้อง ซึ่งอยู่ในที่นี้ ข้อมูลดังกล่าวทั้งหมดและภาพกราฟิคที่เกี่ยวข้อง ได้รับการนำเสนอ “ตามที่เป็น” โดยไม่มีการให้การรับประกันใดๆ MICROSOFT และซัพพลายเออร์ของบริษัท ขอปฏิเสธการรับประกันและเงื่อนไขทั้งหมดในที่นี้ ที่เกี่ยวข้องกับข้อมูลและภาพกราฟิคนี้ รวมถึงการรับประกันและเงื่อนไขโดยนัยทั้งหมดของความสามารถในการจัดจำหน่าย ความเหมาะสมสำหรับวัตถุประสงค์เฉพาะ การทำงานที่คล้ายคลึงกับผลงานบุคคล กรรมสิทธิ์ และการไม่ล่วงละเมิด คุณตกลงเป็นการเฉพาะด้วยว่า ไม่ว่าในกรณีใด MICROSOFT และ/หรือ ซัพพลายเออร์ของบริษัท ไม่รับผิดชอบภาระใดๆ เกี่ยวกับความเสียหายทั้งทางตรง ทางอ้อม จากการใช้งานอย่างหนัก อุบัติเหตุ ความเสียหายเฉพาะกรณี หรือที่เกิดขึ้นตามมา ไม่ว่าแบบใด รวมทั้งแต่ไม่จำกัดเฉพาะ ความเสียหายจากการสูญเสียการใช้ การสูญหายของข้อมูลหรือกำไร ที่เกิดขึ้นจากหรือเกี่ยวข้องกับการใช้หรือการไม่สามารถใช้ข้อมูลและภาพกราฟิคที่เกี่ยวข้องที่อยู่ในที่นี้ ไม่ว่าจะมีพื้นฐานจากการติดต่อ การล่วงละเมิด ความประมาท ภาระหนี้สิน หรือในทางอื่นใด แม้ว่า MICROSOFT หรือซัพพลายเออร์รายใดของบริษัท จะได้รับการแจ้งถึงความเสียดายที่อาจเป็นไปได้นั้นแล้วก็ตาม

คุณสมบัติ

หมายเลขบทความ (Article ID): 2579835 - รีวิวครั้งสุดท้าย: 16 สิงหาคม 2554 - Revision: 1.0
ใช้กับ
  • Microsoft Visual Studio 2010 Ultimate
Keywords: 
kbhowto kbcommunity kbstepbystep kbmvp KB2579835

ให้ข้อเสนอแนะ

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com