สอนสร้างเว็บ แก้ปัญหาระดับชาติ ใช้ display inline-block แล้วเกิดช่องว่าง

display:inline-block คืออะไร? คำสั่งความหมายดูแปลกๆ ไม่คุ้นตา คุ้นหู เหมือนพวก font-size,color,… สมรศรีเห็นผมนั่งพิมพ์ คงดูเหมือนคนบ้านั่งพิมพ์ภาษาต่างดาว ผมจะปล่อยให้น้องสมรผู้น่ารัก มองผมเป็นมนุษย์ต่างดาวบ้าบอไม่ได้ อืม… เอาไงดี…คิดคิดคิด เอาล่ะ…งั้นล้างสมองจัดการให้น้องสมรมาเป็นมนุษย์ต่างดาวเหมือนกรูแล้วกันวะ ฮ่าๆ display:inline-block เนี่ยะเป็นคำสั่ง CSS ไว้จัดเลย์เอาท์ หรือ อิลิเม้นท์ ให้อยู่บรรทัดเดียวกัน โดยสามารถกำหนดให้จัด ชิดซ้าย กึ่งกลาง ชิดขวา ได้อย่างง้ายดาย ตามรูป สมรศรี : แล้วไงคะพี่ แล้วชาติมันล่มจมตรงไหน ถึงต้องมาแก้ปัญหา ปัญหามันอยู่ตรงนี้ครับ เวลาเราสั่ง inline-block มันจะเกิดช่องว่างของแต่ละอิลิเมนท์ ทำให้ดีไซน์ที่วางไว้ไม่สวยงาม เราจึงต้องมาคืนความสุขให้กับประชาชน วิธีการก็แค่ใส่คอมเมนท์ไว้ตามช่องว่างแต่ละอิลิเมนท์ตามนี้ <ul> <li>content</li><!– –><li>content</li><!– –><li>content</li> </ul> สมรศรี : แค่นี้หรอคะ ผม : ครับ สมรศรี : ชาติเจริญขึ้นเยอะเลยเน๊อะ ผม…

ประยุกต์ใช้ Transition

สอนสร้างเว็บ ประยุกต์ใช้งาน Transitions – CSS3

เช้าวันเสาร์อากาศแจ่มใส ผมหวังว่าการสอนทำเว็บในวันนี้คงจะราบรื่นไปด้วยดี

แต่…

น้องสมรศรีเดินมาด้วยท่าทางมีนๆ

ผมจึงทัก “เป็นไงบ้างครับน้องสมร ท่าทางดูไม่ดี มีอะไรให้ผมช่วยไหม”

ค่ะพี่ คือเมื่อครั้งที่แล้วที่พี่สอนเรื่อง การใช้งานคำสั่ง Transitions หนูก็เข้าใจแจ่มแจ้งดีนะคะ แต่พอหนูลองเอามาประยุกต์ใช้งานเองจริงกลับทำไม่ได้ค่ะ ไปไม่ถูก ไม่รู้จะเริ่มต้นยังไง

อ่อ…เข้าใจล่ะ ไม่แปลกหรอกครับสำหรับคนที่ไม่เคยเขียนเว็บ หรือ CSS มาก่อน อาจจะประยุกต์ใช้คำสั่งต่างๆไม่เป็น เดี๋ยวผมจะยกตัวอย่างให้ดู และให้ลองทำตามดูสัก 2-3 ตัวอย่างตามนี้

การใช้ Transition ร่วมกับ

  • box-shadow
  • border
  • box-radius
  • top, bottom, left, right

พร้อมแล้วเรียนทำเว็บ ประยุกต์ใช้คำสั่ง Transition ตามคลิปเลยครับ

CSS3 Transition

สอนสร้างเว็บ Animation effect ด้วย CSS3 Transitions

