CSS3 property 10 ตัวที่ต้องทำความคุ้นเคยกับมัน

เราได้เรียนรู้เกี่ยวกับ 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 อื่นๆ support text-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 value strech ที่เป็นค่าเริ่มต้น

ดูว่าจะเกิดอะไรขึ้นถ้าเราใส่ค่าความกว้างให้กับ #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 ที่เราต้องการ!

รีวิวผลลัพธ์ (ดูได้ดีที่สุดในบราวเซอร์ Webkit)

สุดท้าย

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