css กันบูด

posted on 22 Feb 2013 21:58 by limitblog in say directory Lifestyle
หลังๆ ผมไม่เข้า @limitblog มาเขียนโม้อะไรเลย ส่วนเรื่อง css3 ก็น่าจะหาอ่านได้ไม่ยากตามเว็ปทั่วๆไป  entry นี้ว่าด้วยการ กันบูด กันลืม การใช้ css ของผมนั่นเองหลังๆไม่ได้เขียน demo อะไรเลยเห่อทำธีมด้วย jQuery อยู่ทาง @themeavanger นู้น และได้รับการช่วยเหลืออย่างล้นพ้นจากท่าน @pandora ในเรื่อง jQuery ท่าน @isadnop ในการช่วยเทส debug (เทสธีมเน่า) ต้องขอขอบคุณ ณ.ที่นี้ด้วยครับ :D
 
   ที่จริงผมชอบเขียนโปรแจค css3 demo เล็กๆ เล่นนะครับมันเพลินดี  แต่ด้วยแรงจูงใจไม่ค่อยมี จนผมได้เข้าไปเห็นใน timeline ของท่าน @ozinepank เค้าโพส blog ของท่าน @designil โอ๊ะๆ มาละๆ เข้าทางๆ ลองทำเป็นแบบ pure css ดู

สวัสดีครับ หลังจากห่างหายไปนาน ตอนนี้ไปฝึกวิชากลับมาอัพบลอคเหมือนเดิมแล้วคร้าบ ปกติผมมีเว็บส่วนตัวอยู่ที่ Designil.com ครับ และคอยอัพเดทข่าวสารต่าง ๆ เกี่ยวกับ Web Design ใน Designil Facebook Page ท่านใดสนใจลองแวะไปเยี่ยมชมกันนะคร้าบ วันนี้จะพูดถ...

21 Feb 2013 19:07
ก่อนอื่นต้องขออนุญาติ ท่าน @designil ณ.ที่นี้เลย ฮุฮุ ที่ถือวิสาสะเอางานของท่านมาโมใหม่ ในแบบ pure css ครับ :D
สามารถเข้าไปดู html css link: http://jsfiddle.net/emm_663/Er7Pz/1/   
 
    ไม่ได้ใส่ gradient background นะครับรีบไปหน่อย หลักการที่ผมใช้นั้นไม่ถึงกับยุ่งยาก

            <li class="tweet">
                <a href="#" class="tweet"><span>Follow on twitter</span><span>Twitter friend</span></a>
                <span>125</span>
            </li>
 
ตัวอย่างก้อนนี้ ผมจะแยกเป็นส่วนๆ เพื่อไม่ให้มีปัญหากับการใช้ css บังคับ
- li.div  // บังคับทั้งหมดตอน hover
- li a.div span // ใช้ show/hide  ตัวลงค์ hover
- li.div span  // ใช้โชว์เลข ต่อท้ายสุด
 
ส่วน css ไปดูเองละครับมันเยอะอธิบายไม่ถูก...
ไม่ต้องงนะครับถ้าใครเข้าไปดู css ตรง display:none กับ visibility:hidden ทำไมผมต้องใส่ไปทั้ง 2 อัน ผมพลาดเองครับ 555+
 
สิ่งที่พลาด
- ไม่ได้แยก ส่วนตัว logo ดันเอามาเป็น bg.
- gradient background
- z-index a.div span ขึ้นมาทับ bg
 ------------------------------------------------------------------
 
สุดท้าย ขอขอบคุณทุกๆที่ได้เอ่ยนามและสำคัญที่สุดคือท่าน @designil ที่ทำให้เกิด entry ขี้เกลียดของผมอันนี้ขึ้นมา ถ้าทำให้ท่านไม่สบายใจหรือประการใดยินดีลบกระทู้นี้นะครับ :D
 

Comment

Comment:

Tweet

โอ้ว ชอบเลย เดี๋ยวลองเอาไปประยุกค์ใช้ต่อบ้างดีกว่า

#15 By BoatKung on 2013-02-28 00:54

ความรู้ดีๆแบบนี้ต้องให้ดาวครับ big smile open-mounthed smile confused smile Hot! Hot! Hot!

#14 By บุรุษนิรนาม on 2013-02-25 21:09

#13 By limitblog on 2013-02-24 10:53

sad smile  โหดมาก หนูยังเรียน css ไม่ถึงขั้นนี้เลย ขอแอบเอาไปศึกษาต่อ

#12 By NAT on 2013-02-24 10:47

ด้านcodeนั้นต้องสารภาพว่าไม่เกทเท่าไหร่ แต่ยังไงก็ติดตามดูเพราะชอบ ลักษณะการออกแบบ คร๊าบ Hot!

#11 By p.cobra on 2013-02-24 03:23

จะคอยติดตามดูผลงานดีๆอยู่เรื่อยๆนะคะ สุดยอด cry

#10 By zaяaz' on 2013-02-23 20:29

ภาษาคอมพิวเตอร์ ดูไฮเทคยังไงไม่รู้แฮะ
big smile big smile Hot! Hot!

#9 By Nirankas on 2013-02-23 08:30

กด report entry นี้ก่อน เพราะเป็นบทความ GEEK 18+ ฮ่าๆๆ
ขอบพระทัยที่อ้างอิงกระผม ปล่อยๆของต่อไปท่าน
  Hot!  Hot! Hot!

#8 By ozinepank on 2013-02-23 07:23

ขอให้มีไฟสร้างสรรค์เยอะ ๆ ยิ่งขึ้นยิ่งขึ้นนะครับทั้งสองท่าน @limitblog  @designil 
ขอติดตามชมผลงานต่อ ๆ ไปครับ ^^)/

#7 By Anantsiri Ch on 2013-02-23 02:49

Hot! Hot! Hot! Hot!

ยังสุดยอดเหมือนเดิม555+^^

..

หายไปนานสบายดีนะครับผม..

ว่างๆอย่าลืมแวะเวียนมานะครับ^^confused smile confused smile confused smile
เป็นเกียรติอย่างยิ่งเช่นกันคร้าบ :)
Hot! Hot!

#5 By iSadNop on 2013-02-23 00:25

@designil อันนั้นผมก็คงพลาดไปอีกอย่างล่ะครับ ฮ่าๆ

#4 By limitblog on 2013-02-22 23:53

เพิ่มเติมนะคร้าบ dribbble มีบีสามตัวคร้าบ ><

#3 By Woratana N. on 2013-02-22 23:45

เป็นเกียรติอย่างยิ่งคร้าบ ชอบๆ Hot! Hot! Hot! Hot!

#2 By Woratana N. on 2013-02-22 23:43