تالار میدوری

نسخه کامل: اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح بیست و هشتم)
شما در حال مشاهده نسخه تکمیل نشده می باشید. مشاهده نسخه کامل با قالب بندی مناسب.
اسلاید شوهای زیبا و ابتکاری با CSS3 (طرح بیست و هشتم)
اسلاید شو یا گالری تصاویر برای نمایش تصاویر بصورتی زیبا و تکنیکی با استفاده از راه کارها و روش های گوناگون . برای دوستان چند مدل را گردآوری کرده ام که در اینجا قرار میدهم . نمونه ی زنده را در زیر ببینید و سپس برای بررسی و استفاده , از کد های داده شده استفاده کنید . تغییرات بعهده ی شماست .

کد HTML:
<style type="text/css">
#outer {width:600px; height:400px; position:relative; margin:50px auto;}
#outer input {display:none;}
#outer div {width:250px; height:350px; padding:25px; position:absolute; top:0; left:150px; background:#fff; 
border-radius:5px; z-index:80; box-shadow:0 5px 10px rgba(0,0,0,0.5);
-webkit-transform: translate3d(0.5, 0.5, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
transform: translate3d(0.5, 0.5, 0);
transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
transition:0.75s;
-o-transition:0.75s;
-moz-transition:0.75s;
-webkit-transition:0.75s;
}
#outer label {display:block; width:100%; height:100%; z-index:100; cursor:pointer; position:absolute; left:0; top:0; 
background:url(trans.gif);
-webkit-tap-highlight-color:rgba(0,0,0,0);
tap-highlight-color:rgba(0,0,0,0);
}
#outer h2 {padding:20px 0; margin:0; font:600 22px/40px 'Open Sans', arial, sans-serif; color:#2e6faf;}
#outer p {padding:0; margin:0; font:400 13px/18px 'Open Sans', arial, sans-serif; color:#444;}
#outer p a {color:#080;}
#outer p a:hover {text-decoration:none;}
#panel1l:checked ~ div.p1,
#panel2l:checked ~ div.p2,
#panel3l:checked ~ div.p3,
#panel4l:checked ~ div.p4,
#panel5l:checked ~ div.p5,
#panel6l:checked ~ div.p6,
#panel1r:checked ~ div.p1,
#panel2r:checked ~ div.p2,
#panel3r:checked ~ div.p3,
#panel4r:checked ~ div.p4,
#panel5r:checked ~ div.p5,
#panel6r:checked ~ div.p6
{left:150px; z-index:100; box-shadow:0 5px 20px rgba(0,0,0,0.5);
transform: scale(1,1);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
-webkit-transform: scale(1,1);
}
#panel1l:checked ~ div.p2,
#panel2l:checked ~ div.p3,
#panel3l:checked ~ div.p4,
#panel4l:checked ~ div.p5,
#panel5l:checked ~ div.p6,
#panel6l:checked ~ div.p1,
#panel1r:checked ~ div.p2,
#panel2r:checked ~ div.p3,
#panel3r:checked ~ div.p4,
#panel4r:checked ~ div.p5,
#panel5r:checked ~ div.p6,
#panel6r:checked ~ div.p1
{left:300px; z-index:90;
transform: scale(0.75, 0.75);
-o-transform: scale(0.75, 0.75);
-ms-transform: scale(0.75, 0.75);
-webkit-transform: scale(0.75, 0.75);
}
#panel1l:checked ~ div.p6,
#panel2l:checked ~ div.p1,
#panel3l:checked ~ div.p2,
#panel4l:checked ~ div.p3,
#panel5l:checked ~ div.p4,
#panel6l:checked ~ div.p5,
#panel1r:checked ~ div.p6,
#panel2r:checked ~ div.p1,
#panel3r:checked ~ div.p2,
#panel4r:checked ~ div.p3,
#panel5r:checked ~ div.p4,
#panel6r:checked ~ div.p5
{left:0; z-index:90;
transform: scale(0.75, 0.75);
-o-transform: scale(0.75, 0.75);
-ms-transform: scale(0.75, 0.75);
-webkit-transform: scale(0.75, 0.75);
}
#panel1l:checked ~ div.p2 label.left {display:none;}
#panel1l:checked ~ div.p1 label {display:none;}
#panel1l:checked ~ div.p6 label.right {display:none;}
#panel6l:checked ~ div.p1 label.left {display:none;}
#panel6l:checked ~ div.p6 label {display:none;}
#panel6l:checked ~ div.p5 label.right {display:none;}
#panel5l:checked ~ div.p6 label.left {display:none;}
#panel5l:checked ~ div.p5 label {display:none;}
#panel5l:checked ~ div.p4 label.right {display:none;}
#panel4l:checked ~ div.p5 label.left {display:none;}
#panel4l:checked ~ div.p4 label {display:none;}
#panel4l:checked ~ div.p3 label.right {display:none;}
#panel3l:checked ~ div.p4 label.left {display:none;}
#panel3l:checked ~ div.p3 label {display:none;}
#panel3l:checked ~ div.p2 label.right {display:none;}
#panel2l:checked ~ div.p3 label.left {display:none;}
#panel2l:checked ~ div.p2 label {display:none;}
#panel2l:checked ~ div.p1 label.right {display:none;}
#panel1r:checked ~ div.p2 label.right {display:none;}
#panel1r:checked ~ div.p1 label {display:none;}
#panel1r:checked ~ div.p6 label.left {display:none;}
#panel6r:checked ~ div.p1 label.right {display:none;}
#panel6r:checked ~ div.p6 label {display:none;}
#panel6r:checked ~ div.p5 label.left {display:none;}
#panel5r:checked ~ div.p6 label.right {display:none;}
#panel5r:checked ~ div.p5 label {display:none;}
#panel5r:checked ~ div.p4 label.left {display:none;}
#panel4r:checked ~ div.p5 label.right {display:none;}
#panel4r:checked ~ div.p4 label {display:none;}
#panel4r:checked ~ div.p3 label.left {display:none;}
#panel3r:checked ~ div.p4 label.right {display:none;}
#panel3r:checked ~ div.p3 label {display:none;}
#panel3r:checked ~ div.p2 label.left {display:none;}
#panel2r:checked ~ div.p3 label.right {display:none;}
#panel2r:checked ~ div.p2 label {display:none;}
#panel2r:checked ~ div.p1 label.left {display:none;}
</style>
<div id="outer">
<input name="pics" id="panel1l" type="radio">
<input name="pics" id="panel2l" type="radio">
<input name="pics" id="panel3l" type="radio">
<input name="pics" id="panel4l" type="radio">
<input name="pics" id="panel5l" type="radio">
<input name="pics" id="panel6l" type="radio">
<input name="pics" id="panel1r" type="radio">
<input name="pics" id="panel2r" type="radio">
<input name="pics" id="panel3r" type="radio">
<input checked="checked" name="pics" id="panel4r" type="radio">
<input name="pics" id="panel5r" type="radio">
<input name="pics" id="panel6r" type="radio">
    <div class ="p1">
	   <img src="thumbg.jpg" alt="">
	   <h2>Swipe Me Too!</h2>
	   <p>A re-work of the original <a href="#">Swipe Me!</a>
 a responsive full screen lightbox/slideshow using minimal jQuery and CSS3 styles.<br><br>
	   <a href="#">view demo</a></p>
	   <label class ="left" for="panel1l"></label><label class ="right" for="panel1r"></label>
    </div>
    <div class ="p2">
	   <img src="thumbf.jpg" alt="">
	   <h2>Swipe Me!</h2>
	   <p>The original responsive full screen slideshows with 'swipe' action.<br><br>
	   <a href="#">view demo</a></p>
	   <label class ="left" for="panel2l"></label><label class ="right" for="panel2r"></label>
    </div>
    <div class ="p3">
	   <img src="thumba.jpg" alt="">
	   <h2>Swipe Me Inline!</h2>
	   <p>A re-coded and re-styled version of <a href="#">Swipe Me Too!</a>
 to produce a responsive inline version.<br><br>
	   <a href="#">view demo</a></p>
	   <label class ="left" for="panel3l"></label><label class ="right" for="panel3r"></label>
    </div>
    <div class ="p4">
	   <img src="thumbb.jpg" alt="">
	   <h2>CSS Play-er Playlist</h2>
	   <p>CSSplay-er v2.0 is a responsive video player with playlists, minimal controls and
 using standard HTML5 video code.<br><br>
	   <a href="#">view demo</a></p>
	   <label class ="left" for="panel4l"></label><label class ="right" for="panel4r"></label>
    </div>
    <div class ="p5">
	   <img src="thumbc.jpg" alt="">
	   <h2>CSS Play-er</h2>
	   <p>CSSplay-er is a basic HTML5 player with the normal controls of 
play/pause, mute, fullscreen (for supporting browsers) and 
volume/progress sliders, and support for IE7/8.<br><br>
	   <a href="#">view demo</a></p>
	   <label class ="left" for="panel5l"></label><label class ="right" for="panel5r"></label>
    </div>
    <div class ="p6">
	   <img src="thumbd.jpg" alt="">
	   <h2>Metro Menu</h2>
	   <p>A Windows 8 'Metro' style menu that works in all modern browsers including iOS and
 Android OS using just CSS.<br><br>
	   <a href="#">view demo</a></p>
	   <label class ="left" for="panel6l"></label><label class ="right" for="panel6r"></label>
    </div>
</div>

بسیار ممنونم از شما.
من هرکاری کردم نتونستم پنل هاشو بیشتر کنم میشه کدی بزارید که 10 قسمت بشه یعنی 10 تا مطلب (Panel) درش جا بشه؟
برای اینکار باید مقادیر رو اضافه کنید که کار ساده ای نیست بهتر است از همین تعداد استفاده کنید و یا از دیگر اسلاید شو ها استفاده کنید . Cool
لینک مرجع