Simple checkbox hack

posted on 26 Mar 2013 00:09 by limitblog in css directory Idea
blog นี้คงจะกลายเป็น blog css มั่วๆ ไปแล้วครับ เพรา entry นี้ก็จะมามั่วอีก 1 อัน เกี่ยวกับ checkbox hack..  checkbox hack  มันคืออะไรลองเข้าไปอ่านตามลิงค์ด้านล่างนะครับ

CSS-Tricks treehouse : what would you like to learn today? Web Design Web Development iOS Development Show search box Search Search in: All Articles Forums Snippets Videos ✕ Home Forums Snippets G...

 แล้วไอ้เจ้า checkbox hack นี้ผมก็ได้ทำการมั่วไปครั้งนู้นแล้วแต่ code มันสะเปะสะปะเหลือเกินจนตัวผมเองยังเข้าไปแก้ไม่ค่อยได้เลยเพราะมันนานมาแล้วและมั่วมากตามคอนเซ็ป <ด้านล่างคืออันที่แล้วมา>

สวัสดีวันที่ 8 มีนาคม 2555 (ขอให้กด F5 ย้ำๆ ก่อนนะครับ) สืบเนื่องจากปัญญหาคอมพังเลยได้จัดการยืม(แอบเอามา ขโมย หรือยืมไม่บอก) net-book ของหลานมาเล่นเน็ตพลางๆแก้ขัดไปก่อน ตัวผมเองก็เพิ่งเคยได้เคยใช้ net-book เป็นครั้งแรกในชีวิต มันช่างไม่พอดีเท้าแล...

08 Mar 2012 20:44
เรื่องของเรื่องคือวันนี้เข้าไปหา code wp. ที่ codecanyon ว่ามีอะไรแปลกๆใหม่ๆ เลยเข้าไปดูในหมวด css ไปเจอไอ้นี่เข้าให้
emm_663

โหย!! อันนี้ก็เอามาขายกัน http://t.co/b5XnAoLVft #css3

      ป๊าดโถ๊ะ !! ขายได้ด้วยประมาณ 120 บาท. โอ่ๆๆไม่แพงถ้าคิดจะซื้อ แต่จะซื้อทำไมถ้าเราทำเป็น(มั้ง) สูตรเดิมดูแล้ววิเคราะห์  ผมก็เลยลองทำมาอันนึง "อย่างมั่ว" เผื่อเอาไปประยุคต์ในแบบรูปแบบต่างๆ เหมือน vieo...
 
จากการดูใน video demo เขาใช้ไอ้ตัวเมนูนั้น เป็นแปป fixed คือ 9 จุดบนหน้าจอคือ บน-ซ้าย, บน-กลาง, บน-ขวา, กลาง-ซ้าย, กลาง-กลาง, กลาง-ขวา , ล่าง-ซ้าย, ล่าง-กลาง, ล่าง-ขวา
/*ถึงว่าทำขายเยอะจัด. 120 ไม่ถือว่าแพงค่านั่งจิ้มแถมลูกเล่นอีกเพียบ*/
Trick การจัดการวงกลม
จะอธิบายให้เข้าใจอย่างง่ายนะครับ(เพราะภาษาเทคนิคผมก็ไม่เชี่ยวชาญและไม่รู้เรื่องเลย :D)
 
-  ที่ต้องเตรียมคือโปรแกรมตัดภาพโดยผมใช้ Ps. ผมจะกำหนดพื้นที่มุม ล่าง-ซ้าย ที่ความกว้างและสูงของเมนูที่ 200px. ดังนั้นภาพต้องทำภาพขนาด 400px. x 400px. โดยวาดวงกลมเต็มพื้นที่ภาพแล้วแบ่งออกเป็น 4 ส่วนก็จะได้ส่วนละ 200px. จากนั้นกำหนด ส่วนของ icon ผมกำหนดที่ 35px. mark จุดไว้ดังภาพ /*ต้องขยับภาพวงกลมใหญ่ให้เคลื่อนลง 17px. และขยับขวาเข้ามา 17px วงกลมแดงจะได้อยู่กึ่งกลาง*/
 
 
-  แล้วก็นำเอาไอ้ภาพนี้ไปเป็น background ของ nav#social 200px. x 200 px. เลยนะจ๊ะ
-  ส่วนจุดแดง a.social-button.[socials] ในการขยับใช้ margin:x y; หาเอา จะง่ายมากๆ
สร้าง tag ง่ายๆ
 
