CSS3 ฉบับล้วงลึก ตอนที่ #2/2

css3 inside

ความเดิมจากตอนที่แล้ว เราเรียนรู้วิธีการนำ CSS มาใช้กับเอกสาร HTML แบบต่างๆ ข้อดี-ข้อเสียของแต่ละแบบ  และการใช้งาน Selector มาถึงตอนนี้ เราจะมาดูกันว่างานส่วนใหญ่ที่เค้าใช้ CSS เข้ามาช่วย มีอะไรอีกบ้าง เพื่อให้เห็นภาพชัดเจนขึ้นแนะนำให้คลิกตาม Link ที่ผมทำไว้ด้วยนะครับ จะได้ดูวิธีการกับผลการทำงานของโค้ดที่ยกตัวอย่างไว้

** หมายเหตุ: ภาพที่นำมาประกอบบางภาพมาจาก internet วัตถุประสงค์เพียงเพื่อให้ผู้อ่านเห็นภาพได้ง่ายขึ้นเท่านั้น ไม่มีวัตถุประสงค์ทางการค้าใดๆ  ทั้งสิ้น **

ความเดิมตอนที่แล้ว: ใครยังไม่ได้อ่าน แนะนำให้อ่านตอนก่อนหน้านี้ก่อนนะครับ จะได้ไม่งง ^_^
HTML5 ทำอะไรได้บ้าง?
CSS3 ฉบับล้วงลึก ตอนที่ #1

การจัดหน้าจอ

หากพูดถึงการใช้งาน CSS สิ่งหนึ่งที่ถูกใช้งานมากที่สุดคือการนำมาจัดการแสดงผลหน้าจอ ทั้งการจัดเลย์เอาท์ ระยะห่าง รูปแบบการจัดเรียง โดยมี property  สำคัญที่ต้องรู้ดังนี้

blog07-03

position        ใช้กำหนดการอ้างอิงพิกัดโดยค่า default คือ static รายละเอียดมีดังนี้
… static           คือการจัดว่างแบบปกติ ตามที่เราวาง
… relative       อ้างอิงพิกัดจาก Element ก่อนหน้านี้
… absolute     อ้างอิงพิกัดจากมุมบนซ้าย (0,0) ของตัวที่คลุมมันอยู่ (parent)
… fixed           อ้างอิงจากมุมบนซ้าย (0,0) ของ body (viewport)
โดยมากใช้จัด header, footer
** ถ้าเราใช้ absolute ภายใต้ body จะให้ผลเดียวกันกับ fixed **

position-3

display              กำหนดรูปแบบการแสดงผลเช่น block, box, inline, flex ซึ่งจะมีผลกับการ
จัดเรียง และวิธีจัด ** กรณีที่ต้องการซ่อนสามารถกำหนด display:none ได้ **

นอกจากการกำหนดแลลพื้นฐานแล้ว ควรฝึกใช้วิธีการกำหนดต่อไปนี้ด้วยเนื่องจากกำลังเริ่มได้รับความนิยม และบราวเซอร์เริ่มรองรับกันมากขึ้น
box-flex, box-direction, blog-ordinal-group, box-pack, box-shadow

float                   จัด Element ให้ชิดซ้าย หรือขวา เช่นเมนูอยู่ทางซ้าย help อยู่ด้านขวา
clear                  ใช้เคลียร์การจัดวาง ไม่เช่นนั้นมันจะยึดวิธีจัด (float) ตามตัวก่อนหน้า

div{  clear: left; }    /* -- เคลียร์เฉพาะซ้าย (float:left) --*/
div{  clear: right; }   /* -- เคลียร์เฉพาะขวา (float:right) --*/
div{  clear: both; }   /* -- เคลียร์ทั้งซ้ายและขวา (float:right) --*/


position-2

z-index               ระดับการซ้อนทับ เลขยิ่งมากยิ่งอยู่บน ถ้าต้องการให้อยู่ล่างสุด สามารถใช้เลข                                ติดลบได้ เช่น z-index:-1;
margin                ระยะห่างระหว่างกรอบ (border) ของ box กับขอบของ ตัวที่คลุมมันอยู่
หรือขอบของ viewport
padding              ระยะห่างระหว่าง ข้อความเนื้อหา (content) กับกรอบของ box ตามหลักการที่ถูกต้องควรใช้ margin
**หมายเหตุ: ในการจัดระยะ ถ้าไม่ไหวจริงๆค่อยใช้ padding เนื่องจากมีผลกระทบต่อการคำนวณขนาดโดยรวม **

