Bloggang.com : หมูฟ้าใส : ♡ Code hi5 เกี่ยวกับ เทคนิครูปภาพต่างๆ♡

♡ Code hi5 เกี่ยวกับ เทคนิครูปภาพต่างๆ♡

ชี้รูปแล้วรูปจางแบบเหลี่ยม

a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img { filter: Alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=10, StartY=10, FinishX=0, FinishY=0) }

ชี้รูปแล้วรูปจางแบบวงกลม

a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)}

รูปกลืนไปกับBackGround

a:link img {filter:alpha(opacity=60);} a:visited img {filter:alpha(opacity=60);} a:hover img {filter:none;}

ชี้รูปแล้วรูปกลืนไปกลับแบล็คกราว

a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:alpha(opacity=60);}

รูปภาพขาวดำเมื่อเอาเมาส์ชี้จะปกติ

a:link img {filter:xray();} a:visited img {filter:xray();} a:hover img {filter:none;}

ชี้ภาพแล้วเป็นขาวดำ (สลับกับข้างบน)

a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:gray;}

รูปภาพสลับซ้ายขวา

a:hover img {filter:fliph;}

รูปภาพเบลอๆคับเมื่อเอาเมาส์ชี้จะปกติ

a:link img {filter:blur(add = 0, direction = 225, strength = 10);}a:visited img {filter:blur(add = 0, direction = 225, strength = 10);}a:hover img {filter: none}

ชี้รูปแล้วเบลอ

a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:blur(add = 0, direction = 225, strength = 10);}

รูปจางแบบวงกลม เมาส์ชี้ปกติ

a:link img {filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)}
a:visited img {filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)}
a:hover img {filter:none;}

รูปเป็นแบบเอ็กซเรย์ เม้าส์ชี้เป็นปกติ

a:link img {filter:xray();} a:visited img {filter:xray();} a:hover img {filter:none;}

เม้าส์ชี้แล้วรูปเป็นแบบเอ็กซเรย์

a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:xray();}

ชี้รูปแล้วรูปแข็งเหมือนหิน

a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:progid:dximagetransform.microsoft.emboss;}

รูปแข็งเหมือนหิน เม้าส์ชี้เป็นปกติ

a:link img {filter:progid:dximagetransform.microsoft.emboss;}
a:visited img {filter:progid:dximagetransform.microsoft.emboss;}
a:hover img {filter:none;}

ขยายรูป display Comment

.comment-picture {height:100px !important;
width:100px;}
.comment-picture a img {width:100px; height:100px;}

ย้ายรูปโปรไฟล์มาตรงกลาง

#about-left { position: relative;left: 40%; }

#about-center { position: relative;left: 40%; }

#about-right { position: relative;right:65%; }

ขยายรูปทอปเฟรน + กรอบ

