สร้างปุ่ม Checkboxes และ Radio แบบเฉ๋งด้วย SVG Animated

Published on: Oct 16 2013 by soraya
chkbox


นักพัฒนาเว็บไซต์หรือระบบต่างๆคงรู้จัก Checkbox และ Radio Buttons เป็นอย่างดีแน่นอนแต่วันนี้ผมจะมาแนะนนำวิธีการทำ Checkbox และ Radio Buttons เป็นเฉ๋งกันครับถ้าไม่เฉ๋งเราไม่มาแนะนำอย่างแน่นอนโดยกการใช้ JavaScript และ SVG Animated เป็นสคริปในการทำให้ Checkbox และ Radio Buttons สามารถเคลือนไหวได้แบบเฉ๋ง



หลายคนคงสงสัยว่า SVG คืออะไร SVG หรือ Scalable Vector Graphics เป็นมาตรฐานรูปภาพแบบเวกเตอร์ที่เริ่มใช้กันมานาน แต่กลับไม่แพร่หลายในการใช้งานบนเว็บสักเท่าไรนัก แม้แต่ กูเกิลซึ่งสนับสนุนการใช้ SVG ถึงขนาดจัดงาน SVG Open 2009 ได้ออกมาดัน SVG อีกครั้ง Brad Neuberg นักพัฒนาของกูเกิล กล่าวสรุปภาพรวมของ SVG แบบสั้นๆ ได้ดีมาก SVG ทั้งในแง่ไฟล์ภาพมีขนาดเล็กและย่อขยายแล้วไม่แตก

1
2
3
4
5
6
7
8
9
10
<form class="ac-custom ac-checkbox ac-cross">
    <h2>How do you collaboratively administrate empowered markets via plug-and-play networks?</h2>
    <ul>
        <li><input id="cb1" name="cb1" type="checkbox"/><label for="cb1">Efficiently unleash information</label></li>
        <li><input id="cb2" name="cb2" type="checkbox"/><label for="cb2">Quickly maximize timely deliverables</label></li>
        <li><input id="cb3" name="cb3" type="checkbox"/><label for="cb3">Dramatically maintain solutions</label></li>
        <li><input id="cb4" name="cb4" type="checkbox"/><label for="cb4">Completely synergize relationships</label></li>
        <li><input id="cb5" name="cb5" type="checkbox"/><label for="cb5">Professionally cultivate customer service</label></li>
    </ul>
</form>


แต่ก็ชี้ให้เห็นว่าอุปสรรคสำคัญของ SVG คือ IE ไม่รองรับ (เบราว์เซอร์ตัวอื่นๆ รองรับหมดแล้ว) ซึ่งกูเกิลเองได้พัฒนาทางเลือกสำหรับคนใช้ IE คือโปรแกรม SVG Web ที่ใช้จาวาสคริปต์ช่วยเรนเดอร์ SVG ถึงแม้จะทำงานได้ไม่เร็วเท่า native SVG แต่ก็ใช้แก้ขัดได้ ในส่วนของ HTML5 ถูกเขียนขึ้นมาโดยสนับสนุนการใช้ SVG เป็นอย่างมาก และน่าจะเป็นปัจจัยหนุนที่สำคัญของ SVG ในอนาคตอันใกล้นี้
ข้อมูลเพิ่มเติม : ;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.ac-custom label {
    display: inline-block;
    position: relative;
    font-size: 2em;
    padding: 0 0 0 80px;
    vertical-align: top;
    color: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: color 0.3s;
}
 
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 0;
    margin-top: -25px;
    position: absolute;
    cursor: pointer;
}
 
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
    opacity: 0;
    display: inline-block;
    vertical-align: middle;
    z-index: 100;
}
 
.ac-custom label::before {
    content: '';
    border: 4px solid #fff;
    transition: opacity 0.3s;
}

ขอบคุณข้อมูลจาก tympanus,

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



Comments

comments

Powered by Facebook Comments

Filed under: Java Script
Tags: ,