CSS Property 5 ตัวที่ถูกลืม
วันนี้ผมจะมานำเสนอเกี่ยวกับ property ของ css ที่หลาย ๆ คนอาจจะงงว่า “css มันมีคำสั่งแบบนี้ด้วยเหรอ ?” property ทั้ง 5 ตัวที่ผมจะมานำเสนอวันนี้ก็คือ clip, min-height, white-space, cursor และ display ซึ่งหลาย ๆ คนมองข้ามเจ้าพวกนี้ไป ทั้ง ๆ ที่มันมีประโยชน์ในการใช้งานอยู่มากโขทีเดียว
1. CSS Property : Clip (คลิกเพื่อดูตัวอย่าง)
การใช้งาน clip นั้นจะทำให้เหมือนกับมีหน้ากากมาครอบพื้นที่อยู่ (นึกภาพง่าย ๆ ก็เหมือนกับการใช้คำสั่ง crop ใน photoshop)
โดยการที่เราจะสร้างหน้ากากขึ้นมาครอบนั้น เราจะต้องระบุค่าระยะห่างของด้านทั้ง 4 ก่อน(บน ขวา ล่าง ซ้าย)
ตัวอย่างแรก
ในตัวอย่างนี้เราจะสร้างหน้ากากให้กับรูปภาพโดยใช้คำสั่ง clip อันดับแรกเราต้องกำหนด position: relative ใน <div> เพื่อทำเป็นหน้ากากไว้สำหรับครอบ จากนั้นใส่ position: absolute ในรูปภาพและกำหนดค่าระยะห่างทั้ง 4 ด้าน ดังรูป
css ที่นำมาใช้ของตัวอย่างนี้
.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}
ตัวอย่างการนำไปใช้งาน : thumbnail
ปกติแล้ว thumbnail ทั่ว ๆ ไปเราจะลดขนาดจากรูปเดิมลงมาทำให้บางทีรูปที่ได้อาจจะไม่สวย ทางออกอีกทางหนึ่งในการทำ thumbnail คือการใช้คำสั่ง clip นั่นเอง เพราะเป็นการ crop รูปให้เล็กลงเหลือเฉพาะบริเวณที่ต้องการ โดยตัวอย่างนี้นั้นจะใช้รูปซึ่งมีขนาด 200×140 px นำมาลดขนาดให้เหลือ 50%(100×70 px) จากนั้นใช้คำสั่ง clip เพื่อ crop ด้านซ้ายและขวาออกด้านละ 15px ก็จะได้ thumbnail ขนาด 70×70 px พอดี
.gallery li {
float: left;
margin: 0 10px 0 0;
position: relative;
width: 70px;
height: 70px;
border: solid 1px #000;
}
.gallery img {
width: 100px;
height: 70px;
position: absolute;
clip: rect(0 85px 70px 15px);
left: -15px;
}
2. CSS Property : Min-height (คลิกเพื่อดูตัวอย่าง)
property min-height นั้นเราจะใช้สำหรับกำหนดความสูงขั้นต่ำของ element จะมีประโยชน์มากสำหรับบางกรณีที่เนื้อหาในหน้าเว็บเรา้น้อยทำให้แลดูไม่สวยงาม หรือกรณีที่เราต้องการกำหนดความสูงของ layout ให้สมดุลและเหมาะสมกับหน้าเว็บ
.with_minheight {
min-height: 300px;
}
Min-height hack for IE6
เนื่องจากคุณปู่ IE6 ของเรานั้นไม่รู้จักคำสั่ง min-height เพราะฉะนั้นเราจึงจำเป็นต้อง hack ซะก่อน ด้วยวิธีนี้ครับ
.with_minheight {
min-height: 300px;
height: auto !important;
height: 300px;
}
3. CSS Property : White-space (คลิกเพื่อดูตัวอย่าง)
White-space นั้นจะใช้สำหรับจัดการข้อความที่ต้องการขึ้นบรรทัดใหม่ จะใช้ในกรณีที่ข้อความอยู่คนละบรรทัดกัน ตัวอย่างในรูปด้านล่างจะเห็นว่า ข้อความของเราที่เราใช้คำสั่ง em เพื่อทำให้ตัวอักษรเอียงนั้น ถูกแบ่งให้อยู่คนละบรรทัดกัน เพราะฉะนั้นหากเราต้องการให้อยู่บรรทัดเดียวกันจะต้องใช้คำสั่ง white-space: nowrap
em {
white-space: nowrap;
}
4. CSS Property : Cursor (คลิกเพื่อดูตัวอย่าง)
บางคนอาจจะยังไม่รู้ว่า cursor นั้นสามารถเปลี่ยนรูปได้ด้วย ซึ่งรูปแบบ cursor โดยทั่วไปก็จะเป็นรูปลูกศร(arrow) หากเอาเม้าส์ไปชี้ที่ลิ้งค์ก็จะเปลี่ยนเป็นรูปนิ้วชี้(pointer) และถ้ากำลังรอการดาว์นโหลดอะไรซักอย่างอยู่ก็จะเปลี่ยนเป็นรูปนาฬิกาทราย(wait) ซึ่งการแสดงผลของ cursor ในลักษณะต่าง ๆ เหล่านี้สามารถเปลี่ยนแปลงได้ โดยที่เรากำหนดการแสดงผลให้กับมันว่าต้องการให้แสดงผลออกมาในรูปแบบไหน
.clickable:hover {
cursor: pointer;
}
.disabled {
cursor: default;
}
.busy {
cursor: wait;
}
5. CSS Property : Display inline / block (คลิกเพื่อดูตัวอย่าง)
property display นั้นก็จะเหมือน ๆ กับ cursor ตรงที่เราสามารถปรับเปลี่ยนรูปแบบการแสดงผลให้ต่างออกไปจากเดิมได้ โดยธรรมชาติแล้ว block element จะมีการขึ้นบรรทัดใหม่ทันที เช่น <div>, <h1> และ <p> ส่วน inline element นั้นหากมีการใช้งานก็จะยังคงอยู่ในบรรทัดเดิม เช่น <em>, <span> และ <strong> แต่ถ้าหากเราต้องการเปลี่ยนการแสดงผลเป็นแบบอื่น ๆ ก็สามารถเปลี่ยนได้โดยกำหนดเอาว่าต้องการ display: inline หรือ display: block
.block em {
display: block;
}
.inline h4, .inline p {
display: inline;
}
อ้างอิงข้อมูลและรูปภาพจาก :
http://www.webdesignerwall.com/tutorials/5-simple-but-useful-css-properties/
http://www.ibloomstudios.com/articles/misunderstood_css_clip/