[CSS]ทำเบ็ลคกราวแกลลอรี่

posted on 24 Jan 2012 17:11 by limitblog in css directory Lifestyle
css3 full background gallery
ก่อนอื่นต้องขอสวัสดีวันตรุจจีนก่อนนะครับ..ไม่ช่คนจีนแต่ก็ขอร่วมแจมกับเทศกาล
(คนไทยโชคดีวันอะไรก็ตามน้ำไปกับเค้า)
ต่อกันเลยสืบเนื่องจาก full-screen-background-image-pure-css เอ็นทรี่ก่อนนู้น
มันจะเป็นแบคกราวน์ animation whit key-frame ที่ขนาดใหญ่ กว้างสูง 100% เท่ากับขนาดจอ desktop ของเราแต่มันมีอยู่อย่างมันหน่วง cpu ทำงานหนักยิ่งวันนี้ก็เลยเอาแบบ click เปลี่ยนเอง โดยใช้ :target pseudo-class ข้างล่างก็เป็นตัวอย่างง่ายๆของ target นะครับ
นี่คือข้อความในกล่องทดสอบ
กดฉัน
นี่คือข้อความในกล่องทดสอบ
กดฉัน
<style> #test { width:100px; height:100px; background:#ccc; border:solid 2px #000; padding:10px; display:-block; -moz-transition:all 1s ease; -webkit-transition:all 1s ease; } ขอขยายง่ายๆเลยครับด้านล่างคือการเปลี่ยนเแปลงหลังกดเข้าไป คล้ายๆ Hover ---------------------------------------------------------------------- #test:target{ width:150px; height:150px; font-size:170%; color:#fff; } </style> <html> <div id="test">นี่คือข้อความในกล่องทดสอบ</div> <a href="#test">กดฉัน</a> <div id="test1">นี่คือข้อความในกล่องทดสอบ</div> <a href="#test1">กดฉัน</a> </html> /* ขยายเพิ่มเติมเหมือนเราใส่ลิงค์เพื่อให้ให้ลิงค์ไปอีกที่แต่เรากลับเลือกให้ลิงค์ในทำงานโดยตรงกับ element นั้นๆเลย */
อาจจะสังเกตุเห็นกันแล้วตอนเข้ามานะครับมันจะปุ่มๆ 1-9 ด้านล่างขวาของบล๊อก
ลองกดๆดูครับแบคกราวน์ลายดอกไม้แมนมากๆไม่แน่ใจว่าถ้าเอาไปใช้ในบล๊อกอื่นมันจะยังเข้ากับธีมนั่นๆได้หรือเปล่าเพราะผมปรับให้มันเข้ากับธีมตัวที่ผมใช้มันแก้หลายย่างอยู่นะครับถ้าใครเอาไปใช้แล้วมีปัญหาว่ามันเบี้ยวๆบูดๆประการได้ปรึกษากันได้นะครับ..

มันไม่มีอะไรมากใน entry นี้นะครับลองเอาไปชำแระดูแล้วะกันนะครับ

Css

<style> #bg_grid { position:fixed; /* old grid */ top:0; left:0; height:100%; width:100%; background: url(http://themes.themegoods.com/dk_wp/wp-content/themes/dk/images/overlay2.png) repeat; z-index:-1; } .full ul li { list-style: none; margin:0; padding:0; float:left; width:0; } .full ul li img { margin:0; width:0; height:0; border:0; opacity:0; overflow: hidden; -moz-transition: all 1s ease; } .full ul{ background:url(http://www.niceamazingpictures.com/data/media/33/flower_9.jpg); } .full ul li:target img,.full ul { opacity:1 !important; min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; z-index:-1; background:url(http://www.niceamazingpictures.com/data/media/33/flower_9.jpg); } .text,.text span{ position:fixed; font: italic 1em georgia; color:#fff; text-shadow:0px 1px 2px #000; bottom:55px; right:45px; z-index:1; } .dot { height:35px; background:rgba(255,255,255,.7); border-radius:5px; border:1px solid #fff; box-shadow:0px 0px 5px 1px #000; z-index:1; position:fixed; bottom:10px; right:10px; } .dot ul { list-style: none; } .dot ul li{ float: left; margin:10px 5px; text-shadow:inset 1px 1px 2px #333; } .dot ul li a { position:relative; border-radius:20px; background:#aaa; width:10px; height:10px; font-size:10px; padding:0px 4px 0px 4px; box-shadow:inset 1px 1px 2px #333; top:-17px; left:-17px; } .dot ul li a:hover{background:#00CCFF;} </style> Html

