CSS: สร้างปุ่มสวย ๆ ด้วย CSS ตอนที่ 2 โครงสร้าง HTML และ CSS

ในการเริ่มต้นสร้างโปรเจ็กต์ เราจะต้องวิเคราะห์ว่า องค์ประกอบของหน้าจอมีอะไรบ้าง และว่างแผนว่า จะจัดวางส่วนต่าง ๆ ทั้งหมดอย่างไร โดย HTML จะทำหน้าที่นี้ และเราจะใช้ CSS ในการตกแต่งความสวยงาม

 

หน้าตาโปรเจ็กต์

css-button-html-animation-2-1

ภาพที่ 1 โปรเจ็กต์

 

เนื่องจากว่า โปรเจ็กต์ของเรา เป็นโปรเจ็กต์เล็ก ๆ ก็เลยมีองค์ประกอบแค่ 2 ส่วนคือ

1. กล่องที่เป็นพื้นหลัง ที่เราจะทำการไล่สี และใช้วางปุ่ม

2. ก็คือส่วนของปุ่ม นั้นเองค่ะ

 

 

โครงสร้าง HTML

HTML จะเป็นตัวกำหนดโครงสร้างของหน้าจอ ที่จะแสดงใน โปรแกรมเว็บบราวเซอร์ (Web browser)

 

ซึ่งเราจะเตรียมรูปแบบตัวอักษรที่ต้องการใช้งาน ใช้ <div>  ทำพื้นหลัง และเตรียมแท็ก <a>  เอาไว้สร้างปุ่มค่ะ

 

ในเบื้องต้น เราก็จะได้โครงสร้าง HTML ขึ้นมา ดังนี้

 

ผลลัพธ์

ไม่ต้องตกใจนะคะ ว่าทำไมหน้าตาถึงเป็นแบบนี้ ในส่วนของ HTML ทำหน้าที่เพียงแค่กำหนดโครงสร้างของเอกสารเท่านั้น เดี๋ยวเราจะใช้ CSS เพื่อจัดความสวยงามให้กับมันในภายหลังค่ะ 🙂

css-button-html-animation-2-2

ภาพที่ 2 HTML

 

 

โครงสร้าง CSS

เพื่อความสะดวกในการคำนวณขนาดขององค์ประกอบต่าง ๆ ในทางปฏิบัติที่ดีนั้น เราจะเริ่มต้นด้วยการใช้ *  Selector เพื่อทำการกำหนดค่าเริ่มต้นให้หน้าเว็บ

 

โดยกำหนดให้ margin, padding เป็น 0 และกำหนดให้ box-sizing เป็น border-box

 

จากนั้นก็กำหนด <body>  ให้เป็นค่าตั้งต้นของหน้าเว็บเรา ประกอบไปด้วย รูปแบบตัวอักษรที่ต้องการใช้งาน พร้อมทั้งกำหนดขนาด ความหนา-บาง ความสูงของบรรทัด สีตัวอักษร และระยะห่างจากขอบเป็น 30px

 

เราจะได้โค้ด CSS ทั้งหมดดังนี้

 

ผลลัพธ์

จะเห็นว่า เมื่อเราทำการกำหนดค่า CSS แล้ว หน้าเว็บมีหน้าตาดีขึ้นมานิดหน่อยค่ะ 🙂

css-button-htmlanimation-2-3

ภาพที่ 3 HTML + CSS

 

ในตอนต่อไป เราจะทำการไล่เฉดสีด้านหลังปุ่มกันค่ะ แล้วพบกันนะคะ 🙂

 

อ้างอิง

CSS * Selector 

CSS Margins 

CSS Padding 

CSS Box Sizing 

CSS font-family Property 

CSS font-size Property 

CSS font-weight Property 

CSS line-height Property 

CSS color Property 

 

 

Comments

comments

ธมนวรรณ มณีจันทร์

เป้าหมาย : "พัฒนาคุณภาพชีวิตผู้คน ผ่านการส่งมอบความรู้ ด้วยเทคโนโลยีที่ดีที่สุด" ... ประวัติ