บทความนี้เป็นบทความที่ประดิษฐ์ประดอยมากที่สุดตั้งแต่เขียนมาเลยก็ว่าได้ จุกจิกเยอะมาก แต่ก็อยากทำให้สำเร็จ สาเหตุที่เขียนบทความนี้ขึ้นมา เพราะบ่อยครั้งทำเว็บต้องวิ่งไปคัดลอก 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; } |
ผลลัพท์ : ดูจากปุ่ม “อ่านเพิ่มเติม” ในเว็บนี้ www.speech.ac.th
6. CSS for tag body ปรับระยะห่างระหว่างบรรทัด วิจัยมาแล้วว่าระยะที่ทำให้บทความน่าอ่านมากที่สุด (ความไฮโซ +8)
โค๊ด :
body, td { line-height:150%; } |
ผลลัพท์ : ลองใช้กันเอาเองนะ
7. 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>
8. 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.
9. CSS Line เส้นคั่นมาดขรึม (ความไฮโซ +8)
โค๊ด :
<hr style="text-align: left; border-bottom-style: solid; color: #cccccc; width: 100%;" />
ผลลัพท์ : ได้แบบนี้
10. 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>
ผลลัพท์ :
11. Text box ดูดีมีระดับ (ความไฮโซ +8)
โค๊ด :
input { padding:5px 3px; border:solid 1px #ccc; margin:10px 5px; background:#eee; }
ผลลัพท์ : อาจจะแยกเป็น input .class ก็ว่าไป รูปแบบจะได้แบบนี้
ถูกใจกด Like ใช่กด Tweet หรือ +1 Plus ได้ตามสบาย สงสัยตรงไหนโหลด Firebug ไปจิ้มดูกันเอาเองคัฟ …