เพิ่งจะเริ่มทำเว็บบ้านนกกกแบบจริงๆ จังๆ สักที หลังจากปล่อยให้ร้างมานาน วันนี้ทำงานหนึ่งที่เสียเวลาไปประมาณ 3-4 ชม. นั่นก็คือ การทำพื้นหลังแบบเกรเดียนท์ (Gradient) แบบไล่จากบนลงล่าง โดยใช้ CSS แบบง่ายๆ ผมขอจดลงบล็อกนี้ไว้จะได้ไม่ต้องไปกูเกิ้ลหาอีก
ก่อนอื่นเลยต้องสร้างรูปพื้นหลังมาก่อน เปิด GIMP หรือ Adobe Photoshop มาก็ได้ ส่วนเจ้าของบล็อกเป็นคนดีไม่อยากใช้ของเถื่อน ก็ขอใช้ GIMP ละกัน หุหุ รูปพื้นหลังผมสร้างมามีขนาดความกว้าง 10 พิกเซล (หรือจะกว้างแค่ 1 พิกเซลก็ได้) และสูงสัก 400 พิกเซล นะครับ และก็ใช้อุปกรณ์ดังรูปข้างล่างนี้จัดการ
และเราจะได้รูปประมาณนี้ ผมเลือกสีออกฟ้าๆ นะครับ
หลังจากที่ได้รูปมา สมมุติว่ารูปชื่อ bg.png นะครับ เราก็สร้างไฟล์ HTML + CSS ขึ้นมาดังนี้
<html>
<head>
<style>
body {
background: #e0e8ff url(bg.png) repeat-x;
}
</style>
</head>
<body>
</body>
</html>
จุดสำคัญอีกจุดหนึ่งคือ ค่าสี #e0e8ff มันคือค่าสีตรงจุดล่างสุดของรูปนั่นเอง เราจะต้องเซตค่าสีพื้นหลังไว้แบบนี้ เพื่อที่เวลาเราเลื่อนจอลงไปข้างล่างสุด หรือเว็บเรายาวลงไปเยอะๆ สีพื้นหลังจะได้ไม่ขาดช่วงครับ และผลที่ได้ก็ดังรูปนี้เลย
เป็นอันเสร็จสิ้น ถ้าใครมีวิธีเจ๋งๆ อยากแนะนำก็เชิญเลยนะครับ ผู้อ่อนด้อยในการออกแบบหน้าเว็บยินดีรับฟังทุกเรื่องครับ 😀
credit: CSS Gradient Background Fade
