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 นะครับ
นี่คือข้อความในกล่องทดสอบ
กดฉัน
นี่คือข้อความในกล่องทดสอบ
กดฉัน
<![CDATA[
<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
<![CDATA[
<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
<![CDATA[
<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 ลอดน้ำหนักเวรตะไล ดีจริงไม่กินเองวะบอกคนอื่นทำไม
บ้านนายลิงแว่น
แต่ยังไงก็เยี่ยมมากอยู่ดี 
#1 By บุรุษนิรนาม on 2012-01-24 20:50