Archives for "September, 2009"
min-height
min-height ใช้กำหนดความสูงขั้นต่ำของกล่อง ถ้าในกล่องมีข้อความสูงเกิน min-height ที่กำหนดไว้กล่องนั้นก็จะถูกยืดออก แต่ถ้าเราใช้ height ในการกำหนดกล่องนั้นแทน ข้อความถ้าสูงเกิน height ที่กำหนดไว้ ข้อความก็จะไหลลงมา แต่ตัวกล่องจะเท่าเดิม ตัวอย่างเช่น ตัวอย่างนี้ กล่องซ้ายกำหนดความสูงของกล่องด้วย min-height: 100px ส่วนด้านขวากำหนดด้วย height: 100px; ** ถ้าข้อความที่เราใส่ไปในกล่องไม่สูงเกินที่เรากำหนดไว้ จะเห็นได้ว่าไม่มีความแตกต่างใดๆ แต่ถ้าข้อความสูงเกินกล่องที่เรากำหนดไว้ล่ะ? ก็จะเป็นแบบนี้ **min-height มีความยืดหยุ่นดีกว่า แต่ min-height ไม่ supportกับ ie ถ้าจะนำไปใช้ต้องมีทริกนึดนึง คือ selector { min-height:100px; height:auto !important; height:100px; } อ่านฉลากก่อนใช้ ต้องกำหนด min-height ให้เท่ากับ height เวลาใช้ต้องเรียงลำดับตามนี้ ถ้าสลับกันไม่ได้ผลนะเออ.. Share
ทำ Background โปร่งใส
ไฟล์ .gif, .png มีคุณสมบัติ ที่สามารถทำ background หรือพื้นหลังให้โปร่งใสได้ .gif นั้นเวลานำไปใช้ถ้าอยากจะให้เนียนกลืนกันพื้นหลังตอน save นั้นกำหนดสี matte ให้มันด้วย ข้อดีอย่างของ gif คือ ie6 ก็ใช้ได้ คือ เห็นว่ามันโปร่งใส แต่ถ้าเป็น png คุณ ie6 มันแสดงผลไม่ได้ จะกลายเป็นพื้นหลังสีขาวไป png เอง ตอน save ก็มีให้เลือกว่าเป็น png8 หรือ png24 ถ้าเป็น png8 นั้นมันจะคล้ายๆ gif คือ เวลานำไปใช้ต้องกำหนด matte ให้มันด้วยไม่งั้นมันไม่เนียน การกำหนด matte ก็คือ เราต้องรู้ก่อนว่ารูปนั้นเราจะนำไปใช้กับ background สีอะไร ถ้าใช้กับ background สีขาวก็เลือก matte เป็นสีขาว ส่วน png24 [...]
ทำเนื้อหาแบบ scroll โดยใช้ css
ไม่ยักกะรู้เหมือนกันว่า css ก็ทำได้ เคยเข้าใจมาว่ามันต้องเขียน script พวก java เทือกๆนั้น คำสั่งในการใช้ก็ overflow นั่นเอง overflow เป็นคำสั่งหนึ่งที่ใช้บ่อยนะ แต่ส่วนใหญ่เราใช้ overflow:hidden overflow จะนำมาใช้ซ่อนเนื้อหาที่มันยาวเกินที่เราต้องการ เนื้อหาจะแสดงอยู่ในพื้นที่ width, height ที่เรากำหนดไว้ มาดูตัวอย่างกันดีกว่า 1. overflow:hidden ส่วนที่เกิน width, height ไปจะถูกซ่อนไว้ Share
การใช้ table บน css
การใช้ table บน css ไม่ใช่เรื่องที่ผิด แต่เราควรจะนำมาใช้ให้มันเเหมาะสม ที่ชาว css หลีกหนีจาก table มาใช้ div กันแทน เพราะเว็บไซต์ที่ดี นอกจากหน้าตาภายนอกจะสวยงามแล้ว ภายในพวกโค้ดต่างๆ ก็ควรถูกหลักด้วยเช่นกัน ถ้าถามว่าถูกยังไง ง่ายๆ ลองไปดูเว็บที่ใช้ css เขียน แล้วลองเอาไฟล์ css ออก จะเห็นว่าข้อมูลจะเรียงเป็นระเบียบ อ่านแล้วเข้าใจได้ง่าย ส่วน table ถ้าเอาดีไซน์ออก ก็อาจจะอ่านรู้เรื่อง แต่ข้อมูลไม่เป็นระเบียบ อ่านยากกว่า ข้อมูลแบบไหนที่เหมาะกับการใช้ table? ข้อมูลที่มันเป็นตาราง เช่น ข้อมูลของนักเรียน ที่ต้องใส่ ชื่อ-นามสกุล ส่วนสูง น้ำหนัก ถ้าข้อมูลมันเป็นตาราง ก็ใช้ table ไปเถอะ ถึงจะไม่ชอบก็ยอมขัดใจตัวเองหน่อย รูปแบบของ table <table> <thead> <tr> <th scope=”col”>หัวข้อ(1)</th> <th [...]
White Space
คราวที่แล้วพูดถึง Negative space กันไปแล้ว อันที่จริงแล้ว White space มันก็คือ Negative space นั่นแหละ แต่งานสิ่งพิมพ์ หรือบนเว็บไซต์จะนิยมเรียก white space มากกว่า White space กับ Content white space บนเว็บไซต์นั้น ก็คือ พื้นที่ว่าง ทั้งพื้นที่ว่างระหว่างบรรทัด พื้นที่ว่างระหว่างตัวอักษร พื้นที่ว่างระหว่างรูปกับตัวอักษร ซึ่งก็สามารถจัดได้ด้วย css เช่น line-height, word-spacing, padding, margin ตัวอย่างข้อความที่ไม่มี white space หลังจากเพิ่ม white space การเพิ่ม white space ใหักับ content ในเว็บไซต์เรานั้นจะทำให้ดูสบายตาอ่านง่ายกว่า ยิ่งถ้า content เยอะๆ ตัวหนังสือติดยาวๆกันเป็นพรืด แค่เห็นแวบแรกก็รู้สึกว่ามันเยอะ ไม่อยากอ่านแล้ว ควรมีพื้นที่ให้พักสายตาบ้าง Share
Negative space
ได้อ่าน twitter ของ @_pingtwo แล้วตาม link ที่พี่ปิงทิ้งไว้ เลยไปเจองาน Negative Space design รู้สึกว่ามันน่าสนใจดี ก่อนหน้านี้เคยเจอแต่ภาพขาวดำที่อาจารย์เอาตัวอย่างมาสอนในห้องเรียน ไม่ก็เจอใน forward mail เราเองไม่ค่อยได้เห็นงานออกแบบกราฟิกแนวนี้เท่าไร พอได้เห็นเลยตื่นตาตื่นใจ ตัวอย่างภาพ Negative space ที่เจอกันบ่อยๆ คงเป็นแจกัน ที่เมื่อมองอีกมุมหนึ่งก็สามารถดูเป็นหน้าคนได้ ส่วนของแจกัน นั้นเรียกว่า Positive space ส่วนหน้าคนเรียกว่า Negative space หรือถ้าเป็นหน้าหนังสือ Positive space ก็คือ รูปภาพ ตัวหนังสือ ส่วน Negative space ก็คือส่วนพื้นที่สีขาวที่อยู่รอบๆนั่นเอง Share
Justify or Left Align
ค่าที่เราใช้บ่่อยๆของ text-align มี center, left, right ถ้าพูดว่า justify อาจมีคนงง ว่ามันคืออะไร justify มันก็เป็นการจัดหน้ากระดาษอย่างหนึ่ง ที่จัดให้ท้ายข้อความตรงกันหมด การท้ายตรงกันหมดก็ดูเรียบร้อยดี แต่มันก็ไม่ได้ทำให้สวยเสมอไป เพราะถ้ามีพื้นที่กว้าง ช่องว่างของคำอาจจะห่างกันเกิน ก็ทำให้ไม่สวยได้เหมือนกัน Justify เหมาะกับข้อความที่เป็นลักษณะคอลัมน์แคบๆตัวอย่างที่เห็นบ่อยๆ ก็คอลัมน์ในหนังสือพิมพ์ ถ้าคอลัมน์กว้างๆ มีพื้นที่ค่อนข้างเยอะ ใช้ Align Left จะดีกว่า **ถ้าใช้ Justify แล้วมันมีช่องว่างระหว่างคำเยอะ ใช้ word spacing ช่วยก็ได้ แต่อย่าใช้มากเกินไปล่ะ มีเว็บมาแนะนำ http://www.typetester.org/ มันคือเว็บที่สามารถทดลองหลายๆอย่างเกี่ยวกับ ตัวหนังสือ มีให้เปรียบเทียบกันด้วยอันไหนดีกว่า สวยกว่าจะได้เห็นกันจะจะ แน่นอนว่าต้องมี text align ให้ลองเช่นกัน ลองเอาไปลองใช้กันดู เจ๋งดีๆ Share
vertical align
ครั้งกระนู้นเคยยกตัวอย่างการแก้ปัญหา vertical align ด้วย line-height ซึ่งจุดประสงค์ของ line-height เองนั้นไม่ใช่การจัด vertical align แต่เรานำมามาพลิกแพลง css เองก็มีคำสั่ง vertical align ของมันเอง ก็คือ vertical-align ถ้าเปรียบเทียบกับคราวที่แล้ว ถ้าเราต้องการให้ข้อความอยู่ตรงกลางรูป เราจะกำหนด line-height ให้เท่ากับความสูงของรูปนั้นๆ ซึ่งข้อเสียของมันคือ ใช้ได้กับข้อความที่สั้น มีความยาวได้แค่บรรทัดเดียว เพราะ line-height คือ การกำหนดระยะห่างระหว่างบรรทัด แต่ถ้าใช้ vertical-align:middle ผลที่ได้จะออกมาเหมือนกันแต่อาจเขียนต่างกันเล็กน้อย ข้อดีอีกอย่าง คือ ข้อความสามารถยาวเท่าไรก็ได้ นอกจาก middle แล้วยังมี value อื่นๆ อีกเช่น baseline, top, bottom , super , sub Share
เรื่อง Font Font
วันนี้ปล่อยไก่ไปหลายตัว ตัวที่ใหญ่มากๆ คงเป็นเรื่อง font นี่ล่ะ เรื่องมันมีอยู่ว่าลูกค้าให้ requirement มาว่าอยากเปลี่ยน font เป็น Arial เราก็เอ๊ะ… ปกติเค้าใช้กันป่าววะ เพราะเราไม่ค่อยได้ใช้ Arial ก็คิดอยู่ในใจว่ามันเป็น font มาตรฐานของ windows ก็น่าจะมีคนใช้ล่ะ แต่มันเป็น font ที่ปกติเค้านำมาใช้ในเว็บกันรึเปล่า เลยหาข้อมูลดู ได้ผลออกมาว่า Arial เป็น 1 ใน 5 font ยอดนิยมที่ใช้ในเว็บ (อ้างจาก : http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtml) font ที่เหมาะกับการอ่านในเว็บที่มีตัวหนังสือเยอะๆ มีเนื้อหาจำนวนมาก อย่างเช่น เนื้อหาข่าว เนื้อหาบล็อก ควรจะเป็น font ที่ไม่มีหางที่เรียกกันว่า sans-serif ส่วน font ที่มีหาง หรือ serif นั้นเหมาะใช้ในงานพิมพ์มากกว่า เพราะถ้านำ serif มาใช้ในเว็บ พวกหางตัวอักษรเมื่อเราดูในจอคอมพิวเตอร์มันจะมีขนาดที่ค่อนข้างเล็ก [...]
Made by Symmetric Web
Distributed by Smashing Magazine