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
 
 

สร้าง Tooltip frame work ไว้ใช้เองดิ

posted on 23 Apr 2013 12:58 by limitblog in css directory Idea
   ก่อนเข้าเรื่องต้องสวัสดีย้อนหลังวันสงกราณ์ก่อนนะครับ.. :D
 
เข้าเรื่อง:
 
              วันนี้เป็น css มั่วๆ เรื่อง tooltip ทำในรูปแบบ css frame work อย่างง่ายครับ (ถ้าใครไม่รู้ว่า tooltip คืออะไร >>กดตรงนี้<< )
   มันง่ายจริงเหรอ ?? = ผมยืนยันว่าง่าย [เพราะมั่วเองง่ายเอง ฮ่าฮ่า]
   แล้วมันจะใช้ได้จริงหรือ ??  = ใช้ได้จริง แน่นอน
   แล้วมันทำอย่างไรล่ะ = มาดูกัน
 
สร้าง tag ง่ายๆขึ้นมาก่อน:
 
/*tl = tooltip*/
 <a class="tl-contain" href="#"><span class="tl ">Tooltip area</span>text show tooltip area</a>
 หรือ จะเป็น tag paragrah strong em b s i อะไรก็ได้ แค่ใส่ class ลงไป
 <strong class="tl-contain" ><span class="tl ">Tooltip area</span>text show tooltip area</strong >
 
มาดูโครงสร้าง css อย่างมั่วกันก่อนนะครับ:
 
.tl-contain{
  position:relative; 
/*ตัวนี้จะเป็นตัว lock tootip ไม่ให้หลุดออกไป*/
}

/* tooltip body */

.tl{
    display:block;
    position:absolute;
/*มีผลกับ tl-contain*/
    width:200px;
/*make default width*/
    padding:10px 15px;
    left:50%;
/* set normal center*/
    bottom:30px;
    margin-left:-115px;
/* /center/ width 200-left 100 + 15(padding 15+15=30/2 left and right)*/

    color:#fff;
    border-radius:3px;
    background: gray;
/*default*/
 
/*set style*/
    box-shadow:inset 0 1px rgba(255,255,255,.3),0 0 5px rgba(0,0,0,.5);
    border:solid 1px rgba(0,0,0,.2);

/*effect*/
    opacity: 0;
    visibility: hidden;
    -moz-transition:all .5s;
    -webkit-transition:all .5s
}

                  
 /*========hover effect======*/

                    .tl-contain:hover .tl{
                        opacity: 1;
                        visibility: visible;
                    }
 

/*========Fix image in box======*/
.tl img{
  max-width:100%;
  padding-top:6px;
}

/*======== tringle ======*/
.tl:before{
  content:"";
  position:absolute;
  width:15px;
  height:15px;

  bottom:-8px;
  left:107px;
/* /center/ width 200-left 100 + (width/2)*/
  -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
 
/*style*/
    border-bottom:solid 1px rgba(0,0,0,.2);

    border-right:solid 1px rgba(0,0,0,.2);
 
 /*kill inner shadow*/
    box-shadow:none !important;
}

 
ตัวอย่าง     นี่คือข้อความแสดง Tooltip areatootip
 
--------------------------------------------------------------------------------------------------------------

Frame work


Width :default 200px


width default 200px.

width default 200px.
<a href="#" class="tl-contain"><span class="tl">Tooltip</span>text</a>

width 300px.

width 300 pixel
<a href="#" class="tl-contain"><span class="tl w-300">Tooltip</span>text</a> css .w-300{ width:300px; margin-left:-165px;/* /center/ width 300-left 150 + 15(padding 15+15=30/2 left and right)*/ } .w-300:before{ left:157px;/* /center/ width 300-left 150 + (width/2)*/ }

width 400px.

width 400 pixel
<a href="#" class="tl-contain"><span class="tl w-400">Tooltip</span>text</a> css .w-400{ width:400px; margin-left:-215px;/* /center/ width 400-left 200 + 15(padding 15+15=30/2 left and right)*/ } .w-400:before{ left:207px;/* /center/ width 400-left 200 + (width/2)*/ }

width 500px.

width 500 pixel
<a href="#" class="tl-contain"><span class="tl w-500">Tooltip</span>text</a> css .w-500{ width:500px; margin-left:-265px;/* /center/ width 500-left 250 + 15(padding 15+15=30/2 left and right)*/ } .w-500:before{ left:257px;/* /center/ width 500-left 250 + (width/2)*/ }

Background color :default gray


Background default gray

Background default gray
<a href="#" class="tl-contain"><span class="tl">Tooltip</span>text</a>

CadetBlue

CadetBlue
<a href="#" class="tl-contain"><span class="tl CadetBlue">Tooltip</span>text</a>

Crimson