หลังจากที่สมรศรีเข้าใจที่มาที่ไปของวิธีสร้างเว็บ Animation แล้ว เธอจึงตัดสินใจที่จะเริ่มต้นด้วยการใช้ CSS3 เนื่องจากคำสั่งที่ง่าย สั้น กระชับ เร้าใจ นี่แหล่ะ!! เหมาะกับเด็ก GEN Y อย่างน้องสมรศรีเป็นอย่างยิ่ง   “ลุยเลยค่าพี่ CSS3 นี่แหล่ะที่หนูต้องการ” เมื่อรู้ข้อดี ข้อเสีย สมรศรีจึงไม่ลังเลที่จะตัดสินใจ   “ได้เลยครับ ยังไงในระหว่างเรียนผมจะชี้ให้เห็นชัดๆอีกที” ผมย้ำอีกครั้งเพื่อความเข้าใจที่ชัดเจน   คุณสมบัติแรกของ CSS3 ในการทำ Animation ก็คือ “Transition” แปลเป็นไทยแบบลูกทุ่งคือ “การเปลี่ยนแปลง” เจ้า transition นี่แหล่ะพระเอกของเราที่จะทำให้คุณสมบัติธรรมดาอื่นๆ เช่น width, height, top, left,… สามารถที่จะเคลื่อนไหวได้   ตัวอย่างการใช้ transition .test{transition:width 2s;} ความหมายคือ การเปลี่ยนแปลงค่าความกว้าง ให้มีระยะเวลา 2 วิ เช่นเรากำนหดความกว้างให้ขยายจาก 100px…

สอนสร้างเว็บ Animation ทางเลือก(CSS3 หรือ jQuery)

ในชั่วโมงสุดท้ายของคอสเรียนสร้างเว็บ HTML CSS สมรศรีรู้สึกตัวเองมีวิชากล้าแกร่ง บัดนี้หล่อนพร้อมที่จะออกลุยยุทธจักร นักสร้างเว็บแล้ว เธอจึงท่องไปในโลกอินเตอร์เน็ต ดูเว็บต่างๆของชาวโลก แต่แล้ว เธอก็ต้องหยุด… แม่เจ้า!!! แต่ละเว็บทำไมมัน Animation อลังการงานสร้างขนาดนี้ สมรไม่เคยรู้เลยว่าเค้าจะทำเว็บกันได้สุดยอดขนาดนี้ ใช่แล้วครับ สมรศรี โลกนี้ไม่มีสิ่งใดดีที่สุด มีแต่ดีกว่า ไม่เว้นไม่แต่โลกของการสร้างเว็บ คอร์สเรียนเขียนเว็บไซต์ด้วย HTML CSS นั้นน้องสมรได้เรียนพื้นฐานวิธีสร้างเว็บ ได้รู้โครงสร้าง ประกอบหน้าเว็บได้สวยงาม เท่านี้ก็เพียงพอต่อการทำเว็บออกสู่สายตาประชาชนแล้ว แต่ถ้าน้องสมรศรีต้องการความเร้าใจแล้วล่ะก็  ผมก็ขอเสนอการทำเว็บ Animation …แต่ก่อนคิดจะเริ่มทำผมก็ขออธิบายทำความเข้าใจกันสักนิด สูดหายใจลึกๆ … ต่อจากนี้คือประวัติศาสตร์ เริ่ม… ช่วงสมัยที่ Flash รุ่งเรื่อง ทุกเว็บต่างตกแต่ง Animation effect กันด้วยโปแกรม Adobe Flash ซึ่งเป็นเครื่องมือที่ถูกพัฒนามาช้านาน จึงทำให้ผู้ใช้งานทำ Animate นั้นเป็นเรื่องง่าย ไม่จำเป็นต้องรู้เรื่องโปรแกรมมิ่งมากนัก แต่เมื่อวันที่บร๊ะเจ้าจ๊อป (Steve Jobs)  มาพร้อมอาวุธคู่กาย(iPhone iPad iPod) ได้ลั่นว่าจาไว้ว่า “อาวุธของข้าไม่ Support…

สอน HTML5 for mobile : jQuery mobile อีเวนท์ Swipe

การเขียน web HTML นั้นโดยเว็บปกติก็สามารถจะเขียนเพื่อให้ใช้งานบน Tablet หรือ Mobile ได้อยู่แล้ว โดยเปลี่ยนจากการใช้เมาส์เป็นการใช้นิ้วมือนั่นเอง แต่ใน Mobile เองก็มีอีเวนท์ touch ที่เพิ่มขึ้นมาอีกเช่น การ Tab, hold, Swipe ซึ่งทำให้เราเขียน HTML สั่งงานอีเวนท์เหล่านี้ได้เช่นกัน

ในที่นี้เราจะสอนการเขียน jQuery mobile ใช้อีเวนท์ Swipe คือการที่เราใช้นิ้วปัดไปที่หน้าจอ Mobile ทัั้งซ้่ายและขวา

Swipe ทางซ้าย

$(“p”).on(“swipeleft”,function(){
alert(“You swiped left!”);
});

Swipe ทางขวา

$(“p”).on(“swiperight”,function(){
alert(“You swiped right!”);
});

ทั้งสองอีเวนท์นี้จะเกิดขึ้นเมื่อลากทางซ้ายหรือขวาบนอีลิเมนท์ที่กำหนดมากกว่า 30px

ตัวอย่างการใช้อีเวนท์ swipe

ตัวอย่างใช้ Swipe เปิด ซ่อน เมนูด้านข้าง

สอน jQuery ตัวอย่างทำแปลงร่างรูปตามตำแหน่งเมาส์ (ประยุคใช้อีเวนท์ mousemove)

จากรูปเราจะทำ interactive เมื่อเมาส์เคลื่อนที่อยู่บนรูปมือถือ โดยให้อีกรูปแสดงตามการเคลื่อนไหวของเมาส์(โดยใช้อีเวนท์ jQuery mousemove) เมื่อเมาส์ออกจากรูปจะคำนวนว่าตำแหน่งเมาส์อยู่ที่รูปเกิน 50% หรือไม่ ถ้าเกินให้อีกรูปแสดงแทนเต็มพื้นที่ไปเลย ตามตัวอย่าง โดยวิธีการวางโครงสร้าง HTML และกำหนด CSS คือ รูปหลักเซตเป็น CSS background (คลาส wrap) ใส่ความกว้างและสูงตามรูป ใน div คลาส wrap จะมีอีก div (จะกำหนดขนาดยืดหดที่ div นี้)โดยมีรูปอีกรูปวางอยู่ด้านใน div นี้อีกครั้ง โดย div ที่อยู่ใน .wrap กำหนด overflow:hidden เพื่อให้ซ่อนรูปที่อยู่ใน div นี้ โค๊ดที่ได้จึงเป็นดังนี้ <style> .wrap{ width:600px; height: 286px; background: url(“iphone-w.png”); margin: 70px auto;} .wrap >…

สอน HTML5 CSS3 ทำภาพ perspective โดยหมุนแกน 3d

จุดเด่นของ CSS3 ที่น่าสนใจคือการทำงานแบบ 3D สามารถมาทำภาพให้เป็น Perspective ได้ โดยคุณสมบัติมีหลายอย่างให้เราได้กำหนดค่าเช่น scale, move, rotate,…

จากตัวอย่างนี้จะใช้ CSS3 rotate Y คือการหมุน 3 มิติในแนวแกน Y และจะใช้ jQuery เข้ามาช่วยจับ Event mousemove และคำนวนหาระยะห่างระหว่างวัตถุกับ cursor

ตัวอย่างการหมุน rotate แกน 3d

jQuery lightbox

สอนสร้าง jQuery lightbox แบบไดนามิค content ขึ้นมาใช้เอง

ทำไมต้องสร้าง lightbox ขึ้นมาใช้เอง

ใครเข้ามาอ่านบทความนี้ก็คงแปลกใจว่า มีคนพัฒนา jQuery lightbox อยู่มากมายฟรีๆทำไมไม่ใช้ เสียเวลาเขียนเองให้มันยุ่งยากทำไม

