3 พฤศจิกายน 2554

การสร้างมุมโค้งด้วย CSS3

เมื่อก่อนตอนอยากทำขอบโค้ง ๆ สวย ๆ ให้กรอบข้อความต้องก็ต้องทำโดยใช้ photoshop ทำเอา ซึ่งทำให้หน้าเว็บไซต์เราโหลดมากขึ้น เพราะมากชิ้นก็ใช้เวลาโหลดแต่ละชิ้น พอตอนมี CSS แล้วใช้แบบ div อะไรพวกนี้ก็ยังต้องเขียนโค้ด CSS สำหรับมุมโค้ง 4 ด้าน แล้วก็ต้องมาแก้ให้ใช้ได้ทุก Browser ซึ่งทำวิธีไหนก็เหนื่อยนั่นแหละ

พอดีไปเห็นขอบโค้ง ๆ ของชาวบ้านเขา แล้วก็แอบดูซอสโค้ดของเขาปรากฎว่าเขาไม่ได้ใช้รูปภาพทำ แต่เขาใช้ 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

ไม่มีความคิดเห็น: