CSS3 property 10 ตัวที่ต้องทำความคุ้นเคยกับมัน
Thai (ภาษาไทย) translation by Porrapat Petchdamrongskul (you can also view the original English article)
เราได้เรียนรู้เกี่ยวกับ CSS selector 30 ตัวที่ควรจำ ไปแล้ว คำถามคือแล้ว CSS3 property หล่ะ คุณสามารถใช้ใน project ของคุณได้เลยแม้ว่าส่วนมากเราต้องใส่ vendor-specific prefix เข้าไปด้วย ที่จริงมันควรใช้ตั้งนานแล้วหล่ะ
หลักการคือคุณยอมรับไหมว่ามันจะทำให้เกิดความแตกต่างในแต่ละ browser บ้างเล็กๆ น้อยๆ (จากผู้แปล ก็แค่ browser เก่าๆ พวก IE6 เท่านั้นแหละ บทความนี้เขียนมานานแล้ว) คุณพอใจไหมว่า IE จะแสดงผลมุมขอบสี่เหลี่ยม 90 องศาแทนที่จะเป็นมุมโค้งๆ นั่นคือสิ่งที่ต้องเลือก อย่างไรก็ตาม จำไว้เสมอว่าเว็บไซต์ไม่จำเป็นต้องดูเหมือนกันไปหมดในทุกๆ browser พร้อมกันนี้เราจะลองทำงานกับโปรเจคสนุกๆ ดู ในส่วนท้ายของบทความนี้
1. border-radius (ขอบโค้ง)

CSS3 property ที่เป็นที่นิยมมากที่สุดในพวก ซึ่ง border-radius
นั้นเป็น property เรือธงของ CSS3 เลยก็ว่าได้ ขณะที่นักออกแบบเว็บจำนวนมากกำลังกังวลกับไอเดียที่ว่า layout จะแสดงผลต่างกันในแต่ละ browser และขอบแบบโค้งก็เป็นส่วนหนึ่งที่ ดึง พวกเขาเข้ามา
น่าแปลก เรากลับยอมรับอย่างดีเกี่ยวกับแนวคิดว่าการแสดงผลของ mobile browser อาจต่างกันได้ แต่บางคนกลับรู้สึกไม่เหมือนกันเมื่อเป็น browser บน desktop
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
โปรดสังเกตว่าทั้ง Safari 5 และ IE9 นั้นสามารถใช้ `border-radius` ด้วย syntax ที่เป็นทางการนี้ได้แล้ว
วงกลม
ผู้อ่านบางคนอาจยังไม่รู้ว่าเราสามารถสร้างวงกลมได้จาก property นี้
-moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;

และ... ถ้าเราต้องการความสนุกที่มากขึ้น เราสามารถใช้ข้อได้เปรียบของ Flexible Box Model (รายละเอียดอยู่ในข้อ #8) มาจัดกึ่งกลางแบบ vertical และ horizontal ให้กับตัวอักษรที่อยู่ในวงกลม เราต้องเขียนโค้ดจำนวนหนึ่งเพิ่ม แต่ก็เพื่อให้แน่ใจว่าได้รองรับทุกๆ บราวเซอร์
display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; /* the default, so not really necessary here */ -webkit-box-orient: horizontal; box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; -webkit-box-pack: center; -webkit-box-align: center; box-pack: center; box-align: center;
2. box-shadow (เงาที่กล่อง)



ถัดไป เรามี box-shadow
ที่สามารถเห็นได้โดยทั่วไป ที่ช่วยให้เราใส่ความลึกไปที่ element และอย่าเพิ่งรังเกียจค่าต่างๆ ที่คุณต้องใส่ให้มัน
-webkit-box-shadow: 1px 1px 3px #292929; -moz-box-shadow: 1px 1px 3px #292929; box-shadow: 1px 1px 3px #292929;
box-shadow
ประกอบด้วย parameter 4 ตัวดังนี้
- x-offset (ระยะตามแกน x)
- y-offset (ระยะตามแกน y)
- blur (ค่าความเบลอ)
- color of shadow (สีของแสงเงา)
ตอนนี้ หลายคนอาจไม่รู้ว่าเรานั้นสามารถใส่ box-shadow
ได้หลายคำสั่งเรียงต่อกันในครั้งเดียว นี่จะทำให้เกิด effect ที่น่าสนใจ ในภาพถัดมา เราจะใช้เงาสีฟ้าและสีเขียวเพื่อให้เห็นถึงความต่างของเงาที่ใส่ไปง่ายขึ้น



-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue; -moz-box-shadow: 1px 1px 3px green,-1px -1px blue; box-shadow: 1px 1px 3px green, -1px -1px blue;
สร้างเงาสวยๆ
ด้วยการใส่เงาเข้ากับ pseudo-class ::before
และ ::after
เราสามารถสร้างมุมมองที่น่าสนใจ นี่คือโค้ดส่วนหนึ่งที่คุณน่าจะลอง
HTML
<div class="box"> <img src="tuts.jpg" alt="Tuts" /> </div>
CSS
.box:after { content: ''; position: absolute; z-index: -1; /* hide shadow behind image */ /* The Shadow */ -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); width: 70%; left: 15%; /* one half of the remaining 30% (see width above) */ height: 100px; bottom: 0; }



เรียนรู้เพิ่มเติมเกี่ยวกับ effect เจ๋งๆ ลองหาดูใน บทเรียนบน Nettuts+ ได้เลย
3. text-shadow (เงาที่ตัวอักษร)



text-shadow
คือหนึ่งใน CSS property หลายๆ ตัวที่เราไม่ต้องใส่ vendor-prefix เข้าไปก็ได้ ค่อนข้างคล้ายๆ กับ box-shadow
มันใช้กับตัวอักษรและต้องใส่ parameter 4 ตัว
- x-offset
- y-offest
- blur
- color of shadow
h1 { text-shadow: 0 1px 0 white; color: #292929; }
การใช้เงาทำขอบตัวอักษร
อีกครั้ง เหมือนกับเพื่อนของมัน box-shadow
คุณสามารถใส่เงาซ้อนกันได้หลายชั้น ด้วยการใส่เครื่องหมาย comma เป็นตัวแบ่ง จากตัวอย่าง ลองคิดว่าถ้าเราต้องการสร้างขอบตัวอักษรให้กับข้อความ ขณะที่ webkit
สร้าง stroke
effect เราสามารถใช้กับ browser ได้หลายตัวมากขึ้นได้โดยใช้วิธีการนี้ (แม้ไม่ค่อยดีเท่าไหร่)
body { background: white; } h1 { text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black; color: white; }



แสดงตัวอย่าง
4. Text-Stroke (ขอบตัวอักษร)



นี่คือวิธีที่ดีกว่า แต่โปรดระวังในการใช้วิธีนี้ ในไม่กี่ปีที่ผ่านมานี้ (Safari, Chrome, iPhone) มีเพียงแค่ webkit เท่านั้นที่ support มัน ในความเป็นจริง ผมอาจผิดก็ได้ `text-stroke` ยังไม่อยู่ใน part ของ CSS3 Specification ในกรณีนี้ ถ้าเป็นตัวอักษรมีสีขาว Firefox จะแสดงเป็นหน้าขาวว่างๆ คุณสามารถเลือกใช้ JavaScript feature detection เพื่อจัดการมัน หรือ เพื่อให้แน่ในว่าสีของตัวอักษรนั้นไม่ใช่สีเดียวกับ background ของ tag body
h1 { -webkit-text-stroke: 3px black; color: white; }
ฟีเจอร์ตรวจสอบ (Feature Detection)
แล้วถ้าเราต้องการใส่ style เฉพาะให้แต่ละอันหล่ะ เช่นใส่เฉพาะกับ Firefox หรือเฉพาะกับพวก browser ตระกูล Safari หรือ Chrome วิธีแก้ปัญหาก็คือใช้ฟีเจอร์ตรวจสอบ (Feature Detection)
ด้วยฟีเจอร์ตรวจสอบ (Feature Detection) เราสามารถใช้ JavaScript เพื่อทดสอบว่า property นั้นๆ สามารถใช้งานได้หรือไม่ ถ้าไม่ได้ เราก็สามารถเขียนโค้ดสำรองได้ (Fallback)
ลองกลับไปที่ประเด็น text-stroke
ลอง set สีสำรองเป็นสีดำ black
สำหรับ browser ที่ไม่สนับสนุน property นี้ (ทั้งหมดที่ไม่ใช่ webkit
ในปัจจุบัน)
var h1 = document.createElement('h1'); if ( !( 'webkitTextStroke' in h1.style ) ) { var heading = document.getElementsByTagName('h1')[0]; heading.style.color = 'black'; }
แรกเลย เราลองสร้าง element h1 หลอกๆขึ้นมา จากนั้นเราจะลองค้นหาเพื่อให้แน่ใจว่า -webkit-text-stroke property
นั้นสามารถใส่เข้ากับ style
attribute ได้ แต่ถ้ามันไม่ เราจะเอาหัวข้อ Hello Readers
มา set สีมันจาก สีขาว
ให้เป็นสีดำแทน
โปรดสังเกตไว้ว่าเราจะทำแบบทั่วๆไป ถ้าคุณต้องการใส่
h1
tag หลายๆอันบน page คุณจำเป็นต้องใช้while
statement เพื่อวนลูปรอบ heading แต่ละอันแทน พร้อม update style หรือ class name ตามลำดับเรากำลังทดสอบได้แค่ใน
webkit
อนาคตเมื่อ browser อื่นๆ supporttext-stroke
ได้เหมือนกัน เราก็สามารถใช้ได้ ฉะนั้นเรียนรู้ไว้ก่อนก็ดี
ถ้าคุณต้องการเรียนรู้ฟีเจอร์ตรวจสอบ (Feature Detection) แบบเจาะลึก ให้ลองใช้ Modernizr ดู
5. Multiple Backgrounds (ซ้อนพื้นหลังได้หลายอัน)



background
property ตัวเดิมนี้สามารถใส่พื้นหลังได้หลายอันใน CSS3
ลองสร้างตัวอย่างแบบง่ายๆ ก่อน เพื่อทดสอบแนวคิด ถ้าไม่มีไฟล์รูปที่เหมาะสมใกล้ๆ ผมจะใช้ 2 รูปจากบทความนี้แหละเป็น background แน่นอน ในความเป็นจริง คุณจะใช้ลวดลาย (texture) หรือบางทีทำ การไล่สี (gradient) ให้กับพื้นหลังที่สร้างมานี้ก็ย่อมได้
.box { background: url(image/path.jpg) 0 0 no-repeat, url(image2/path.jpg) 100% 0 no-repeat; }
จากตัวอย่างด้านบน เราใช้ comman เป็นตัวคั่นเพื่อสร้างพื้นหลังด้วยรูปทั้งสอง สังเกตว่ารูปแรกมันถูกวางไว้ที่ตำแหน่งมุมบนซ้าย (0,0
) และรูปที่สองถูกวางไว้มุมบนขวา (100% 0
)
เพื่อให้แน่ใจว่าคุณเขียนโค้ดสำรอง (fallback) ให้กับ browser ที่ไม่ support multiple background นี้ทุกครั้ง มันจะทำงานโดยทำการข้าม (skip) ตัว property นั้นไปเลย ทำให้โค้ด background เหมือนไม่ถูกใช้
เพื่อให้เข้ากับ browser ชนิดเก่าๆ
เพื่อเพิ่ม background อันเดียวกับ browser ชนิดเก่า เช่น IE7 ประกาศ background
property สองครั้ง ครั้งแรกสำหรับ browser ชนิดเก่า จากนั้นครั้งที่สองเพื่อทำการ override มัน อีกครั้งสำหรับวิธีอื่นๆ ให้ลองใช้ Modernizr ดู
.box { /* fallback */ background: url(image/path.jpg) no-repeat; /* modern browsers */ background: url(image/path.jpg) 0 0 no-repeat, url(image2/path.jpg) 100% 0 no-repeat; }
6. background-size (ปรับขนาดของพื้นหลังได้)
จนถึงล่าสุด เราถูกบังคับให้ใช้เทคนิคพิสดารเพื่ออนุญาตให้เปลี่ยนขนาดรูปภาพพื้นหลังได้
background: url(path/to/image.jpg) no-repeat; background-size: 100% 100%;
โค้ดด้านบนจะทำให้รูปพื้นหลังขยายคลุมเนื้อที่ที่ว่างทั้งหมด จากตัวอย่าง จะเกิดอะไรขึ้นถ้าเราต้องการให้รูปขยายคลุม พื้นหลังของ body
element โดยไม่สนใจขนาดความกว้างหน้าต่างบราวเซอร์
body, html { height: 100%; } body { background: url(path/to/image.jpg) no-repeat; background-size: 100% 100%; }
นั้นแหละหน้าที่ของมัน property background-size
จะรับ parameter 2 ตัวคือ ขนาดของ x
และ y
ตามลำดับ
ขณะที่ version ล่าสุดของ Chrome และ Safari นั้น support background-size ด้วยโค้ดในตัวมันเอง (native) เรายังต้องใส่ vendor-prefix สำหรับ browser เก่าๆ ด้วย
body { background: url(path/to/image.jpg) no-repeat; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; }
7. text-overflow (จัดการกับตัวอักษรที่เกินออกมา)
ไม่น่าเชื่อว่า property text-overflow
นี้สร้างโดย Internet Explorer มันสามารถใส่ค่าได้สองค่า
- clip (ตัดออก)
- ellipsis (ใส่สัญลักษณ์ ...)
property นี้สามารถใช้เพื่อตัดตัวอักษรที่หลุดจากกล่องที่ครอบมันออก ขณะที่ยังส่งตัวบอกผู้ใช้ เช่น สัญลักษณ์ ... (ellipsis)



คุณรู้ไหมว่า? Internet Explorer นั้น support property นี้มาตั้งแต่ IE6 แล้ว! ก็พวกเขาเป็นคนสร้างมันไง
.box { -o-text-overflow: ellipsis; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; border: 1px solid black; width: 400px; padding: 20px; cursor: pointer; }
ในจุดนี้ คุณต้องแน่ใจว่าเมื่อคุณเอาเม้าส์ไปวาง มันจะแสดงข้อความทั้งหมดที่อยู่ในนั้น
#box:hover { white-space: normal; color: rgba(0,0,0,1); background: #e3e3e3; border: 1px solid #666; }
ค่อนข้างแปลก (ไม่แน่ผมอาจผิดก็ได้) มันเหมือนกับว่าไม่มีวิธีที่สามารถ reset หรือ "ปิด" เจ้า property text-overflow นี้ได้ เพื่อทำตัวเสมือนเหมือน "ปิด" ฟังก์ชันนี้ ให้ใช้ :hover
เพื่อตั้งค่า white-space
property กลับไปสู่สถานะปกติหรือ normal
เหมือนเดิม ใช้ได้ละ ถูกแล้ว เพราะว่า text-overflow
นั้นขึ้นตรงกับฟังก์ชันนี้
คุณรู้ไหมว่า คุณสามารถระบุตัวอักษรหรือ string ของคุณแทนที่จะใช้ ellipsis ที่เป็นค่าเริ่มต้น การทำแบบนี้จะแสดง string นั้นมาแทนที่ตัวอักษรที่ถูกตัดออกไป
8. Flexible Box Model (กล่องคอลัมน์ที่ยืดหยุ่น)
Flexible Box Model จะช่วยให้เราเลี่ยงการใช้พวก float
ต่างๆ แม้ว่าเราต้องทำงานนิดหน่อยเพื่อเรียนรู้ property แบบใหม่ เมื่อคุณทำได้แล้ว มันจะใช้ได้ดีทีเดียว
เริ่มสร้างจากตัวอย่างง่ายๆ โดยสร้าง two-column layout
<div id="container"> <div id="main"> Main content here </div> <aside> Aside content here </aside> </div>
สำหรับ CSS แรกสุดเราจะทำให้ container
ทำตัวเหมือน กล่องใบหนึ่ง
ผมจะใส่ค่าความกว้างและความสูงแบบทั่วๆไป จากนั้นเราไม่มีข้อมูลจริงมาเล่นด้วย
#container { width: 960px; height: 500px; /* just for demo */ background: #e3e3e3; margin: auto; display: -moz-box; display: -webkit-box; display: box;
ถัดไปจากตัวอย่าง ลองใส่สีพื้นหลังเฉพาะไปที่ #main
div
และ aside
ดู
#main { background: yellow; } aside { background: red; }
และในจุดนี้ ไม่มีอะไรต้องดูต่อละ



แม้ว่าดูเหมือนไม่มีอะไร เมื่อเรา set โหมดเป็น
display:box
เจ้า element ลูกจะขยายแนวดิ่งออกไป นี่คือผลbox-align
valuestrech
ที่เป็นค่าเริ่มต้น
ดูว่าจะเกิดอะไรขึ้นถ้าเราใส่ค่าความกว้างให้กับ #main
#main { background: yellow; width: 800px; }



นั่นแหละ ค่อนข้างดีขึ้น แต่เราก็ยังมีประเด็นที่ aside
ไม่คลุมถึงพื้นที่ที่เหลือ เราสามารถแก้โดยใช้ property box-flex
อันใหม่
box-flex
จะทำให้ element ครอบถึงพื้นที่ที่เหลือทั้งหมด
aside { display: block; /* cause is HTML5 element */ background: red; /* take up all available space */ -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; }
ด้วย property นี้ ไม่ว่าความกว้างของ #main
จะเป็นเท่าไร aside
จะครอบถึงเนื้อที่ที่เหลือในทุกกรณี และจะดีกว่านี้ คุณจะไม่ต้องมากังวลเกี่ยวกับเรื่องของ float
เช่น element ร่วงไปอยู่ใต้เนื้อหาหลักเป็นต้น



เราเพียงแค่ให้ครอบถึงเนื้อที่ที่เหลือที่นี่ ลองอ่านบทความเจ๋งๆ ของ Paul Irish ถ้าต้องการเรียนรู้เพิ่มเติม นอกจากนั้น ระวังเมื่อใช้วิธีนี้ มันยังไม่ได้รับการรองรับเต็มที่ แน่นอนโดยเฉพาะบราวเซอร์เก่าๆ ในกรณีเหล่านั้น คุณสามารถใช้การตรวจสอบฟีเจอร์ (Feature Detection) หรือ Modernizr และเขียนโค้ดสำรอง (Fallback) เอาไว้
9. Resize (ฟอร์มปรับขนาดได้)
ใช้ได้แค่ Firefox 4 และ Safari 3 ซึ่ง resize
property นั้นอยู่ในส่วนหนึ่งของโมดูล CSS3 UI ที่ช่วยให้คุณระบุว่า textarea
สามารถถูกปรับขนาดได้
<textarea name="elem" id="elem" rows="5" cols="50"></textarea>
จำไว้ว่า โดยทั่วไปบราวเซอร์ที่ใช้
webkit
และ Firefox 4 จะอนุญาตให้textarea
ถูกปรับขนาดได้ ทั้งด้านแนวตั้ง (vertical) และแนวนอน (horizontal)
textarea { -moz-resize: vertical; -webkit-resize: vertical; resize: vertical; }
ค่าที่ใส่ได้
- both: ปรับขนาดได้ทั้งแนวตั้งและแนวนอน
- horizontal: ปรับขนาดได้เฉพาะแนวนอน
- vertical: ปรับขนาดได้เฉพาะแนวตั้ง
- none: ไม่สามารถปรับขนาดได้



10. Transition (ภาพเคลื่อนไหว)
บางทีสิ่งที่น่าตื่นเต้นมาที่สุดของ CSS3 คือ ความสามารถในการสร้าง animation ที่ element ได้โดยตรง โดยไม่ต้องใช้ JavaScript
แม้ว่า IE9 มันยังไม่ support CSS transition แต่นั่นก็ไม่ได้หมายความว่าคุณไม่ควรใช้มัน การปรับปรุงให้ดีขึ้น คือกุญแจดอกสำคัญ
ลองเล่นกับ effect ธรรมดาทั่วๆ ไป เช่นเมื่อคุณเอาเม้าส์ไปวางที่ link ที่ sidebar แล้ว ตัวอักษระจะเลื่อนไปทางขวาอย่างช้าๆ
HTML
<ul> <li> <a href="#"> Hover Over Me </a> </li> <li> <a href="#"> Hover Over Me </a> </li> <li> <a href="#"> Hover Over Me </a> </li> <li> <a href="#"> Hover Over Me </a> </li> </ul>
CSS
ul a { -webkit-transition: padding .4s; -moz-transition: padding .4s; -o-transition: padding .4s; transition: padding .4s; } a:hover { padding-left: 6px; }
transition
จะรับค่า parameter 3 ตัว
- property สำหรับการ transition ให้ set ค่าเป็น
all
ถ้าไม่รู้ว่าจะใส่ค่าอะไรดี - ระยะเวลา (duration)
- รูปแบบการเคลื่อนไหว (easing type)
เหตุผลที่ทำไมเราไม่ใส่
transition
ตรงๆ ลงไปที่hover
ของ tag a เพราะว่า ถ้าเราทำ animation จะเกิดผลเมื่อตอนเราเอาเม้าส์ไปวาง เมื่อเอาเม้าส์ออก element นั้นจะกลับไปสู่สถานะเดิมทันที
เพราะแค่เราต้องการเพิ่ม Effect ใหม่ๆ เข้าไป ฉะนั้นไม่ต้องกังวลกับ browser เก่าๆ ได้เลย
โปรเจคปิดท้าย
ลองนำเทคนิคต่างๆ ที่เราได้เรียนมาลองสร้าง effect ง่ายๆ ดู คลิกเพื่อดูผลลัพธ์ก่อนเลย (แสดงผลได้ดีในบราวเซอร์ Webkit)
ขั้นที่ 1 สร้าง Markup
เราจะทำง่ายๆ ภายใน .box
container เราจะเพิ่ม div
สองอัน อันแรกสำหรับขนาดด้านหน้า อันหลังสำหรับขนาดด้านหลัง
<body> <div class="box"> <div>Hello</div> <div> World </div> </div> </body>
ขั้นที่ 2 จัดกึ่งกลางแบบ horizontal และ vertical
ถัดไป เรานั้นต้องการให้กล่องสี่เหลี่ยมของเราอยู่กึ่งกลางจอพอดี ทำได้โดย ใช้ข้อได้เปรียบของ Flexible Box Model จากนั้นเพื่อให้แน่ใจ ให้ใช้ Modernizr เพื่อจัดการกับ IE
เมื่อหน้าของเราอยู่ในกล่องสี่เหลี่ยมนี้ เราสามารถใช้ element body
เป็น wrapper ได้อย่างมีประสิทธิภาพ
body, html { height: 100%; width: 100%; } body { display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; -webkit-box-pack: center; -webkit-box-align: center; box-pack: center; box-align: center; }

ขั้นที่ 3 ใส่ style ให้กล่องที่สร้างขึ้น
เริ่มใส่ความเคลื่อนไหวให้ "กล่องสี่เหลี่ยม" อันนี้กันเลย
.box { background: #e3e3e3; border: 1px dashed #666; margin: auto; width: 400px; height: 200px; cursor: pointer; position: relative; -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s; }
สังเกตว่าเราจะทำให้ element นี้ รับค่า จากการเปลี่ยนแปลงสถานะใดๆ ก็ตาม เมื่อเกิดสถานะขึ้น เราจะทำ transition เพื่อเปลี่ยนแปลงรูปลักษณ์มัน (transition: all 1s
)



ขั้นที่ 4 ใส่เงา
ถัดไป เราได้เรียนรู้จากบทความนี้แล้ว เราจะใส่เงาเท่ห์ๆ โดยใช้ pseudo class ::after
.box::after { content: ''; position: absolute; width: 70%; height: 10px; bottom: 0; left: 15%; z-index: -1; -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4); -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4); box-shadow: 0 9px 20px rgba(0,0,0,.4); }



ขั้นที่ 5 จัดการกับ div ลูกที่อยู่ภายใน
ขณะนี้ div
ลูกที่อยู่ภายในจะยังอยู่ด้านบนสุดของทุกอัน ลองจัดตำแหน่ง position
พวกมันแบบ absolute แล้วทำให้มันขยายเต็มพื้นที่ว่างทั้งหมด
.box > div { background: #e3e3e3; position: absolute; width: 100%; height: 100%; top: 0; left: 0; font: 45px/200px bold helvetica, arial, sans-serif; text-align: center; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }



ขั้นที่ 6 ตรึง "ด้านหน้า" ไว้
อ้างถึงภาพด้านบน ลองคิดว่าด้านหลังของกล่องสี่เหลี่ยมเราจะแสดงผลอย่างไร เพราะความจริงที่ว่า element จะอยู่ต่ำใน markup ฉะนั้นเราต้องใส่ค่า z-index ให้มีค่าสูงขึ้น ลองแก้มันต่อดู
/* Make sure we see the front side first */ .box > div:first-child { position: relative; z-index: 2; }



ขั้นที่ 7 หมุนกล่องใบนี้
จากนั้นจะเริ่มสนุกแล้วหล่ะ เราจะเอาเม้าส์วางเพื่อ hover เหนือกล่อง มันควรพลิกกลับด้าน แล้วแสดงด้านหลังของมัน (อย่างน้อยก็เห็นตัวอักษรที่อยู่ด้านหลัง) เพื่อทำ effect นี้ เราจะใช้การ transformation โดยใช้ฟังก์ชัน rotateY
.box:hover { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); }



ขั้นที่ 8 ทำตัวอักษรกลับด้าน
ยังดูไม่ดีใช่ไหม? แต่จากนี้ ตัวอักษรจะกลับด้านแล้ว นั่นเพราะว่า เราเพียงแค่หมุนแค่ตัว container ลองจัดการจัดมันอยู่ใส่ค่าให้ div
ลูกหมุน 180 องศา
/* Hide the front-side when hovered */ .box:hover > div:first-child { opacity: 0; } .box:hover div:last-child { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); }
เราจากโค้ดส่วนสุดท้าย เราจะได้ effect ที่เราต้องการ!



สุดท้าย
ขอบคุณที่ติดตามอ่าน ผมหวังว่าคุณน่าจะเรียนรู้อะไรบ้างหล่ะ