.friend-picture,.friend-picture a img {height:100px;width:70px; border-style: dotted; border:5px;border-color: #FFFFFF;}

รูปเพื่อนติดกัน+ขยาย

.friend-picture{height:100px !important;width:100px!important;
margin-left:0px;border: none 0px; }
.friend-picture img {height:100px !important;width:100px!important;margin-left: 7px}

เอฟเฟ็กชี้ลิ๊งต่างๆ

ชี้ลั้งค์อักษรใหญ่ขึ้น

A:hover { font-variant: small-caps; font-size:16px; font-weight:bold; color:#โค้ดสีของตัวหนังสือที่ใหญ่ขึ้น;}

ชี้ลิ้งค์แล้วไฮไลท์

a:hover{background:#โค้ดสีของส่วนไฮไลท์;}

ชี้ลิ้งค์มีกรอบ

A:hover {border:1px ชนิดของกรอป #โค้ดสีของกรอป;}

ชนิดของกรอบ

solid=เส้นเดี่ยว
double=เส้นคู่
dotted=แบบจุด
dashed=เส้นประ

ชี้ลิ้งค์เรืองแสง

a:hover{filter:Glow(color=#โค้ดสีของตัวเรืองแสง,strength=4);height:0px;}

ชี้ลิ้งค์แล้วขึ้นเงาเป็นตัวหนังสือ

a:hover{filter:DropShadow(color=#โค้ดสีของเงา,strength=4);height:0px;}

ชี้ลิ้งค์มีเงา

a:hover {filter:Shadow(color=#โค้ดสีของเงา,strength=4);height:0px;}

ชี้ลิ้งค์แล้วเบลอ

a:hover{filter:blur(add="1",direction="360",strength="4"); height:0;}

ชี้ลิ้งค์แล้วเป็นสีรุ้ง

a:hover {
color:#FFFFFF !important;
text-decoration: none;
background: url(//img99.imageshack.us/img99/3043/ranpy5.gif) !important;}

ชี้ลิ้งค์แล้วเป็นรูป

a:hover {
color:#โค้ดสีตัวหนังสือ !important;
text-decoration: none;
background: url( urlของรูป ) !important;}

Create Date : 31 สิงหาคม 2551

Last Update : 14 ธันวาคม 2551 18:07:47 น.

19 comments

Counter : 945 Pageviews.

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

โดย: nice999 IP: 118.173.8.3 วันที่: 31 สิงหาคม 2551 เวลา:10:48:25 น.

ขอบคุณค่า

โดย: นา IP: 118.173.175.14 วันที่: 31 สิงหาคม 2551 เวลา:17:35:25 น.

ว้าว! เข้ามาเจอสีชมพูหวานแหว๋ว Blog น่ารักม้ากกกกมายค่า ขอบคุณที่แวะไปให้กำลังใจน่ะค่ะ

ขอบคุณที่แบ่งปันความรู้ด้วยน่ะค่ะ :)

โดย: tawangel

วันที่: 31 สิงหาคม 2551 เวลา:20:14:55 น.

น่ารักเเละสวยมากเลยค่ะ

เอามาให้ใช้อีกเยอะๆนะคะ

ขอบคุณค่ะ

โดย: แสงจันทร์ IP: 117.47.123.44 วันที่: 3 กันยายน 2551 เวลา:18:21:34 น.

เยี่ยมที่สุดเลยค่ะ ขอยืมเลยนะคะ

โดย: แฮมซาลามี่

วันที่: 8 กันยายน 2551 เวลา:6:14:46 น.

อยากได้อ่ะแต่ทามมะเปน

โดย: นู๋เน IP: 58.10.192.231 วันที่: 9 กันยายน 2551 เวลา:3:37:23 น.

ดีค่ะ

เด็กใหม่หัดเล่นนะค่ะ

คืออยากทราบว่า

โค้ดใส่ตรงไหนค่ะ

แฮะๆๆ

โดย: ข้าวปั้น IP: 117.47.200.105 วันที่: 10 กันยายน 2551 เวลา:17:17:58 น.

สวยมากเลยคะ ทามออกมาละสวยมากๆๆเลย

โดย: ปิมจร้า IP: 124.121.26.236 วันที่: 16 กันยายน 2551 เวลา:22:29:49 น.

;' สวยเนอะ ,,

โดย: cat a girls IP: 202.149.25.197 วันที่: 18 กันยายน 2551 เวลา:21:17:04 น.

ขอบคุณคร่า......

โดย: มิ้งค์ IP: 125.25.122.103 วันที่: 21 กันยายน 2551 เวลา:14:49:31 น.

น้องจ๋า พี่อยากได้กล่องคอมเม้นท์แบบน้องจ๋าบ้างจังเลย รบกวนขอโค้ดมั่งได้มั๊ยคะ

โดย: ซูเนกะ

วันที่: 24 กันยายน 2551 เวลา:16:03:33 น.

ขอบคุณนะจ๊ะสำหรับโค้ด

แหะ แหะ อายจัง จะบอกว่าพี่ขอโค้ดผิดน่ะจ้ะนู๋จ๋า

จริงๆที่พี่อยากได้มันคือกรอบเหมือนข้างบนที่โชว์คอมเม้นท์ของคนที่มาเม้นท์น่ะจ้ะ เรียกไม่ถูกน่ะ