left, right              กำหนดระยะห่างจากขอบ ซ้าย, ขวา
top, buttom        กำหนดระยะห่างจากขอบ บน, ล่าง

นอกจากการใช้ CSS ในการจัดแล้ว เราจำเป็นอย่างยิ่งที่จะต้องรู้ธรรมชาติของ Element แต่ละตัวว่ามีค่า default เป็นแบบไหนจึงจะสามารถจัดได้อย่างมีประสิทธิภาพ

Inline Element : การจัดเรียงเป็นแบบจากซ้าย-ไป-ขวา

กลุ่ม Inline Element

Block Element:  การจัดเรียงเป็นแบบ บน-ลง-ล่าง

blog04-05

Trick การตรึง Header กับ Footer ไว้ด้านบนหรือด้านล่าง

div#header{
     position:fixed;
     top: 0px;
     left: 0px;
}

div#footer{
     position: fixed;
     buttom: 0px;
     left: 0px;
}

การจัดการกับกล่อง (Box)

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

border                    ใช้กำหนดเส้นกรอบของกล่อง อาจใช้่ช่วยในการ debug เพื่อหาขอบเขต
ของแต่ละกล่อง

border: border-width border-style border-color|initial|inherit;

border: 1px solid black;

border-radius        กำหนดเส้นกรอบแบบมุมโค้ง หรือแม้กระทังทำให้ box แสดงเป็นวงกลม

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

/* -------- กล่องแบบมุมมน -------- */
div{
    border: 2px solid black;
    width: 300px;
    border-radius: 25px;
}

/* -------- กล่องวงกลม radius=width/2 -------- */
div{
    border: 2px solid #a1a1a1;
    padding: 10px 40px; 
    width: 300px;
    border-radius: 150px;
}

box-shadow        ใช้ใส่เงาให้กับกล่อง ทำให้ดูมีมิติมากขึ้น (แต่ก่อนต้องใช้ PhotoShop)

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

div {
    box-shadow: 10px 10px 5px #888888;
}

ใครไม่ถนัดในการกำหนดค่าเอง ก็สามารถค้นหา “CSS3 box shadow generator” ใน Google ก็จะเจอเครื่องมือสำหรับ gen code โดยที่เราปรับแต่งได้ด้วยการเลื่อนตัว slider ดูใน Link ครับ

** ระยะลึกลับ ที่มองไม่เห็น: บางครั้งตอนที่เราจัดหน้าจอ จะพบว่ามีช่องว่างที่เราไม่ตั้งใจให้มันเกิดขึ้น แก้ยังไงก็ไม่หาย ตรงนี้ต้องใจเย็นๆ แล้วลองใช้ Inspector ส่องดูระยะของแต่ละ Element ว่ามีการเซ็ตคร่อมกันหรือไม่ อาจทดลองค่อยๆ ตัด style ออกทีละตัวก็ได้ **

คุมการแสดงผลฟอนต์ และข้อความ

การทำงานกับ ฟอนต์ มักจะเป็นการกำหนดขนาด สี เงา รวมถึงการฝังฟอนต์ และเมื่อเราฝั่งฟอนต์ไปกับเอกสารได้ ก็เริ่มมีการประยุกต์ใช้งานพวก icon-font มากขึ้นเนื่องจากช่วยประหยัดพื้นที่ และสามารถกำหนดสีและขนาดได้หลากหลาย ที่สำคัญภาพไม่แตกด้วย

การใช้งาน @font-face

