• ใช้ไฟร์ฟอกซ์กันเถอะ
  • คำแนะนำ24ข้อที่บล็อกเกอร์ควรรู้

ในเอนทรี่นี้ ผมจะสอนเทคนิคง่ายๆในการทำกรอบรูป ซึ่งการทำกรอบรูปนั้น มันจะช่วยให้รูปภาพที่เราใช้ประกอบเอนทรี่ดู มีมิติ และดูหรูขึ้นด้วย แต่ที่ผมจะสอนคงจะไม่สอนให้ไปขยาย Canvas แล้วใส่ Effect Stroke ใน Photoshop อะไรนั่นหรอกครับ วิธีนี้ทำได้โดยที่ไม่จำเป็นต้องไปแต่งในโปรแกรมแต่งรูปใดๆเลย เพียงแต่เพิ่มโค้ดลงไปใน css editor ก็เรียบร้อย ที่สำคัญมันง่ายมากๆ เข้าใจไม่ยากด้วยสิ

 

ภาพต้นฉบับ

นี่เป็นภาพตัวอย่างก่อนที่จะใส่กรอบ หรือ เฟรมก็ตามแต่

ทำความเข้าใจกับโค้ด css รูปแบบทั่วไปกันก่อนนะครับจะเป็นลักษณะนี้

 