จริงๆแล้วใช่ว่าผมจะหยิ่งไม่ใช้นะครับ ถ้างานเร่งๆก็ใช้ของฟรีครับสะดวกรวดเร็วดี แต่ที่ต้องทำขึ้นมาเองเพราะข้อจำกัดของปลั๊กอินพวกนี้ เช่น ทำให้ไดนามิคคอนเท้นท์โดยเก็บข้อมูลไว้ที่ Javascript, การควบคุมอนิเมชั่นได้ตามใจชอบ

ตัวอย่างใช้ jQuery lightbox ที่ทำขึ้นเอง
download ปลักอิน lightbox

 

สอนใชั lightbox

สอนทำ Rollover effect border image (Border เด้งดึ๋งดั๋ง)

สอน jQuery ทำ Effect ให้รูปภาพเวลาเอาเมาส์เข้าไป Rollover ให้ดูน่าสนใจ เทคนิคนี้นอกจากจะดูดีแล้ว โค๊ดก็ไม่หนักมาก เพราะใช้ CSS ในการเพิ่มเส้นหนาบางเท่าน้นโดยเล่นอนิเมตให้มีจังหวะการเข้าออก ตัวอย่าง jQuery Rollover Effect  HTML โครงสร้างของ HTML ที่สำคัญคือแท็ก a ที่คลุม img และ span ไว้ <a href=”#“><img src=”pic1.jpg” width=”300″ height=”169″ alt=””/><span></span></a> ดูซอสโค๊ด HTML แบบละเอียด  CSS กำหนดสไตล์ /*กำหนด a เป็น relative เพื่อให้เป็นจุดอ้างอิงของ span*/ /*display:block เพื่อให้มีรูปล่างไว้อ้างอิง*/ .thumb > li > a{ position:relative; display:block; } /*span เป็น…

jQuery panorama

สอน jQuery แพนภาพพาโนรามา หลายมิติ

การทำพาโนรามาแบบซ้อนเลเยอร์  เมื่อเลื่อนเมาส์แบคกกราวน์จะเลื่อนตาม ความน่าสนใจคือ แต่ละภาพที่เป็นเลเยอร์จะมีความเร็วในการเคลื่อนไหวไม่เท่ากัน การพิจรณาว่าภาพไหนเลื่อนเร็ว ภาพไหนเรื่อนช้า ก็ให้ลองนึกว่าเรานั่งอยู่บนรถที่กำลังวิ่ง แล้วมองออกไปนอกหน้าต่าง จะสังเกตุเห็นว่าวิวที่อยู่ไกลๆจะเคลื่อนไหวช้า ส่วนที่อยู่ใกล้จะเคลื่อนไหวเร็ว ผลที่ออกมาจึงได้ตามตัวอย่าง  ดูตัวอย่าง จากตัวอย่างจะเห็นว่าวัตถุมี 2 ลักษณะคือ ภาพแบคกราวน์ที่มีลักษณะยาวกว่าขอบเขตหน้าจอ ภาพคน ตัวการ์ตูน ลักษณะไม่เกินแบคกราว เนื่องจากวัตถุทั้งสองแบบมีกลไกการทำงานและสูตรคำนวณที่ต่างกันพอสมควร เราจึงแยกการเขียนเป็น 2 ปลั๊กอิน กำหนด CSS ของทั้งสองแบบ /*กำหนดตัวคลุมทั้งหมด*/ .wrapAll{width:1500px; margin:50px auto; height:500px; position:relative;} /*แบบแบคกราวยาว*/ .pic01Wrap{ width:100%; margin:0 auto; position:absolute; top:0; left:0; overflow:hidden;} .pic02Wrap{ width:100%; margin:0 auto; position:absolute; top:200px; left:0; overflow:hidden;} /*แบบตัวการ์ตูน*/ .cowboy{ position:absolute; top:210px; left:260px;} .horse{ position:absolute;…