พอดีไปเห็นขอบโค้ง ๆ ของชาวบ้านเขา แล้วก็แอบดูซอสโค้ดของเขาปรากฎว่าเขาไม่ได้ใช้รูปภาพทำ แต่เขาใช้ CSS ทำเอา เลยไปหาวิธีทำมาลองทำดูเองบ้าง แต่โค้ดนี้สามารถใช้ได้กับ Firefox,Chrome,Safari,Opera,ie9 ส่วน ie เวอร์ชั่นอื่น ๆ นั้นไม่สามารถใช้ได้
1.เริ่มด้วยสร้างขอบแบบธรรมดาขึ้นมาก่อนซึ่งจะใช้ความหนาเท่าไหร่ หรือขอบสีอะไรนั้นก็คิดขึ้นมาเองตามใจชอบได้เลย
2.เมื่อได้ขอบแล้วก็ให้ใส่เพิ่มโค้ดใน CSS แบบนี้
ซึ่งจะเห็นได้ว่ามันไม่เป็นโค้งเราต้องมาทำการใส่ prefix เพื่อให้ Browser รับรู้โค้ดที่เราเขียนโดย
-moz (เช่น -moz-border-radius) ทำให้โค้ดสามารถใช้งานได้ใน Firefox
-webkit (เช่น -webkit-border-radius) ทำให้โค้ดสามารถใช้งานได้ใน Safari และ Google Chrome
3.ใส่โค้ดดังกล่าวในข้อ 2 ลงใน CSS แบบนี้
-moz-border-radius:15px;
-webkit-border-radius:15px;
จะได้ผลลัพธ์ดังรูป
เมื่อเสร็จเราก็จะได้กรอบโค้งแบบที่ไม่ต้องใช้ photoshop ช่วย ลดเวลาไปได้เยอะ ถ้าอยากได้พื้นหลังแล้วให้ขอบโค้ง ๆ ก็สามารถทำได้เช่นกัน โดยกำหนดพื้นหลังเป็นสีที่เราต้องการ แล้วก็นำโค้ดขอบโค้งไปใส่
background:#D4F4AD;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
ซึ่งจะได้ผลลัพธ์ตามรูป
นอกจากนี้ยังสามารถประยุกต์ทำรูปแบบต่าง ๆ ได้อีกตามที่ผู้เขียนโค้ดต้องการมากมายหลายอย่างแล้วแต่ว่าใครจะเอาไปใช้งานอย่างไร
-moz-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-topright:0;
-moz-border-radius-bottomleft:0;
-webkit-border-top-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-left-radius:0;
ได้ผลดังรูป
คราวนี้ลองมาทำเลียนแบบขอบโค้งในหน้าเว็บไซต์ Ofebia ดูบ้าง เอามาประยุกต์ดู ใช้ CSS หมดเลย ยกเว้นรูปภาพสัญลักษณ์
ของเดิม
ของใหม่ที่ใช้ Border Radius ทำเอา และประยุกต์อีกนิดหน่อย
ซึ่งจะเห็นได้ว่าคล้าย ๆ กัน ขาดเงาของพื้นหลัง ซึ่งคราวหน้าเราจะมาดูกันว่าใช้ CSS3 ทำเงาให้พื้นหลังได้ยังไง
แถมเว็บสร้างขอบมน online http://border-radius.com/
Credit : Ofebia
ไม่มีความคิดเห็น:
แสดงความคิดเห็น