Archive for January, 2008

งานอดิเรก จัดตู้ปลาครับ

หายไปนานเลยครับ web master ไม่ค่อยจะมา talk กัน เพราะ ทำแต่งานครับ หนังไม่ได้ดู ไม่ได้เที่ยวไหน เลยไม่รู้จะคุยอะไร และก็ไม่ค่อยได้เข้ามาอัพเดทเว็บเลย 2-3 เดือนมาแล้ว วันนี้ได้ฤกษ์ ก็มาแจ้งข่าวสารกันซักหน่อย ว่ายังอยู่ดีนะครับ ไม่ได้ตีจากกันไปไหน ก็ยังมีเรื่องให้ เขียนอีกมากมายเลย อยู่ที่ว่า จะมีอารมณ์เค้น สิ่งที่อยู่ในหัว ออกมาแค่ไหน ใครอยากรู้เรื่องอะไร หรือ มีเรื่องที่เขียนเอง ที่เกี่ยวกับการทำเว็บไม่ว่าจะเป็น ข่าวสาร หรือ บทความ ก็ ติดต่อมาที่ cssmarter@divland.com ได้เลยนะครับ ถ้าเห็นว่ามีประโยชน์ ก็จะโพสต์ ขึ้นทันที ;)

ช่วงนี้กำลังบ้า ตู้ปลาอย่างหนักครับ ไปเดินสวนจตุจักร มันทั้ง เสาร์-อาทิตย์ ดูแต่ปลา ตู้ปลา จริงๆแล้ว ก็มีตู้แค่เล็กนิดเดียว ไม่รู้จะแต่งอะไรนักหนา นั่งดูมันก็เพลินดีครับ สวยดี เพราะเราจัดเอง :P พึ่งเริ่มเลี้ยงได้ประมาณ 1 เดือนแล้ว ต่อไปก็คงพัฒนา ความบ้า ขึ้นไปอีก ต่อไปก็คงบ้าตู้ไม้น้ำ เหอๆ เอาเป็นว่า ลองดูตู้ผมก่อนละกัน ใช้ต้นไม้ปลอม และไม้จริง 2 ท่อน มี ปลาเลมอนเผือก ปลาเทวดาจิ๋ว ปลากรีนนีออน กุ้งเชอรี่ กุ้งยามาโตะ yellow puffer หรือ ปักเป้า ขนาดเล็กๆ อะ แต่จะย้ายออกแล้ว เพราะพี่แกดัน ไล่งับ หางปลาตัวอื่นซะแหว่งหมดเลย เหอๆเ็ต็มไปหมด ตู้เล็กนิดเดียวเอง :|

ถ่ายด้วย มือถือ N82 ครับ จริิงๆขนาดใหญ่ แต่อัพขึ้นแล้วเค้า ลดความละเอียดลงเลยชัดได้แค่นี้ เชิญชมเลยครับ
Read more…

Related Articles

Share
Categories: webmaster talks
Tags:

ทำกล่องขอบโค้งด้วย css

เรามาทำกล่องขอบโค้ง โดยใช้รูป มุมมน และเขียนแบบพื้นฐาน ด้วย html แบบ standards กัน ผมขอเสนอ วิธีที่เคยใช้ง่ายๆ 3 แบบด้วยกัน ลองนำไปใช้ ตามโอกาส

แบบที่ 1 ตัดรูป ขอบด้านบนและล่างมาแบบนี้

curve_top.gif = curve_top.gif

curve_bottom.gif = curve_bottom.gif

เขียน html ดังนี้

<div class=”curvetop”></div>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
<div class=”curvebottom”></div>

เขียน css ดังนี้
<style type=”text/css”>
.curvetop {background:url(curve_top.gif) no-repeat; height:9px; font-size:1px}

.curvebottom {background:url(curve_bottom.gif) no-repeat; height:9px; font-size:1px}

ul {background:#8ACA80; margin:0; padding:0 10px 0 10px; list-style:none; width:157px}

li {border-bottom:1px #FFFFFF dashed}
</style>

ได้ผลดังนี้

curvebox1.gif

ไม่มีอะไรมาก ก็ใส่รูปที่ .curvetop และ .curvebottom แล้วก็ใส่สี ที่ ul ใส่ เส้นประที่ li ส่วนที่ว่าทำไมต้องใส่ font-size:1px อ่านอันนี้ประกอบ การจัดการกับความสูง และ อ่าน อันนี้ด้วยก็ได้ ถ้ายังไม่เข้าใจ ul li เรียนรู้การใช้ ul li step by step
Read more…

Related Articles

แนะนำ firefox extension เจ๋งๆ

วันนี้เราก็มี tool ที่ใช้แล้วรู้สึกเวิร์ค จะมาแนะนำกัน เป็น firefox extension ใช้สำหรับ Browser firefox นั่นเอง ตัวแรกเป็น

View source chart

เมื่อเราลง addon ตัวนี้แล้ว เราจะสามารถคลิกขวาที่หน้าเว็บ แล้วเลือกคำว่า view source chart เราก็จะสามารถ ดูซอร์ส โค้ด ของหน้าเว็บ ได้อย่าง advance มากขึ้น โดยจะมีการแบ่ง เป็น สี และ ครอบ object แต่ละก้อนให้เราดูอย่างชัดเจน

ตัวอย่าง

view source chart

ดาวน์โหลด ตัว addon นี้ ได้ที่นี่ View source chart

Fire shot

เป็นตัวที่ สำหรับ capture หน้าเว็บ เหมาะกับคนที่ทำงาน ควบคุมการ ทำหน้าเว็บให้เป็นไปตามดีไซน์ เมื่อมีการผิดพลาด เราก็จะ capture หน้าเว็บ แล้วทำเครื่องหมาย วง หรือ ลุกศร ชี้ไป และพิมพ์ข้อความส่งกลับไปบอกคนทำ html ? addon ตัวนี้ จะทำให้งานตรงนี้ง่ายขึ้นมาก
เพราะจะมี เครื่องมือให้เราวงล้อมกรอบส่วนที่ต้องการจะใส่คอมเม้น พร้อมหมายเลข 1, 2 ,3 เพื่อบอกจำนวนตำแหน่ง และให้เราใส่คอมเม้น ได้ ในคลิก เดียว หรือจะ เปลี่ยนจากการล้อมรอบ เป็นลูกศรชี้ก็มีให้เลือก

ตัวอย่าง

fire shot

แต่ว่าตัวนี้ จะต้องใช้กับ firefox เวอชั่น 2.0 เป็นต้นไป นะครับ ดาวน์โหลด ได้ที่นี่ fire shot?

ผมเคยแนะนำตัว Addon ไปหลายตัวเหมือนกันทั้ง web developer tool bar,? firebug เพื่อนๆ มี addon ตัวไหน ที่ใช้อยู่ ใช้แล้วดี ใช้แล้วมันส์ ก้แนะนำกันมาได้ในคอมเม้น เลยนะครับ บรรยายสักหน่อย ใส่ลิ้งค์มาเลย

Related Articles