[CSS]เฟรมรูปอย่างง่าย

posted on 07 Aug 2012 12:14 by limitblog in css directory Idea
วันนี้ขอแบบง่ายๆ ละกันนะครับมันเป็น css2 :before And :after Pseudo-Elements ผมจะทำออกมาให้เป็นกรอบรูป โดยใช้ Css2 + Css3 นะครับ ดูการ support Browser ที่ css-tricks.com
 
ไอ้ :before :after ไอ้ที่เค้าใช้มันจริงๆคือ ใช้อัญประกาศก่อนและหลังการ blockquote
  1. content: open-quote; // before
  2. content: close-quote; // after

ศึกษาเพิ่มเติมได้ที่ http://www.hongkiat.com/blog/pseudo-element-before-after/

แต่ผมจะใช้มันทำกรอบรูปมันอาจผิดหลักการหรือไม่ถูกหลัก W3 หรืออะไรก็ตามแต่ ก็ขออภัยเป็นเพียงการนำเสนอเท่านั้นเน้อ..

สร้าง HTML ELEMENT ขึ้นมา

<div id="content">
<li><img src="http://placedog.com/200/170"></li>
<li><img src="http://placedog.com/200/170"></li>
<li><img src="http://placedog.com/200/170"></li>
<li><img src="http://placedog.com/200/170"></li>
<li><img src="http://placedog.com/200/170"></li>
<li><img src="http://placedog.com/200/170"></li>
</div>
 
ผมได้กำหนด css เคร่าวๆ
#content{
  margin: 0px auto;
  text-align: left;
  width:670px;
  padding:0px; }
 
li{
  list-style:none;
  display:inline-block;
  z-index:1;
  position:relative;
  padding:10px; }
 
li img{ position:relative; z-index:-1; /*ให้ภาพจมอยู่ท้ายสุด*/ }
 
กำหนดกรอบโดยให้มีลักษณะ ดังภาพ
 
มั่ว before after ดังนี้

li:before{
position:absolute;
content:'';
width:190px; /*ค่อยๆปรับดูให้มันพอดีกับภาพ*/
height:160px; background:transparent; /*โปร่ง*/
border-radius:5px;
margin:5px 5px;
box-shadow: 0px 0px 0px 10px #fff, /*กรอบขาวทึบ*/ 0px 0px 10px 10px #000, /*เงานอก*/ inset 0px 0px 5px #000; /*เงาใน*/ }
 
li:after{
position:absolute;
content:'';
width:200px; /*ค่อยๆปรับดูให้มันพอดีกับภาพ*/
height:130px;
background:#fff;
left:10px;
z-index:-1;
border-bottom-right-radius:100%;
opacity:.2; }

สามารถดู code เต็มๆได้ทางด้านล่าง [วันนี้แปะ Embed เลย]
 
และสามารถดู DEMO เต็มๆได้ที่นี่



ท้ายนี้ : entry นี้แทบไม่ได้อธิบายอะไรเลยผมว่ามันน่าจะง่ายแค่ดู css ;p อัพตามเวรตามกรรมน่ะครับ เพราะง่วนๆกับ C4D อัพกันบล๊อกร้าง อิอิ

Comment

Comment:

Tweet

confused smile  เป็นแแฟนคลับบล็อกนี้เลยนะเนี่ย
แอบมาเก็บข้อมูลไปทำเว็บตัวเองประจำ
วันนี้เป็นครั้งแรกที่ใช้ css3 ซ้อนกัน
ขอบคุณสำหรับเทคนิคดีๆค่าา
Hot! Hot! Hot! Hot! Hot!

#8 By NAT on 2012-08-15 20:08

บล็อกนี้ นับวันยิ่งสวยนะคะ

#7 By zaяaz' on 2012-08-11 00:03

surprised smile Hot! open-mounthed smile

#6 By บุรุษนิรนาม on 2012-08-09 00:53

เก่งจัง!! double wink double wink Hot! Hot! Hot! Hot!Hot! Hot!
สวยดีครับ confused smile Hot!

#4 By p.cobra on 2012-08-08 02:36

-_- ขยันอี่หลี่ครับ งามคัก ชอบหมาน้อย น่าฮักดี :-D
Hot! Hot! Hot!

#3 By ozinepank on 2012-08-07 15:08

Hot! Hot! Hot!

งามนะครับ^^

ชอบมาศึกษาที่บ้านนี้จริงๆ^^

confused smile confused smile confused smile
question Hot!

#1 By pipekun on 2012-08-07 14:07