<nav id="social">
           <input type="checkbox" id="hidden" name="hidden">
           <label for="hidden"></label>  *
           <img src="images/Plus.png" class="click">
             
            <ul>
                <li><a href="#" class="social-button twitter"><span>Twitter</span></a></li>
                <li><a href="#" class="social-button facebook"><span>Facebook</span></a></li>
                <li><a href="#" class="social-button dribbble"><span>Dribbble</span></a></li>
                <li><a href="#" class="social-button flickr"><span>Flickr</span></a></li>
                <li><a href="#" class="social-button google"><span>Google+</span></a></li>
            </ul>
 </nav>
 
* ไอ้ตัวนี้ถ้าไปมองใน css {nav#social input[type=checkbox] + label }มันจะเป็นส่วนที่ทำให้เราสามารถคลิกได้แต่เราจะมองไม่เห็นมัน โดยผมตั้งไว้ที่ 50px. x 50px. mark จุดมองเห็นโดยการใช้ background:rgba(0,0,0,.5) และทำการดีด padding img.click ให้เท่ากับขนาดของมัน
css อย่าง มั่ว เชิญเข้าไปแงะกันดูเองนะครับอธิบายไม่เป็นจริงๆครับเพราะมันอย่างมั่ว T_T
 
 
 
 
 สามารถเข้าไปดู demo ตามลิงค์นี้เลยนะครับ
 สามารถแงะ code เพื่อเอาไปศึกษาต่อจากการ download link นี้ได้เลย ตามสบายนะครับ
 
---------------------------------------------------------------
 
ปล. entry นี้อาจอ่านไม่รู้เรื่องควรมีพื้นฐานในเรื่องนี้นิดหน่อยนะครับเพราะเท่าที่ผมอ่านที่ผมบันทึกลงไปก็ค่อนข้าง งง อยู่พอสมควร จับต้นชนปลายไม่ค่อยถูก
 
- ใช้เวลาทำประมาณ 2-3 ชั่วโมงได้เพราะแก้ไขปัญหาการทับกันของภาพวงกลมแดงนานมาก
 
- ถ้าไม่เข้าใจตรงไหนลงควรรีบเปิด ดู code นะครับ ฮ่าฮ่า เพราะทำ css ให้เข้าถึงตำแหน่งโดยเลยไม่มีทิ้งไว้ข้างนอกเหมือนแบบก่อนๆเลย /*เดิมทุกทีจะทิ้งไว้โดดๆ(มักง่าย)  .twitter  คราวนี้ nav#social ul li a.social-button.twitter*/
 
- Theme ล่าสุดใน themeavanger ยังไม่ได้แก้ code เน่าเลย มัวแต่ก่ออิฐอยู่ว่างๆคงได้แก้ไขในไม่ช้า
 
 

Comment

Comment:

Tweet

I have seen their smiles full of teeth
And heard ungainly laughter.
-------------------------------------
Buy Diablo 3 Gold and Cheap GW2 Gold

#8 By diablo3bay520 on 2013-05-21 12:27

open-mounthed smile confused smile ยอดเลยครับ Hot! Hot! Hot! double wink

#7 By บุรุษนิรนาม on 2013-04-02 03:07

ว้ายยยยย สวดยอดครับท่าน Hot! Hot! Hot!

#6 By ozinepank on 2013-04-01 09:44

Hot! Hot! Hot! Hot! Hot!

ที่นี่ ไม่ธรรมดาอยู่แล้วครับ^^

สุดยอดฮะbig smile big smile big smile
โหดอีกแล้ว -.,- Hot! Hot! Hot!

#4 By NAT on 2013-03-28 13:33

Hot! Hot!  สุดยอดฮะ

#3 By Woratana N. on 2013-03-28 13:31

อะไรๆก็ขายได้หมด จขบ ก็ทำขายได้นะเนี่ย
( Hot! Hot! )

#2 By Nirankas on 2013-03-26 18:20

เท่ห์มากเลย อันนี้ Hot!

#1 By p.cobra on 2013-03-26 14:29