[CSS] My Twitter Update

posted on 12 Feb 2012 01:21 by limitblog in css directory Idea

สวัสดีวันที่ "12 กุมภาพันธ์ 55"
หลังลุยงานสวนมาหมาดๆ เมื่อเย็นที่ผ่านมา ก็นั่งเล่นๆหาโปรแกรมที่จะเอามาแทนไอ้
Adobe Dreamweaver ที่ใช้อยู่รู้สึกว่าโปรแกรมมันใหญ่ไป เกินความจำเป็น อันที่จริงมันก็ดีมากๆ เลยครับไอ้ Dreamweaver เนี่ย บอกตามรงมันมีห่าเหวอะไรไม่รู้เยอะไปหมดใช้จริงๆมีแค่ไม่กี่อัน... หาโปรแกรมอยู่นานได้มาหลายอันแต่ชอบอันนี้ครับ coffeecup html-editor โอ่เล็กดี 30 mb นิดๆ(ไม่ใหญ่ถ้าเทียบกับ adobe แต่เทียบกับ text edit คนละเรื่อง หุหุ)ที่สำคัญชอบตรงที่มันมี css3 เวลาเราพิมพ์ตัวอักษรลงไปมันก็จะรันให้เราเลือกคำใกล้เคียง (เค้าเรียกว่าอะไรไม่รู้ ช่างมัน) เหมือน Dreamweaver ที่สำคัญมันฟรีด้วย (ไม่ได้ลิงค์ลิงค์ฟรีให้นะครับลองไปหาดู) แต่ถ้าเสียตังค์ก็มี tool เพิ่มมา เช่น code cleaner, image map, ระบบจัดการทางไกล อะไรพวกนั้นซึ่งช่างมันไม่เคยใช้ หึหึ อันนี้ดีขอแนะนำ โม้ซะยาวขอเข้าเรื่องครับ

วันนี้ขอเป็นเอา css มาแจกมาให้แงะกันนะครับ ...ตอนทำธีมแรกๆ บางคนคงเคยเห็นผมติด รูปนกฟ้า ข้างล่างมีคำว่าfollow me!!พอเอาเมาว์ไปวางมันจะ hover ขั้นเป็นข้อความที่เราโพสลงไปล่าสุดบน twitter นะครับเลยเอามาแปะไว้ใน entry นี้ซะเลยเพิ่มลูกเล่น css3 keyframe animation นิดหน่อยให้นกโครงไปมา นะครับเริ่มเลย ง่ายๆ กากๆ
ก่อนอื่นเอา script timeline twitter มาเปลี่ยนก่อน <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="http://twitter.com/statuses/user_timeline/**Your tweet**.json?callback=twitterCallback2&count=1" type="text/javascript"></script> ตรง your tweet ให้ใส่ account ของเราไป (หรืออะไรสักอย่าง เรียกไม่เป็น หึหึ) เช่น https://twitter.com/emm_663 ก็เอาไอ้อันหลัง emm_663 มาใส่ <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="http://twitter.com/statuses/user_timeline/emm_663.json?callback=twitterCallback2&count=1" type="text/javascript"></script> จะขอเรียงใน html และ script ง่ายๆให้เลยนะครับ เพราะไม่ร้จะอธิบายยังไงเดี๋ยวงงกันใหญ่เอางงรอบเดียวพอ หุหุ <div class="twitter"> <div id="twitter_div"> <ul id="twitter_update_list"></ul> </div><img src="http://uc.exteenblog.com/limitblog/images/social/twitter-icon.png"><a href="https://twitter.com/emm_663">Follow me !!</a> </div> <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="http://twitter.com/statuses/user_timeline/emm_663.json?callback=twitterCallback2&count=1" type="text/javascript"></script> .
เอาเรียงตามนี้เลยนะครับส่วนนี้เอาไปแปะไว้ที่ custom code นะครับจะให้มันอยู่ส่วนไหนก็แปะเอาส่วนนั้น
ต่อมา css ครับ
<style> .twitter{ position:relative; width:60px; height:100px; } .twitter>img{ -webkit-animation: rotate 4s linear infinite; -moz-animation: rotate 4s linear infinite; } @-webkit-keyframes rotate { 0% { -webkit-transform: scale(.95) rotate(0deg); } 50% { -webkit-transform: scale(1.1) rotate(-10deg); } 100% { -webkit-transform: scale(.95) rotate(1deg); } } @-moz-keyframes rotate { 0% { -moz-transform: scale(.95) rotate(0deg); } 50% { -moz-transform: scale(1.1) rotate(-10deg); } 100% { -moz-transform: scale(.95) rotate(1deg); } } .twitter>img{ width:60px !important; height:60px; background:#eee; border:solid 5px #fff !important; border-radius:40px; padding:5px; box-shadow:0px 0px 7px #333; } .twitter a{ font-size:12px; font-weight:bold; width:80px; position:absolute; bottom:0; left:0; margin:0 5px; text-shadow:0 1px 1px #000; } #twitter_update_list { color:#fff; background:rgba(0,0,0,0.7); width:250px; position:absolute; padding:0; list-style:none; font-size:12px; border-radius:5px; border:solid 3px #fff; box-shadow:0 0 0 1px #bbb; margin:0px -90px; opacity:0; -moz-transform:scale(0); -moz-transition:opacity 1s, margin 1s, -moz-transform 1s; -webkit-transform:scale(0); -webkit-transition:opacity 1s, margin 1s, -webkit-transform 1s; z-index:1; } .twitter:hover #twitter_update_list{ -moz-transform:scale(1); -webkit-transform:scale(1); opacity:1; margin:-90px -89px; } #twitter_update_list:after { content:""; display:block; position:absolute; bottom:-18px; left:110px; width:0; border-width:15px 15px 0; border-style:solid; border-color:#fff transparent; } #twitter_update_list li{ padding:5px; } #twitter_update_list li span{ text-shadow:1px 1px 1px #000; } #twitter_update_list li a{ floar:right; position:relative; } </style> แนะนำส่วนของ css ค่อนข้างดูแล้วลำคาญลูกตายิ่งแนะนำเอาไปใส่ใน ไว้ใน css ของตัวธีมเลยนะครับเพราะมันคงยัดไม่ไหวในส่วน custom code แน่นอน.... หลักการทำ hover ง่ายๆก็คือ อ้างอิง element สิ้งที่ต้องการจะ hover
.twitter:hover #twitter_update_list คือต้องการชี้ไปที่ .twitter (รูปนก) แล้วให้ #twitter_update_list เด้งขึ้นมา (โพสล่าสุด) ลองดูครับง่ายๆ
และอีกอันที่เพิ่มเข้ามาก็คือ นกๆ โครงไปโครงมาก็ ก็กำหนด keyframe แบบบ้านๆกันเลยล่ะครับ ถ้าสนใจสามารถศึกษาต่อเองได้ที่ลิงค์นี้เลยครับ keyframe-animation-syntax

ท้ายนี้ :: ขอแนะนำโปรแกรม coffeecup html-editorครับลื่นปรื้ด

ปล. :: ทำ About-me ใหม่ลองเข้าไปดูกันนะครับ
อันทรี่นี้ไม่ได้อธิบายอะไรเลยลองไปแกะดูนะครับขออภัยยิ่ง ถ้าชอบหรือถูกใจ COPY>PAST โลด ทดสอบแสดงผลได้ดีทั้ง Firefox และ chrome (opera ไม่เล่นงิ)

เกือบลืมโชว์นก "นกอยู่นี่"