 ตอบ: CSS เด็ดๆ (10 ส.ค. 2010, 11:50 น.) |
|
อันนี้ขอจดไว้ใช้หน่อย
จาก
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;
}
จัดกึ่งกลางแนวตั้ง
มีอีกเพียบเลยนะ กดไปดูเอาเองครับ
