CSS เด็ดๆ

[IM]

ถามอิเบลอาทิตย์ก่อนเองว่าจะจัดกลางแนวตั้งทำไง
ได้คำตอบซะที 

[Bellbells]

ก็เพิ่งได้คำตอบตอนนี้แหละ 

[iannnnn]

ว้าย ตีกินนี่หว่า

[iannnnn]

อันนี้ขอจดไว้ใช้หน่อย
จาก http://www.1stwebdesigner.com/development/useful-css-snippets/
(มีอีกหลายอันน่าสนใจนะ)

โค้ด เลือกทั้งหมด ขยายเนื้อหา

h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}



อันนี้ใช้บ่อย คือเอาไว้แทน h1 ด้วยภาพ ที่เมื่อก่อนเราจะใช้เป็น img เท่านั้น
พอมาอันนี้เลยได้ทั้งความสวยงาม ทั้ง SEO ครับ เป็นสูตรอมตะเลยนะ
ลองใช้กันดูๆ

โค้ด เลือกทั้งหมด ขยายเนื้อหา

/* external links */
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}


ใส่ไอคอนเล็กๆ บอกประเภทไฟล์ในลิงก์
ยังหาโอกาสใช้จริงๆ ไม่ได้สักที

โค้ด เลือกทั้งหมด ขยายเนื้อหา

.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

ปรับความใสของวัตถุ (เช่นพื้นหลังซ้อนๆ กัน)
อันนี้อยากใช้ละ เดี๋ยวหาโอกาสเล่นดีกว่า

โค้ด เลือกทั้งหมด ขยายเนื้อหา

/* IE 6 */
* html .yourclass { }

/* IE 7 */
*+html .yourclass{ }

/* IE 7 and modern browsers */
html>body .yourclass { }

/* Modern browsers (not IE 7) */
html>/**/body .yourclass { }

/* Opera 9.27 and below */
html:first-child .yourclass { }

/* Safari */
html[xmlns*=""] body:last-child .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:nth-of-type(1) .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:first-of-type .yourclass {  }

