CSS3 Animated Bar

posted on 29 May 2013 10:29 by limitblog in css
   ห่างหายไปจากวงโคจรไปสักพัก..  วันนี้จะนำการมั่ว css ว่าด้วยเรื่อง progress bar อย่างง่ายและชาญฉลาดไม่กินทรัพยากร Html....
 
พอดีได้มีโอกาศเปิดคอมแล้วได้เข้าไปเยี่ยมชม codecanyon ในหมวด css เข้า ไปเจอ 2 อันนี้
 

CSS3 Animated Bar Graphs - Infographics

 
CSS3 Animated Progress Bars 
 
ไอ้หย๋า !! นี่มันไม่ Pure css นี่หนาเริ่มสงสั้ยทำไมไม่ Pure css สันดานโจรออกเลยเข้าไปแงะดู Soure อ่อมันไม่ Pure  เฉพาะตอนโหลดนี่เอง แต่กระนั้นยังเหลือบไปดู Html ไอ้หย๋า!! ยกกำลังสอง เมื่อไปเจอการวาง Html กันแบบทับถม ประมาณว่า
<div class="foo"> <div class="bar animate"> <span style="width: 49px;"> <span></span> </span> </div> <div class="bar red animate"> <span style="width: 98px;"> <span></span> </span> </div> ... </div>
เกิดความในใจลึกๆ นี่มันเรื่อง css นี่นาไม่น่ามั่วใน html ถ้าจะมั่วก็ต้องไปมั่วใน css .. ความมั่วก็เกิดขึ้นมาในหัวทันที ดูข้างบนเขาวาง element ไว้เพียบเลยผมมานั่งวิเคราะห์ดู ว่า มันน่าจะใช้การวางใน unorderlist และใช้แค่ list กับ span พอเพราะยังไง :before and :after ยังมีอย่างน้อยก็มีวัตถุดิบที่ออกมาจากอากาศตั้ง 2 ตัว กลัวไรฟะ คร่าวๆที่คิดไว้ น่าจะเขียนได้ 6 ตัวคือ 
 
 li , li:before , li:after , span , span:before , span:after
 
  //มีเยอะกว่าข้างบนอีกกลัวอะไรเพราะชอบมั่วอยู่แล้ว ฮุฮุ
<div class="bar"> <ul> <li><span style="width : 80%"></span></li> <li><span style="width : 55%"></span></li> <li><span style="width : 43%"></span></li> <li><span style="width : 70%"></span></li> <li><span style="width : 89%"></span></li> <li><span style="width : 65%"></span></li> </ul> </div>
สั้นกระจิ๊ดริดเลย ต่อมาก็วาง css แบบมั่วๆ งูๆปลาได้ดังนี้
 จะเลือกใช้ในส่วนของ span before after เป็นตัวในการวิ่งของตัว bar และใช้ ตัว span เป็นตัวกั๊กไม่ให้ตัวบาร์มันวิ่งหลุดออกนอกหลอด ส่วนตัววิ่งไหลๆ ขาวๆ ผมได้นำมาจาก Happy Holidays with CSS3 ฮุฮุ ไม่ได้เขียนเองเพราะเห็นแล้ว copy past เลย ไม่ต้องมานั่งไล่
 
ส่วนถ้าอยากจะกำหนดสีก็ดูบรรทัด 3 สุดท้าย ว่าผมมั่วยังไงและข้างล่างก็คือที่ออกมาแล้วนะจ๊ะ
 
สุดท้ายนี้: การมั่ว css ตัวนี้เป็นการเลียนแบบเพื่อให้ดูการวางตำแหน่งในแบบของผม เท่านั้นมิได้มีเจตณาลอกเลียนแบบหรือดูถูกทางต้นฉบับแต่อย่างไร ถ้าผิดผลากประการใดไม่ขออภัยอะไรทั้งนั้น อิอิ ..  แล้วเจอกันในการมั่ว css ใน entry ต่อไปในภายภาคหน้านะครับ :D
 
 

Comment

Comment:

Tweet

โหดมวก ๆ ฮะ Hot! Hot!

#5 By Woratana N. on 2013-09-04 13:46

งาม Hot! open-mounthed smile confused smile

#4 By บุรุษนิรนาม on 2013-06-12 19:54

หล่อเลยครับท่าน
Hot! Hot! Hot!

#3 By ozinepank on 2013-06-04 09:29

สวยจัง Hot!

#2 By p.cobra on 2013-05-31 05:28

อย่าเรียกว่ามั่ว แต่ให้เรียกว่าเป็นอีกทางเลือก อิอิ
( Hot! Hot! )

#1 By Nirankas on 2013-05-30 19:11