Best : 10 เทคนิค CSS ที่ใช้แล้วเว็บดูไฮโซขึ้น โอ้วแม่เจ้า!

ทิป CMS เว็บไซต์
Line

บทความนี้เป็นบทความที่ประดิษฐ์ประดอยมากที่สุดตั้งแต่เขียนมาเลยก็ว่าได้ จุกจิกเยอะมาก แต่ก็อยากทำให้สำเร็จ สาเหตุที่เขียนบทความนี้ขึ้นมา เพราะบ่อยครั้งทำเว็บต้องวิ่งไปคัดลอก 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 ก็ว่าไป รูปแบบจะได้แบบนี้

inputbox

 

ถูกใจกด Like ใช่กด Tweet หรือ +1 Plus ได้ตามสบาย สงสัยตรงไหนโหลด Firebug ไปจิ้มดูกันเอาเองคัฟ …

 

เรื่องที่เกี่ยวข้อง ...

Line

17 thoughts on “Best : 10 เทคนิค CSS ที่ใช้แล้วเว็บดูไฮโซขึ้น โอ้วแม่เจ้า!”

  2. ขอบคุณมากครับ อาการเดียวกับผมเลยต้องไปรื้อโค้ดเก่าๆออกมาใช้ทุกที
    ชอบตรงเทเบิล สลับสีอะครับ แจ่มมาก css บางตัวก็ยังไม่เคยใช้ คงต้องขอเอาไปลองใช้หน่อยนะครับ

  3. ขอบคุณมากค่ะ ได้ทิป css ไปแต่งเว็บกล้วยไม้หนูให้ไฮโซขึ้นแล้วค่ะ ^_______^

Comments are closed.