تالار میدوری

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

کد HTML:
<div class ="content">
    <h1>Pure CSS3 Cycle Slider</h1>
</div>

<div class ="container">
    <div id="content-slider">
	   <div id="slider">
		  <div id="mask">
		  <ul>
			<li id="first" class ="firstanimation">
		  <a href="#">
		  <img src="images/img_1.jpg" alt="Cougar"/>
		  </a>
		  <div class ="tooltip">
		  <h1>Cougar</h1>
		  </div>
		  </li>

		  <li id="second" class ="secondanimation">
		  <a href="#">
		  <img src="images/img_2.jpg" alt="Lions"/>
		  </a>
		  <div class ="tooltip">
		  <h1>Lions</h1>
		  </div>
		  </li>

		  <li id="third" class ="thirdanimation">
		  <a href="#">
		  <img src="images/img_3.jpg" alt="Snowalker"/>
		  </a>
		  <div class ="tooltip">
		  <h1>Snowalker</h1>
		  </div>
		  </li>

		  <li id="fourth" class ="fourthanimation">
		  <a href="#">
		  <img src="images/img_4.jpg" alt="Howling"/>
		  </a>
		  <div class ="tooltip">
		  <h1>Howling</h1>
		  </div>
		  </li>

		  <li id="fifth" class ="fifthanimation">
		  <a href="#">
		  <img src="images/img_5.jpg" alt="Sunbathing"/>
		  </a>
		  <div class ="tooltip">
		  <h1>Sunbathing</h1>
		  </div>
		  </li>
		  </ul>
		  </div>
		  <div class ="progress-bar"></div>
	   </div>
    </div>
</div>


[attachment=2527]
لینک مرجع