บทความนี้เป็นบทความที่ประดิษฐ์ประดอยมากที่สุดตั้งแต่เขียนมาเลยก็ว่าได้ จุกจิกเยอะมาก แต่ก็อยากทำให้สำเร็จ สาเหตุที่เขียนบทความนี้ขึ้นมา เพราะบ่อยครั้งทำเว็บต้องวิ่งไปคัดลอก CSS จากเว็บที่ตนเองเคยทำ CSS ตัวนั้นไว้ หรือเว็บที่สอน CSS แต่เมื่อมาดูกันดี ๆ CSS ที่ใช้กันบ่อย (ใช้มุกเดิมว่างั้น = =” ) เทคนิคพื้น ๆ เหล่านี้ก็มีแค่ไม่กี่ตัว (แต่อาจจะมีเพิ่มขึ้นเรื่อย ๆ ไว้จะเขียนเพิ่มให้นะ) ว่าแล้วก็ปิ้งไอเดียเอามารวมไว้ในเว็บตัวเองดีกว่า จะได้ไม่ต้องหาไกล ใครผ่านไปผ่านมาก็จะได้หยิบไปใช้ ^^ ขาดเสียไม่ได้ ขอขอบคุณเว็บต้นฉบับทั้งหลาย ไม่ว่าจะเป็นรูปภาพ + CSS ที่อยู่ในบทความนี้ จำได้ที่เดียวคือ enjoyday.net ส่วนที่เหลือขออภัยอย่างแรงที่จำที่มาไม่ได้จริง ๆ 
1. CSS tag img ใส่กรอบให้รูปภาพง่าย ๆ (ความไฮโซ +10)
โค๊ด :
style="border: 1px solid #ccc; padding: 5px;"
ผลลัพท์ : เมื่อเพิ่มลงในแท๊ก <img> แล้วจะได้ …
2. CSS tag img ทำ Rollover รูปภาพ เล่นไม่ยาก แต่ได้ประโยชน์ (ความไฮโซ +8)
โค๊ด :
style="opacity:0.5;filter:alpha(opacity=50)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50"
ลองปรับให้อยู่ในรูปแบบ css เรียบร้อยหน่อย รองรับทุกบราวเซอร์ โดยสมมุติประกาศ id=”opa” ใน div หรือ table ก็จะได้
.opa img {
filter:alpha(opacity=50);
opacity:0.5;}
.opa img:hover{
filter:alpha(opacity=100);
opacity:1;}
ผลลัพท์ : เมื่อเพิ่มลงในแท๊ก <img> แล้วจะได้
3. CSS tag table เปลี่ยนโฉมตารางทื่อ ๆ ให้ดูน่าสนใจขึ้นมากมาย (ความไฮโซ +10)
โค๊ด :
#box-table-a{font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;font-size:12px;width:480px;text-align:left;border-collapse:collapse;margin:20px;}
#box-table-a table{align:center;}
#box-table-a th{font-size:13px;font-weight:bold;background:#FCD496;border-top:2px solid #fff;border-bottom:1px solid #fff;color:#000;padding:8px;}
#box-table-a td{background:#FEE4BF;border-bottom:1px solid #fff;color:#666;border-top:1px solid transparent;padding:8px;}
#box-table-a tr:hover td{background:#FF9231;color:#000;}
ผลลัพท์ : เวลาใช้ก็ให้ table เรียกใช้ id=”box-table-a” นะเออ
| Model | Dimension (MM) | Weight (G) | |||||
|---|---|---|---|---|---|---|---|
| A | B | ||||||
| 7W | 91 | 38 | 35 | ||||
| 9W | 93 | 49 | 49 | ||||
| 13W | 106 | 49 | 53 | ||||
หรือ
โค๊ด :
#newspaper-b{font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;font-size:12px;width:480px;
text-align:left;border-collapse:collapse;border:1px solid #69c;margin:20px;}
#newspaper-b th{font-weight:bold;font-size:14px;color:#039;padding:15px 10px 10px;background:#d0dafd;}
#newspaper-b tbody{background:#e8edff;}
#newspaper-b td{color:#669;border-top:1px dashed #fff;padding:10px;}
#newspaper-b tbody tr:hover td{color:#339;background:#d0dafd;}
ผลลัพท์ : เวลาใช้ก็ให้ table เรียกใช้ id=”newspaper-b” นะเออ
| Model | Dimension (MM) | Weight (G) | |||||
|---|---|---|---|---|---|---|---|
| A | B | ||||||
| 7W | 91 | 38 | 35 | ||||
| 9W | 93 | 49 | 49 | ||||
| 13W | 106 | 49 | 53 | ||||
4. CSS tag blockquote เปลี่ยนข้อความ Quote ให้ดูเด่นขึ้น (ความไฮโซ +9)
โค๊ด :
blockquote {
padding: 0 5% 0 10%;
font:1.5em serif;
color: #666;
}
blockquote:before, blockquote:after {
display: block;
font-size: 200%;
color: #ccc;
}
blockquote:before {
content: open-quote;
margin-left: -10%;
height: 0;
}
blockquote:after {
content: close-quote;
margin-left: 100%;
margin-top: -33px;
height: 33px; }
ผลลัพท์ :
ข้อความที่ได้รับการโคท อันอ้อยตาลหวานลิ้นแล้วสิ้นซาก แต่ลมปากหวานหูไม่รู้หาย
5. CSS for Readmore link เปลี่ยนปุ่ม “อ่านต่อ” ให้ดูชัดเจนน่าคลิก (ความไฮโซ +7)
โค๊ด :
a.more-link {
float:right;
font-size: 16px;
padding: 10px 20px;
margin-top:30px;
color: #fff;
font-weight:bold;
text-decoration: none;
background-color:#3C4D93;
display:block;
clear:both;
}
a.more-link:hover {
background-color:#666;
display:block; }
ผลลัพท์ : ดูจากปุ่ม “อ่านเพิ่มเติม” ลองทดสอบกันเอาเอง
6. CSS Fieldset เชื่อว่าหลายคนไม่รู้จัก Fieldset แต่ถ้าเอามาแต่งให้ดีผมให้ (ความไฮโซ +9)
โค๊ด :
legend{
font-size: 16px;
font-weight: bold;
color: #8E58A4;
padding:0px 3px;
}
fieldset{
display:inline;
width:300px;
margin-right:40px;
}
ผลลัพท์ : แท๊กนี้ถือเป็นแท๊กเก่า ไม่ค่อยนิยมแล้ว เวลานำไปใช้ก็แบบนี้
<fieldset><legend>หัวข้อ</legend>ข้อความ</fieldset>
7. CSS info msg กล่องข้อความเตือนสวย ๆ สะดุดตา (ความไฮโซ +9)
โค๊ด :
span.info {
display:block;
margin:15px 0;
padding:10px 10px 10px 65px;
background:url("../images/status-info.png") no-repeat scroll 10px 50% #D8E5F8;
border-bottom:3px solid #629DE3;
border-top:3px solid #629DE3;
color:#0055BB;
}
ผลลัพท์ : เวลานำใช้ก็แบบนี้
<span class="info">ข้อความ<span>
” ตัวอย่างสีนี้ใกล้เคียงกับสีจริงเท่านั้น “
The color patterns shown on this card are approximate only.
8. CSS Line เส้นคั่นมาดขรึม (ความไฮโซ +8)
โค๊ด :
<hr style="text-align: left; border-bottom-style: solid; color: #cccccc; width: 100%;" />
ผลลัพท์ : ได้แบบนี้
9. CSS Button ปุ่มสวย ๆ หวังว่าคงรอคอยกัน (ความไฮโซ +10)
โค๊ด css :
/* REQUIRED BUTTON STYLES: */
button {
position: relative;
border: 0;
padding: 0;
cursor: pointer;
overflow: visible; /* removes extra side padding in IE */
}
button::-moz-focus-inner {
border: none; /* overrides extra padding in Firefox */
}
button span {
position: relative;
display: block;
white-space: nowrap;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Google Chrome only - fix margins */
button span {
margin-top: -1px;
}
}
/* OPTIONAL BUTTON STYLES for applying custom look and feel: */
button.submitBtn {
padding: 0 15px 0 0;
margin-right:5px;
font-size:2em;
text-align: center;
background: transparent url(images/btn_blue_sprite.gif) no-repeat right -140px;
}
button.submitBtn span {
padding: 13px 0 0 15px;
height:37px;
background: transparent url(images/btn_blue_sprite.gif) no-repeat left top;
color:#fff;
}
button.submitBtn:hover, button.submitBtnHover { /* the redundant class is used to apply the hover state with a script */
background-position: right -210px;
}
button.submitBtn:hover span, button.submitBtnHover span {
background-position: 0 -70px;
}
รูปพื้นหลัง : btn_blue_sprite.gif คลิกขวา Save Link as … ได้เลย
วิธีใช้ :
<button class="submitBtn"><span>ปุ่มวิเศษ</span></button>
ผลลัพท์ :
10. Text box ดูดีมีระดับ (ความไฮโซ +8)
โค๊ด :
input {
padding:5px 3px;
border:solid 1px #ccc;
margin:10px 5px;
background:#eee;
}
ผลลัพท์ : อาจจะแยกเป็น input .class ก็ว่าไป รูปแบบจะได้แบบนี้
