โดยในบางครั่งนอกจากความสวยงามแล้ว ผู้ที่พัฒนา ก็อาจจะมีมีการแฝงลูกเล่นเล็กน้อยๆ เพื่อสะดวกต่อการใช้งาน หรือ เพื่อสร้างความประทับต่อผู้ใช้งาน ซึ่งการที่จะทำแบบนั้นได้ ผู้ที่พัฒนาเว็บไซต์ ก็ย่อมมีความเข้าใจต่อคุณสมบัติ และวิธีการใช้งานภาษาคอมพิวเตอร์ ที่จะใช้ในการพัฒนา
โดยทัวไป ภาษาที่จะใช้แสดงผลให้ผู้ใช้งานได้เห็นทางหน้าจอนั้น ก็คือ HTML แต่ภาษาที่จะเข้ามาช่วยให้ html มีความหน้าเข้ามาใช้งานหรือมีความสวยงามนั้นก็คื css แต่ถ้าหากเป็นเว็บไซต์ที่จะต้องมีการเก็บข้อมูล แล้วนำข้อมูลเหล่านั้นมาใช้งาน ก็จะต้องมี PHP Python หรืออื่นๆ เข้ามาพัฒนา แต่ถ้าหากผู้พัฒนาอยากจะทำให้เว็บมีความสะดวกมากยิ่งขึ้น หรือ มีลูกเล่นเพื่อความสวยงาม เพิ่มความประทับใจ และง่ายต่อการเรียกใช้ข้อมูลในบางกรณี ก็อาจจะใช้ Jquery javascript หรืออื่นๆเข้ามาช่วย
แต่ทั้งนี้ในบางครั้งการเพิ่มลูกเล่นนั้นก็อาจจะไม่จำเป็นต้องใช้ Jquery มาช่วยเสริม แต่อาจจะจะใช่เพียงแค่ css อย่างเดียวก็ได้ ดังตัวอย่างนี้ คือการเพิ่มขนาดช่อง textbox กรณีที่ผู้ใช้งานต้องการจะกรอกข้อมูล ซึ่งจะมีขนาดกว้างขึ้น โดยวิธีการก็มีดังนี้
1.ตัวอย่างโคด HTML ซึ่งส่วนี้จะเป็นเพียงแค่หน้า form ให้ผู้ใช้งานได้เห็น
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
-- จะเรียกใช้ ตัวอย่าง โคดจาก ข้อ 2
<body>
<center>
<div>
<form action="">
<label for="fname">Input Data</label><br>
<input type="text" id="fname" name="firstname" placeholder="Input data.."><br>
<input type="submit" value="Submit">
</form>
</div>
</center>
</body>
</html>
2.ตัวอย่างโคด CSS จะเป็นส่วนที่จะเพิ่มความส่วนงามให้กับ เเละลูกเล่นๆให้กับ html
โค้ด: เลือกทั้งหมด
<style>
// เป็นการเพิ่มสีสัน ปรับลักษณะให้กับ ปุ่ม
input[type=submit] {
width: 50%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
//ส่วนนีจะทำงานเหมื่อมีการคลิกที่ช่องกรอกข้อมูล
input[type=text]:focus {
width: 80%;
border: 2px solid #0099CC;
}
//ส่วนที่เป็นกรอบครอบส่วนการแสดงผลทั้งหมด
div {
border-radius: 5px;
background-color: #CCFF66;
padding: 20px;
width: 300px
}
</style>
บทความที่เกี่ยวข้อง
CSS คำสั่ง background การกำหนดรายละเอียดของพื้นหลัง
หน่วยของค่าที่ใช้ต่างๆ ใน CSS
การใช้ box-shadow เพื่อสร้างเงาให้ กรอบกล่องข้อความ