/* Safari 3+, Chrome 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.yourclass  {  }
}

แฮ็กการแสดงผลแต่ละเบราว์เซอร์ (อันนี้ไม่ผ่าน W3C แต่ชาวโลกทุกคนดูรู้เรื่อง ยอม!)

โค้ด เลือกทั้งหมด ขยายเนื้อหา

#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}

/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

ล็อก Footer ไว้ท้ายหน้า อันนี้ไม่รู้จริงๆ

โค้ด เลือกทั้งหมด ขยายเนื้อหา

.box {
min-height:500px;
height:auto !important;
height:500px;
}

กำหนดความสูงขั้นต่ำใน IE

โค้ด เลือกทั้งหมด ขยายเนื้อหา

.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}

จัดกึ่งกลางแนวตั้ง


มีอีกเพียบเลยนะ กดไปดูเอาเองครับ

[JΛNΣ]

ไม่ไหวจะเคลียร์ 

http://www.thaicss.com/Clear--(fix)-ทำไม-และ-ทำไมต้อง-clearfix/

[iannnnn]

thaicss.com มีจุดยืนอย่างมากเรื่องการ "ไม่" เขียนอะไรให้เกินครับ
ดังนั้นทุกอย่างจึงวางอยู่บนเส้นมาตรฐานเป๊ะๆ

อย่างเรานี่ทำแบบนั้นไม่ได้จริงๆ มันเนี้ยบเกิน

[JΛNΣ]

อยากเนี๊ยบเหมือนกัน แต่แพ้ช่างแม่งทุกที 

[Rabbitinblack]

thaicss.com มีจุดยืนอย่างมากเรื่องการ "ไม่" เขียนอะไรให้เกินครับ
ดังนั้นทุกอย่างจึงวางอยู่บนเส้นมาตรฐานเป๊ะๆ

อย่างเรานี่ทำแบบนั้นไม่ได้จริงๆ มันเนี้ยบเกิน

ลองพยายามดู มันไม่ได้ยากอะไรขนาดนั้น

ยิ่งงานแบบนี้ เวลากลับมาแก้ จะเป็นอะไรที่สบายใจมากมาย

[iannnnn]

ทีนี้ข้อเสียมันก็มีไง เช่นแกจะไม่แคร์ IE6 เลย
มาตรฐาน ต้องมาตรฐานเป๊ะๆ เท่านั้น
(พยายามทำให้ได้แบบนั้นอยู่ แต่ตูแคร์ )

[Rabbitinblack]

ทีนี้ข้อเสียมันก็มีไง เช่นแกจะไม่แคร์ IE6 เลย
มาตรฐาน ต้องมาตรฐานเป๊ะๆ เท่านั้น
(พยายามทำให้ได้แบบนั้นอยู่ แต่ตูแคร์ )

หลัก ๆ ต้องมาตรฐานไว้ก่อน

ส่วน IE6 เราค่อยมา Hack เอาอีกที ซึ่งการ Hack นี่ละที่ไม่มาตรฐาน 

[พราว (ก็พราวแหละ)]

อ่านมานานมากจากหน้าแรกถึงหน้า 34  2.45 ชม. รวดพร้อม reboot หนึ่งครั้ง
เพราะอ่านไปก็ click link ที่อ้างอิงมาเรื่อยๆ จน หมาย่างร้องเอ๋งๆ ว่า
Can't perform this operation ,memory not enough! อะนะคะ กดเพลินไปหน่อย
เข้ามาที่นี่เพราะว่าจะขออนุญาติเอา font จากที่นี่ไป embed ใน site
แต่ clear นิดหน่อยที่พี่แอนบอกที่นี่อนุญาติ

ปกติจะเขียน CSS คุมมันทุก browser เลย เหนื่อยและหงุดหงิดมากมาย
ปัจจุบันจะพยายามไม่ยุ่งกับ CSS ค่ะ ใช้เท่าที่จำเป็น ส่วนมากจะจบที่ jQuery
อะไรที่มันเกี่ยวกับรูปจะใช้ GDI+ อัด ตัด หั่น บั่น ควั่น คว้าน กะทุ้ง ปะกับ ออกมาสะ
และไม่ได้เขียน PHP เขียน ASP.NETค่ะ ปกติจะแยก code กับ design เด็ดขาดอยู่แล้ว
เลยละเลย CSS ไปทุกที เพราะ server-side control เอามาวางแล้วก็ไม่ต้องยุ่งอีก
แต่ยิ่งอ่านก็ยิ่งได้ความรู้เพิ่ม จะติดตามอ่านต่อไปเรื่อยๆค่ะ

ขอบคุณมากค่ะ

อ่อเทคนิคที่จะใช้ embede font จะใช้เจ้าตัวนี้ค่ะ
Portable Font Resources (.pfr) : TrueDoc technology was
developed by Bitstream and licensed by Netscape. It can be
viewed by Navigator 4.0+ and Explorer 4.0+ on Windows, Mac,
and Unix platforms.

แล้วเพิ่ม tag นี้เข้าไป

<LINK rel = "fontdef" src="url/YourFontName.pfr">

แต่ยังไม่ค่อยจะ 100%
จากที่นี่ค่ะ Get Any Font You Want

และก็ CSS Cheat Sheet มี V2 แล้ว Load ได้ที่นี่ค่ะ
CSS Cheat Sheet (V2)
มาเป็น PDF ด้วยดีเลยจะขยายใหญ่ๆ แล้วก้อแปะในห้องน้ำไม่ก็หน้าตู้เย็น ^^ จะได้อ่านทุกวันค่ะ

 

[iannnnn]

ขอบคุณครับ
มีภาษาศัพท์ประหลาดมาปนด้วยเพียบเลย แต่ก็ขอบคุณครับ

[พราว (ก็พราวแหละ)]

อ่านมาตั้ง 30 กว่าหน้า พวกพี่ๆยังใช้กันสะเยอะนี่คะ เลยใช้มั่งค่ะ

[Layiji]

ตอนนี้ถึงยุคที่ embed font ลงเว็บหรือยังครับ 

เพิ่งโหลด ff อันใหม่ไป เลยอยากรู้น่ะครับ

[JΛNΣ]

เป็นผู้นำเลยครับ ไม่ต้องรอเป็นผู้ตาม