เทคนิดใหม่สร้าง Timeline สำหรับแสดงผลรายละเอียดด้วย CSS 3D


มาเรียนรู้เรื่อง CSS 3D กันต่อดีกว่าครับจากหลายบทความที่เราเคยแนะนำไปเป็นเทคนิคต่างๆ วันนี้ก็เป็นอีกเทคนิคหนึ่งโดยการสร้าง CSS 3D แบบ Timeline เมื่อเราคลิกจะแสดงรายละเอียดใน Timeline นั้นขึ้นมาโดยการขยายรายละเอียดและเพิ่มลูกเล่นเพื่อสร้างจุดเด่นให้กับ Timeline ดป็นอีกเทคนิคในการสร้างรูปแบบเว็บไซต์ที่น่าสนใจอีกแบบครับลองไปใช้งานกันดูครับน่าสนใจดีครับกับเทคนิค CSS 3D



โค้ดส่วนนี้เป็นส่วนในการเพิ่ม Timeline เราสามารถเพิ่มได้เลือยๆครับหรือจะเอาไปเขียนดันแปลงโดยใช้ loop ก็ได้ครับ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul class="timeline">
    <li class="event">
        <input type="radio" name="tl-group" checked/>
        <label></label>
        <div class="thumb user-4"><span>19 Nov</span></div>
        <div class="content-perspective">
            <div class="content">
                <div class="content-inner">
                    <h3>I find your lack of faith disturbing</h3>
                    <p>Some text</p>
                </div>
            </div>
        </div>
    </li>
     <li class="event">
        <input type="radio" name="tl-group"/>
        <!-- ... -->
    </li>
     <!-- ... -->
 </ul>

ดาวน์โหลด…..!!!

ขอบคุณข้อมูลจาก http://tympanus.net

Comments

comments

Powered by Facebook Comments