<div class="full"> <ul> <li id="s1"><a href="#" ><img src="http://www.niceamazingpictures.com/data/media/33/flower_24.jpg" /></a></li> <li id="s2"><a href="#" ><img src="http://www.niceamazingpictures.com/data/media/33/flower_1.jpg" /></a></li> <li id="s3"><a href="#" ><img src="http://www.niceamazingpictures.com/data/media/33/flower_2.jpg" /></a></li> <li id="s4"><a href="#" ><img src="http://www.niceamazingpictures.com/data/media/33/flower_3.jpg" /></a></li> <li id="s5"><a href="#" ><img src="http://www.niceamazingpictures.com/data/media/33/flower_4.jpg" /></a></li> <li id="s6"><a href="#" ><img src="http://www.niceamazingpictures.com/data/media/33/flower_5.jpg" /></a></li> <li id="s7"><a href="#" ><img src="http://www.niceamazingpictures.com/data/media/33/flower_6.jpg" /></a></li> <li id="s8"><a href="#" ><img src="http://www.niceamazingpictures.com/data/media/33/flower_7.jpg" /></a></li> <li id="s9"><a href="#" ><img src="http://www.niceamazingpictures.com/data/media/33/flower_8.jpg" /></a></li> </ul> </div> <div class="text"><span>css3 full background gallery</span></div> <div class="dot"> <ul> <li><a href="#s1"><span>1</span></a></li> <li><a href="#s2"><span>2</span></a></li> <li><a href="#s3"><span>3</span></a></li> <li><a href="#s4"><span>4</span></a></li> <li><a href="#s5"><span>5</span></a></li> <li><a href="#s6"><span>6</span></a></li> <li><a href="#s7"><span>7</span></a></li> <li><a href="#s8"><span>8</span></a></li> <li><a href="#s9"><span>9</span></a></li> </ul> </div> </ul> </div> <div id="bg_grid"></div> ปล. สามารถท้วงติงได้นะครับ ไม่ได้ไปคัดลอกใครเค้ามาถ้าบังเอินไปเหมือนกับความคิดของท่านก็ขออภัย
ปล.0.1 คัดลอกได้เผยแพร่ได้ไม่ต้องให้เครดิตก็ได้ ขอแค่คิดถึงกันก็พอ จุ๊ฟฟฟฟฟฟ ;p

ทิ้งท้าย: css เอาไปใส่รวมกับตัวธีมเลยนะครับ Html พอสำหรับใส่ใน custom code แน่นอน
css transition แสดงผลใน firefox เท่านั้นนะครับเพราะไม่ได้ทำเผื่อ ขออภัยยิ่ง
รูปดอกไม้จาก http://www.niceamazingpictures.com ที่ยืมมาไม่ได้บอกและไม่รู้จะไปบอกกับใคร
ขอให้ทุกท่านร่างกายแข็งแรงครับ...

แก้ไข:: 28/2/2555 Fuck all spam ลอดน้ำหนักเวรตะไล ดีจริงไม่กินเองวะบอกคนอื่นทำไม

Comment

Comment:

Tweet

@กระต่ายบ๊อง ก็ใช้ได้เหมือนแกลลอรี่ทั่วไปครับทำเป็น header ก็ได้ครับ
@accel. ครับขอบคุณครับ มันไม่แสดงเป็น transition แว็บๆเฉยๆครับ ;p

#6 By limitblog on 2012-01-26 12:06

^
Opera ก็พอไหวนะ แม้ว่าอาจจะไม่ซัพพอร์ตแบบจัดเต็มก็ตาม double wink

ไอเดียเลิศ บล็อกงามจริง ๆ ค่ะ /กราบบบบ Hot! Hot! Hot!

#5 By accel. on 2012-01-26 10:33

ได้แค่firefoxเหรอ sad smile แต่ยังไงก็เยี่ยมมากอยู่ดี Hot!

น่าลองใช้กับส่วนอื่นด้วย

#4 By HASE on 2012-01-26 10:16

เจ๋งมากเลยค่ะ เอาไปใช้กับภาพหัวบล็อกได้มั้ยคะ embarrassed Hot! Hot! Hot!
เจ๋งอะ wink Hot!

#2 By AdmonToom on 2012-01-25 11:18

พระเจ้าจอร์ช มันยอดมากเลยซาร่า พาราเซตาม่อน ยกนิ้วโป้งให้เลย('_^)b
Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! open-mounthed smile confused smile double wink

#1 By บุรุษนิรนาม on 2012-01-24 20:50