เป็นวิธีการที่ช่วยให้เราสามารถฝัง font ไปกับเว็บโดยรับประกันการแสดงผลบนเครื่องของผู้ใช้ หลักสำคัญของการใช้ @font-face คือจุดที่วางไฟล์ กับที่อยู่ของตัว .css ที่จะต้องอ่าง path กันอย่างถูกต้อง ไม่เช่นนั้นการแสดงผลจะไม่ถูกต้อง ส่วนรายละเอียดลองดูตาม Link นี้ได้ครับ ข้อดีของการใช้ฟอนต์แบบฝังคือ เราสามารถกำหนดขนาดได้อิสระ และสามารถใช้ร่วมกับการกำหนดสีหรือเงาแบบพิเศษ ทำให้ไม่จำเป็นต้องพึ่ง PhonoShop เวลาที่จะทำ Graphic Font สวยๆอีกต่อไป

@font-face {
 font-family: ‘My Font';
 src: url('th_charmonman-webfont.eot');
 src: url('th_charmonman-webfont.eot?#iefix') format('embedded-opentype'),
 url('th_charmonman-webfont.woff') format('woff'),
 url('th_charmonman-webfont.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;

}

h1{
 font-family: ‘My Font’, Times, Serif;
}

การแปลง TTF font ให้เป็น Web Font

หากเรามี font .ttf ที่สามารถใช้งานได้อย่างถูกกฏหมาย แล้วต้องการเปลี่ยนให้เป็น web font สามารถเลือกใช้บริการพวกเว็บแปลงฟอนต์ได้ แค่ upload แล้ว download กลับมาเท่านั้น การหาเว็บที่ให้บริการลักษณะนี้ให้ค้นคำว่า “web font generator” ใน google ได้เลยครับ
blog07-04

ตัวอย่างการ convert web font ด้วยเว็บ
http://www.fontsquirrel.com/tools/webfont-generator

 

นอกจากการฝังฟอนต์เพื่อใช้งานทั่วไปแล้วเรายังสามารถใช้งานในลักษณะของ Icon Font ได้ด้วยซึ่งทำให้สามารถควบคุมการแสดงผล Icon ของเว็บได้อย่างอิสระ ทั้งขนาด และสีของ Icon ลองดูตัวอย่างการใช้งานจากที่นี่ครับ Link

position-4

ตัวอย่าง Icon Font

เรื่องของสี ใครว่าไม่สำคัญ

ใน CSS3 เราสามารถใช้สีได้หลากหลายมากขึ้น รวมทั้งใช้คุณสมบัติพิเศษเช่น การกำหนดความโปรงใส่ (alpha / oppacity) หรือแม้แต่การใช้สีแบบไล่เฉด (Gradiant) ซึ่งสมัยก่อนต้องไปพึ่งเครื่องมืออย่าง PhotoShop ในการทำ ด้านล่างคือรูปแบบการกำหนดสีที่เราสามารถใช้ได้
** ในการกำหนดสีตัว CSS จะมีชื่อสีให้เราเรียกใช้ด้วย ลองดูตาม Link นี้ครับ **

position-5

สำหรับการใช้งาน สีแบบ Gradient นั้นถ้าใครเคยใช้ PhotoShop มาก่อนน่าจะนึกตามได้ไม่ยาก โดยต้องกำหนดสีเริ่มต้น และสีปลายทางที่จะทำการไล่เฉด

position-6

นอกจากการไล่เฉดแบบเส้นตรงแล้ว (Linear) เรายังสามารถไล่เฉดในแบบรัศมี (Radial) ได้ด้วย เหมือนกับ PhotoShop เลย

position-7

** ถ้าใครไม่ถนัดในการกำหนดค่าเอง แนะนำให้ค้นหาด้วยคำว่า “CSS Gradient Generator” ใน Google แล้วเลือกกำหนดตามสะดวกเลยครับ เสร็จแล้วค่อย copy โค้ดมาใช้งาน ตัวอย่างดูตาม Link1 และ Link2 ครับ**

การทำเอนิเมชัน

สิ่งที่ CSS3 เพิ่มเข้ามาแล้วโดดเด่นที่สุดเห็นจะเป็นเรื่องของการทำ Transformation, Transition ,  และ Animation ซึ่งตอบโจทย์คนทำเว็บสายที่เน้นความหวือหวาได้เป็นอย่างดี

position-8

Transform

คือการปรับเปลี่ยนรุปร่าง ซึ่งส่วนใหญ่มักใช้กับ Element พวกที่เป็น Div หรือ Img ซึ่งสามารถจัดการกับการเปลี่ยนขนาด หมุน และอื่นๆ เขียนให้เห็นภาพคงลำบาก เข้าไปดูตาม Link นี้ดีกว่านะครับ กดตรงปุ่มสีส้ม [Play it] จะได้ลองเล่นแต่ละตัวได้เลย

position-9

Transition

เป็นการต่อยอดความสามารถของ Transform โดยการกำหนดเวลาในการเปลี่ยนแปลง โดยเล่นกับ property ต่างๆ ได้หลากหลายเช่น การเปลี่ยนสี เปลี่ยนตำแหน่ง ทั้งนี้ยังคงสามารถเปลี่ยนขนาด และหมุนได้ด้วย และสิ่งที่เพิ่มขึ้นมาคืออัตราเร่งในการแสดงผล และระยะเวลาในการแสดงผล position-10

transition: property duration timing-function delay;

div{ transition: width 2s; }
div:hover{ width:300px; }
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

/* ----------- timing function ----------

ease         ความเร็วตอนเริ่มช้า เร่งเร็วตอนกลาง แล้วจบช้า (เป็นค่า default)
linear       ความเร็วคงที่ (อัตราเร่งคงที่)
ease-in      เริ่มช้า
else-out     จบช้า
ease-in-out  เริ่มและจบช้า
cubic-bezier(n,n,n,n)  กำหนดเอง

*/

เราสามารถใช้ Transition กับ property ได้หลากหลายมาก ขึ้นอยู่กับการประยุกต์และความคิดสร้างสรรค์เลยครับ

position-11

position-12

Animation

ถ้าใครเคยทำเอนิเมชันด้วย Flash มาก่อนจะเข้าใจการทำงาน เอนิเมชันของ CSS ได้ไม่ยาก หัวใจคือการกำหนด keyframe ด้วย @keyframe ที่เหลือก็ประยุกต์ใช้หลักการของ transition และ transformation ร่วมกับความเข้าใจในการกำหนดค่าให้กับแต่ละ property วิธีใช้ลองดูตาม Link นี้เลยนะ

position-13

animation:  name duration timing-function delay  iteration-count direction;

@keyframes mymove{
 from {left:0px;}
 to {left:200px;}
}

div{
 width:100px;
 height:100px;
 background:red;
 position:relative;
 animation:mymove 5s infinite;
}

@keyframes mymove{
 0% {top:0px;}
 25% {top:200px;}
 50% {top:100px;}
 75% {top:200px;}
 100% {top:0px;}
}

ถ้าใครลองแล้วเอนิเมชันไม่ขยับ หรือไม่ทำงาน อาจจะต้องลองเปลี่ยน browser ที่ใช้ทดสอบดู (ส่วนใหญ่ผมจะใช้ Chrome ในการทดสอบ) ถ้าไม่ได้จริงๆ ต้องลองเพิ่ม prefix ของตัว browser specific เข้าไปด้วยดู ตามนี้ครับ

@-webkit-keyframes NAME-YOUR-ANIMATION {
 0% { opacity: 0; }
 100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
 0% { opacity: 0; }
 100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
 0% { opacity: 0; }
 100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
 0% { opacity: 0; }
 100% { opacity: 1; }
}
#box {
 -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
 -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
 -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
 animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

บทสรุป

จบแล้วครับ CSS3 ทั้ง 2 ตอน (แอบเหนื่อยเพราะยาวมาก) การใช้งาน CSS มีเทคนิคไม่สิ้นสุดจริงๆ ถ้ามีโอกาสผมจะพยายามสอดแทรกไปในเนื้อหาตอนต่อๆ ไปเรื่อยๆนะครับ ตรงนี้ขอจบส่วนของพื้นฐานไว้เท่านี้ก่อน และหลังจากเรารู้จัก HTML5 กับ CSS3 แล้วต่อไปจะถึงคิวของ Java Script ใครที่รออยู่ห้ามพลาดเด็ดขาด โปรดติดตามตอนต่อไป ^_^

AjBee.Me : กรดแชร์ได้ครับไม่หวงครับ ^_^