img{
        padding:4px;
        border:4px solid #aaa

 

 

จากโค้ดข้างบนก็มาดูรูปประกอบการอธิบายโค้ด

รูปอธิบายโค้ดcss

อธิบายจากรูปข้างต้นได้ว่า ค่า padding คือค่าดันออกจากขอบรูปไปด้านละ 4พิกเซล แล้วจึงจะตีกรอบด้วย border ขนาด 4พิกเซลทั้งสี่ด้านด้วยสีรหัส #aaa หรือ #aaaaaa นั่นเอง 

ตัวอย่างของรูปที่ใส่กรอบด้วย css ตามค่าข้างต้น หน้าตาแบบนี้

ตัวอย่างรูปที่ใส่กรอบแล้ว

ส่วน css ที่ใช้กับธีม exteen เวอร์ชั่น4 คือ

 

.entry .post img{
        padding:4px;
        border:4px solid #aaa

และเวอร์ชั่นเก่า 

.entrycontent img{
        padding:4px;
        border:4px solid #aaa
}

ในส่วนของ border เราสามารถปรับค่าสี หรือ แต่งย่อยเป็น border-top, border-right, border-bottom, border-left ได้ ตามความคิดสร้างสรรค์ เช่น

ใส่ขอบไม่เท่ากันทั้งสี่ด้าน          ใส่ขอบไม่เท่ากันทั้งสี่ด้าน

ผมใส่สีใส่ขอบให้แต่ละด้านดูไม่เท่ากัน ก็จะได้หน้าตาที่เปลี่ยนไป นอกจากนี้นะครับ ยังใส่ลูกเล่นขณะที่เลื่อนเมาส์ผ่านรูปได้ด้วยนะ ประมาณนี้

.entry .post img:hover{
        padding:4px;
        border:4px solid #333

อันนี้จะได้อะไรก็ลองไปเล่นดูครับ

ที่สำคัญครับ ทันที่เราเพิ่มโค้ดนี้ลงไป บรรดารูปภาพเก่าๆในเอนทรี่ก่อนหน้าก็จะมีกรอบด้วย! โดยที่ไม่ต้องไปตามแก้ทุกรูป (แท็ก html ต้องถูกด้วยนะครับ)

Comment

Comment:

Tweet

embarrassed wink cry  กกกกกกไไไฟฟฟฟฟฟฟฟฟฟฟquestion tongue

#53 By (183.88.53.67|172.0.0.146, 183.88.53.67) on 2015-09-01 23:31

thank you สำหรับสาระดีๆ

#52 By tity (180.183.172.203|180.183.172.203) on 2014-12-01 13:46

embarrassed

#51 By (202.29.32.159|202.29.32.159) on 2014-06-28 15:42

ขอบคุณมากๆ นะคะ

#50 By GookGaii on 2010-11-11 23:00

#49 By jjeeaabb on 2010-05-13 12:48

Hot! Hot!

#48 By Like I Do on 2010-04-22 14:31

ขอบคุณมากๆเลยนะคะ ^[]^ อุตส่าห์ช่วยสอน T T

(ผ้าห่มลายเดียวกันเลยอ่ะ 55555555+)
ขอบคุณมากน่ะคร๊าฟ

ช่วยผมหลุดลอดมาได้

#46 By PangZZ on 2010-01-26 14:19

#45 By ann (118.173.6.127) on 2009-05-22 22:56

ขอบคุณนะคะ

พึ่งหาเจอbig smile

#44 By ::housewife:: on 2008-12-17 05:32

น้องแมวน่ารักอ่ะค่ะ

น่ากินเนอะ

ล้อเล่นนนนนนนนนนนcry

#42 By tomoo~kawaii on 2008-09-23 20:47

เทคนิคดีๆ อีกแล้ว big smile

#41 By ทิว แอด ไฟน์ on 2008-09-22 22:14

สวยดีนะตัวเอง
มาบอกว่าขอบคุณมากที่กรุณาตามไปตอบคำถามให้ถึงบล้อกนะครับ ขอบคุณครับ

#39 By Evan Yzac -- The Crow on 2008-09-22 13:49

ขอบคุณครับ ว่างๆแวะเข้ามาดูให้ผมหน่อยว่าผมควรทำอะไรมั้ง
ให้มันสวยอ่ะHot!
อะจ๊าบบบบบบ...

#37 By on 2008-09-22 11:28

Hot! โอ้วว ดูอิโซวขึ้นทันตา ขอบคุณมากค่าาา Hot!

#36 By (^_^)/nana on 2008-09-22 11:03

กำลังอยากได้อยู่พอดีเลยค่ะ ขอบคุณมากค่ะ big smile Hot!
เท่ดีแฮะ ^^''
ขอบคุณสำหรับทริคนี้ค่าาาา~
ดีนะ..เร็วกว่าทำในชอป 55+

#34 By HeDw!g on 2008-09-22 08:23

#29 เปลี่ยนเป็นถ้วยสีขาว แล้วครับ ดูซอฟท์ลงบ้างไหม
อนุโมทนาถ้วยจากสาวดีแทค...cry

#33 By palermos on 2008-09-22 04:06

big smile

#32 By DeepSnowzIndy on 2008-09-22 03:45

ง่ายจริงๆด้วยค่ะdouble wink
สอนcssเยอะมากเลย ต้องขอเรียนรู้จากบลอคนี้ซะแล้ว
ทำบลอคสวยมากเลยค่ะconfused smile

#31 By HASE on 2008-09-22 00:25

ไปลองทำดูด่วนเลยHot!

#30 By Meowzilla Zilla on 2008-09-22 00:21

ปล. ไม่ค่อยชอบเจ้าถ้วยกาแฟข้างล่างอ่ะค่ะ มันโดดเด้งเกินไป ถ้าเป็น graphic สีนุ่มๆ จะเข้ากับบล็อกนี้มากกว่า sad smile
กะให้เลื่อนเมาส์ผ่านแล้วมีกรอบอย่างเดียวค่ะ เพราะมี emoticon อยู่ใน content หลายอัน พอใส่กรอบแล้วมันแปลกๆ sad smile

ขอบคุณอีกครั้งค่ะ big smile
entry ทำหิมะตกค๊า^^~
หวังว่าลิงค์ แจก plugin ยังใช้ได้นะคะ แฮะๆ
http://livalrate.exteen.com/20071202/entryconfused smile

#27 By หนูพุก on 2008-09-21 22:21

ปกติทำจาก photoshop เด๋วต้องลองทำดูบ้างแล้นbig smile

#26 By baibua on 2008-09-21 21:43

ขอบคุณครับ เทคนิคดีๆHot! big smile

#25 By Tirunning on 2008-09-21 21:39

ง่ายดายมากมาย

พึ่งรู้ว่ามันยอดมาก
ขอบคุณมากค่ะ confused smile

#23 By Choudate on 2008-09-21 20:57

โอ้วว สวยดีค่ะ เร็วดีด้วย cry Hot!

#22 By เจนเนสซ่า on 2008-09-21 20:57

ดีจังเลย เด๋วไปเปลี่ยนมั่งbig smile

Hot!

#21 By ::housewife:: on 2008-09-21 20:18

ปรกติผมชอบทำใน ps มากกว่า แต่แบบนี้ก็เป็นความรู้ใหม่ที่ดีเหมือนกันครับ big smile Hot!

#20 By Evan Yzac -- The Crow on 2008-09-21 19:10

เอาไปใช้แล้วเรียบร้อย อิอิ ขอบคุณมากๆ ค่ะ Hot!
ว้าวววว ขอบคุณค่า Hot!

#18 By r a p p e l e r * on 2008-09-21 17:34

โอ้ว ขอบคุณมาก ๆ ครับ
มีประโยชน์มาก ๆ

ผมจะลอง ๆ เอาไปปรับใช้ดูนะครับ confused smile

#17 By IMAGLΣLIO on 2008-09-21 17:29

ชินกะทำใน Ps แล้วละซิครับ แต่ทำ css คงสบายขึ้นอีกเป็นกองopen-mounthed smile Hot!

#16 By iQ180 on 2008-09-21 17:29

Hot! ขอบคุณค่ะ

#15 By iyakoop on 2008-09-21 17:05

เยี่ยมเลย ไว้จะลองทำบ้างฮับ big smile

#14 By persona non grata on 2008-09-21 17:04

โอ้ แบบไม่ต้องพึ่ง ps เลยนะคะเนี้ย!!?
แหล่มมากมาย ...

*โค้ง* ขอบคุณมากมาย เลยนะคะ
ก่อนไป... แวะให้ Hot! Hot!

#13 By monobear™ ★ on 2008-09-21 15:22

เดี๋ยวจะลองทำบ้างนะค่ะbig smile

#12 By ~memay~ on 2008-09-21 12:18

แบบนี้แม้แต่ Emoticon ก็มีกรอบด้วยสินะ (ไปเห็นที่บล็อกบางคน sad smile )

#11 By NinkungZ on 2008-09-21 10:40

อ๋อ ทำแบบนี้นี่เอง เข้าใจแล้ว big smile

#10 By ตุ้มเป๊ะ on 2008-09-21 10:20

ขอบคุณจะลองเล่นดู*-*

#9 By ✦くららちゃん✦ on 2008-09-21 09:38

อ่า
สุดยอดเลยค่ะ
เพิ่งรู้ว่ามีวิธีแบบนี้อยู่ด้วย
เดี๋ยวต้องลองใช้ =w=
ปรับบล็อกใหม่สวยดีค่ะ ชอบๆๆ

#8 By YUUTSUKI ]] on 2008-09-21 08:48

ขอบคุณมากค่าา . . cry Hot!

ได้โค้ดมาเล่นอีกตัวนึงแล้ว . . open-mounthed smile

#7 By BeeMChan~* on 2008-09-21 08:32

ใช้วิธีนี้เหมือนกันค่ะ big smile

#6 By tikyon on 2008-09-21 06:37

#2 ..ผมไม่แน่ใจว่า แมวผมมันรักผมรึเปล่านะ บางวันก็เชิดใส่ บางวันก็วิ่งเข้าใส่เล่นกับผม เมื่อกี้นอนเล่น น้องแมวก็เลียแก้มผมเฉยเลย

บล็อกผมปรับอะไรเล็กๆน้อยๆ ไม่รู้ว่าหน้าบล็อกเบี้ยวหรือเปล่านะ ผมไม่ได้ส่องผ่าน ie6 ถ้ามันเบี้ยวก็บอกด้วยนะครับ

วิธีนี้ทำกรอบแบบนี้ง่ายกว่าทำในโฟโตชอปเยอะครับ ลองสิแล้วจะชอบsurprised smile

#5 By palermos on 2008-09-21 04:39

โอ๊ะ สะดวกดีจังค่ะ ...ไม่เคยใช้ css ปรับแก้มาก่อนเลย
เคยแต่ photoshop แฮะๆsad smile Hot!

#4 By หนูพุก on 2008-09-21 04:36

ว้าว....ดีจัง ไม่ต้องทำให้โฟโต้ช็อปแล้ว

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

เพิ่งเคยเข้ามาบลอคนี้ครั้งแรก...ชอบจังเลยค่ะ

#3 By ★~* Keawy *~ ★ on 2008-09-21 04:29