Crimson
<a href="#" class="tl-contain"><span class="tl Crimson">Tooltip</span>text</a>

DarkSlateBlue

DarkSlateBlue
<a href="#" class="tl-contain"><span class="tl DarkSlateBlue">Tooltip</span>text</a>

HotPink

HotPink
<a href="#" class="tl-contain"><span class="tl HotPink">Tooltip</span>text</a>

IndianRed

IndianRed
<a href="#" class="tl-contain"><span class="tl IndianRed">Tooltip</span>text</a>

Olive

Olive
<a href="#" class="tl-contain"><span class="tl Olive">Tooltip</span>text</a>

OrangeRed

OrangeRed
<a href="#" class="tl-contain"><span class="tl OrangeRed">Tooltip</span>text</a>

Gold

Gold
<a href="#" class="tl-contain"><span class="tl Gold">Tooltip</span>text</a>

DeepSkyBlue

DeepSkyBlue
<a href="#" class="tl-contain"><span class="tl DeepSkyBlue">Tooltip</span>text</a>

SeaGreen

SeaGreen
<a href="#" class="tl-contain"><span class="tl SeaGreen">Tooltip</span>text</a>

css pack

css .CadetBlue, .CadetBlue:before{ background:CadetBlue ;} .Crimson ,.Crimson:before{background:Crimson ;} .DarkSlateBlue ,.DarkSlateBlue:before{background: DarkSlateBlue ;} .HotPink ,.HotPink:before{background: HotPink ;} .IndianRed ,.IndianRed:before{background: IndianRed } .Olive ,.Olive:before{background: Olive } .SaddleBrown ,.SaddleBrown:before{background: SaddleBrown } .OrangeRed ,.OrangeRed:before{background: OrangeRed } .Gold ,.Gold:before{background: Gold } .DeepSkyBlue ,.DeepSkyBlue:before{ background: DeepSkyBlue } .SeaGreen ,.SeaGreen:before{background: SeaGreen}

Effect :default opacity


Effect default opacity

default opacity
<a href="#" class="tl-contain"><span class="tl">Tooltip</span>text</a>

Top

Top
<a href="#" class="tl-contain"><span class="tl top">Tooltip</span>text</a> css /*hover top*/ .tl.top{ bottom:50px;} .tl-contain:hover .tl.top{bottom:30px;}

Bottom

Bottom
<a href="#" class="tl-contain"><span class="tl bottom">Tooltip</span>text</a> css /*hover bottom*/ .tl.bottom{ bottom:0px;} .tl-contain:hover .tl.bottom{bottom:30px;}

Zoom-in

Zoom-in
<a href="#" class="tl-contain"><span class="tl zoom-in">Tooltip</span>text</a> /*hover zoom-in*/ .tl.zoom-in{ bottom:-30px; -moz-transform:scale(.1); -webkit-transform:scale(.1); } .tl-contain:hover .tl.zoom-in{ bottom:30px; -moz-transform:scale(1); -webkit-transform:scale(1); }

Zoom-out

Zoom-out
<a href="#" class="tl-contain"><span class="tl zoom-out">Tooltip</span>text</a> /*hover zoom-out*/ .tl.zoom-out{ bottom:150px; -moz-transform:scale(3); -webkit-transform:scale(3); } .tl-contain:hover .tl.zoom-out{ bottom:30px; -moz-transform:scale(1); -webkit-transform:scale(1); }
--------------------------------------------------------------------------------------------------------------
 
เอาไปแปะใน blog เน้อ :
 
<link rel="stylesheet" type="text/css" media="all" href="https://dl.dropboxusercontent.com/u/70533757/how2/tooltip/css/tooltip.css">
 
ตัวอย่าง: การใช้แบบมั่ว
 
html
 
<a  class="tl-contain" href="#"><span class="tl DarkSlateBlue w-500 zoom-in">ช้างแอฟริกา หรือ ช้างแอฟริกัน (อังกฤษ: African elephant) เป็นช้างสกุลหนึ่ง ที่อาศัยอยู่ในทวีปแอฟริกา จากหลักฐานฟอสซิลที่ค้นพบทำให้ทราบว่า ช้างแอฟริกาอาศัยอยู่ในทวีปแอฟริกามาตั้งแต่ยุคไพลสโตซีน</span>Loxodonta</a>
 
การแสดงผล
 
 
 
ปล. ช่วงนี้มันร้อนมากเลยเลยทำอะไรได้ค่อนข้างช้าสมาธิมันสั้นลงไป ลูกเล่นที่ใส่ไปก็น้อยนิด style ก็มีแบบเดียวเห้ยยย ยังไงใครเอาไปโมก็จะขอบพระคุณมากเลยแหละ :D

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 เน่าเลย มัวแต่ก่ออิฐอยู่ว่างๆคงได้แก้ไขในไม่ช้า