ijquery

سبک مترو – ویندورز 8

2 دیدگاه / افکت، افکت تصوير / از

screenshot

ایجاد افکتی به سبک مترو ویندوز 8

آموزش استفاده

  1. قبل از تگ <head/> 
    		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/climacons.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>

     

  2. بعد از تگ <body> 
    		<div class="container">	

			<header class="clearfix">
				<h1>Expanding Overlay Effect<span>Revealing content using CSS clip</span></h1>	
				<nav class="codrops-demos">
					<a class="current-demo" href="index.html">Demo 1</a>
					<a href="index2.html">Demo 2</a>
				</nav>
			</header>
			<div class="main">

				<ul id="rb-grid" class="rb-grid clearfix">
					<li class="icon-clima-1 rb-span-2">
						<h3>Lisbon</h3><span class="rb-temp">21°C</span>
						<div class="rb-overlay">
							<span class="rb-close">close</span>
							<div class="rb-week">
								<div><span class="rb-city">Lisbon</span><span class="icon-clima-1"></span><span>21°C</span></div>
								<div><span>Mon</span><span class="icon-clima-1"></span><span>19°C</span></div>
								<div><span>Tue</span><span class="icon-clima-2"></span><span>19°C</span></div>
								<div><span>Wed</span><span class="icon-clima-2"></span><span>18°C</span></div>
								<div><span>Thu</span><span class="icon-clima-2"></span><span>17°C</span></div>
								<div><span>Fri</span><span class="icon-clima-1"></span><span>19°C</span></div>
								<div><span>Sat</span><span class="icon-clima-1"></span><span>22°C</span></div>
								<div><span>Sun</span><span class="icon-clima-1"></span><span>18°C</span></div>
							</div>
						</div>
					</li>
					<li class="icon-clima-2">
						<h3>Paris</h3><span class="rb-temp">11°C</span>
						<div class="rb-overlay">
							<span class="rb-close">close</span>
							<div class="rb-week">
								<div><span class="rb-city">Paris</span><span class="icon-clima-2"></span><span>11°C</span></div>
								<div><span>Mon</span><span class="icon-clima-1"></span><span>12°C</span></div>
								<div><span>Tue</span><span class="icon-clima-4"></span><span>11°C</span></div>
								<div><span>Wed</span><span class="icon-clima-4"></span><span>10°C</span></div>
								<div><span>Thu</span><span class="icon-clima-4"></span><span>9°C</span></div>
								<div><span>Fri</span><span class="icon-clima-2"></span><span>10°C</span></div>
								<div><span>Sat</span><span class="icon-clima-2"></span><span>10°C</span></div>
								<div><span>Sun</span><span class="icon-clima-2"></span><span>12°C</span></div>
							</div>
						</div>
					</li>
					<li class="icon-clima-1">
						<h3>Belgrade</h3><span class="rb-temp">15°C</span>
						<div class="rb-overlay">
							<span class="rb-close">close</span>
							<div class="rb-week">
								<div><span class="rb-city">Belgrade</span><span class="icon-clima-1"></span><span>15°C</span></div>
								<div><span>Mon</span><span class="icon-clima-3"></span><span>16°C</span></div>
								<div><span>Tue</span><span class="icon-clima-3"></span><span>17°C</span></div>
								<div><span>Wed</span><span class="icon-clima-3"></span><span>15°C</span></div>
								<div><span>Thu</span><span class="icon-clima-4"></span><span>13°C</span></div>
								<div><span>Fri</span><span class="icon-clima-3"></span><span>10°C</span></div>
								<div><span>Sat</span><span class="icon-clima-1"></span><span>11°C</span></div>
								<div><span>Sun</span><span class="icon-clima-1"></span><span>12°C</span></div>
							</div>
						</div>
					</li>
					<li class="icon-clima-4">
						<h3>Moscow</h3><span class="rb-temp">2°C</span>
						<div class="rb-overlay">
							<span class="rb-close">close</span>
							<div class="rb-week">
								<div><span class="rb-city">Moscow</span><span class="icon-clima-4"></span><span>1°C</span></div>
								<div><span>Mon</span><span class="icon-clima-4"></span><span>-1°C</span></div>
								<div><span>Tue</span><span class="icon-clima-6"></span><span>-2°C</span></div>
								<div><span>Wed</span><span class="icon-clima-6"></span><span>-6°C</span></div>
								<div><span>Thu</span><span class="icon-clima-6"></span><span>-4°C</span></div>
								<div><span>Fri</span><span class="icon-clima-5"></span><span>-5°C</span></div>
								<div><span>Sat</span><span class="icon-clima-6"></span><span>-6°C</span></div>
								<div><span>Sun</span><span class="icon-clima-6"></span><span>-8°C</span></div>
							</div>
						</div>
					</li>
					<li class="icon-clima-1">
						<h3>New Delhi</h3><span class="rb-temp">17°C</span>
						<div class="rb-overlay">
							<span class="rb-close">close</span>
							<div class="rb-week">
								<div><span class="rb-city">New Delhi</span><span class="icon-clima-1"></span><span>17°C</span></div>
								<div><span>Mon</span><span class="icon-clima-1"></span><span>18°C</span></div>
								<div><span>Tue</span><span class="icon-clima-8"></span><span>19°C</span></div>
								<div><span>Wed</span><span class="icon-clima-8"></span><span>16°C</span></div>
								<div><span>Thu</span><span class="icon-clima-10"></span><span>17°C</span></div>
								<div><span>Fri</span><span class="icon-clima-10"></span><span>18°C</span></div>
								<div><span>Sat</span><span class="icon-clima-2"></span><span>17°C</span></div>
								<div><span>Sun</span><span class="icon-clima-1"></span><span>17°C</span></div>
							</div>
						</div>
					</li>
					<li class="icon-clima-1">
						<h3>Tel Aviv</h3><span class="rb-temp">23°C</span>
						<div class="rb-overlay">
							<span class="rb-close">close</span>
							<div class="rb-week">
								<div><span class="rb-city">Tel Aviv</span><span class="icon-clima-1"></span><span>22°C</span></div>
								<div><span>Mon</span><span class="icon-clima-1"></span><span>23°C</span></div>
								<div><span>Tue</span><span class="icon-clima-2"></span><span>22°C</span></div>
								<div><span>Wed</span><span class="icon-clima-2"></span><span>22°C</span></div>
								<div><span>Thu</span><span class="icon-clima-2"></span><span>21°C</span></div>
								<div><span>Fri</span><span class="icon-clima-1"></span><span>21°C</span></div>
								<div><span>Sat</span><span class="icon-clima-2"></span><span>21°C</span></div>
								<div><span>Sun</span><span class="icon-clima-2"></span><span>24°C</span></div>
							</div>
						</div>
					</li>
					<li class="icon-clima-2">
						<h3>Cairo</h3><span class="rb-temp">21°C</span>
						<div class="rb-overlay">
							<span class="rb-close">close</span>
							<div class="rb-week">
								<div><span class="rb-city">Cairo</span><span class="icon-clima-2"></span><span>21°C</span></div>
								<div><span>Mon</span><span class="icon-clima-1"></span><span>22°C</span></div>
								<div><span>Tue</span><span class="icon-clima-1"></span><span>20°C</span></div>
								<div><span>Wed</span><span class="icon-clima-1"></span><span>21°C</span></div>
								<div><span>Thu</span><span class="icon-clima-1"></span><span>21°C</span></div>
								<div><span>Fri</span><span class="icon-clima-2"></span><span>21°C</span></div>
								<div><span>Sat</span><span class="icon-clima-2"></span><span>22°C</span></div>
								<div><span>Sun</span><span class="icon-clima-2"></span><span>23°C</span></div>
							</div>
						</div>
					</li>
					<li class="icon-clima-11">
						<h3>New York</h3><span class="rb-temp">3°C</span>
						<div class="rb-overlay">
							<span class="rb-close">close</span>
							<div class="rb-week">
								<div><span class="rb-city">New York</span><span class="icon-clima-11"></span><span>3°C</span></div>
								<div><span>Mon</span><span class="icon-clima-11"></span><span>3°C</span></div>
								<div><span>Tue</span><span class="icon-clima-11"></span><span>-1°C</span></div>
								<div><span>Wed</span><span class="icon-clima-11"></span><span>-2°C</span></div>
								<div><span>Thu</span><span class="icon-clima-7"></span><span>1°C</span></div>
								<div><span>Fri</span><span class="icon-clima-7"></span><span>0°C</span></div>
								<div><span>Sat</span><span class="icon-clima-11"></span><span>2°C</span></div>
								<div><span>Sun</span><span class="icon-clima-11"></span><span>3°C</span></div>
							</div>
						</div>
					</li>
					<li class="icon-clima-2 rb-span-2">
						<h3>San Francisco</h3><span class="rb-temp">15°C</span>
						<div class="rb-overlay">
							<span class="rb-close">close</span>
							<div class="rb-week">
								<div><span class="rb-city">San Francisco</span><span class="icon-clima-2"></span><span>15°C</span></div>
								<div><span>Mon</span><span class="icon-clima-2"></span><span>16°C</span></div>
								<div><span>Tue</span><span class="icon-clima-2"></span><span>14°C</span></div>
								<div><span>Wed</span><span class="icon-clima-2"></span><span>13°C</span></div>
								<div><span>Thu</span><span class="icon-clima-2"></span><span>15°C</span></div>
								<div><span>Fri</span><span class="icon-clima-2"></span><span>15°C</span></div>
								<div><span>Sat</span><span class="icon-clima-1"></span><span>16°C</span></div>
								<div><span>Sun</span><span class="icon-clima-1"></span><span>15°C</span></div>
							</div>
						</div>
					</li>
					<li class="icon-clima-2">
						<h3>Tokyo</h3><span class="rb-temp">8°C</span>
						<div class="rb-overlay">
							<span class="rb-close">close</span>
							<div class="rb-week">
								<div><span class="rb-city">Tokyo</span><span class="icon-clima-2"></span><span>8°C</span></div>
								<div><span>Mon</span><span class="icon-clima-1"></span><span>7°C</span></div>
								<div><span>Tue</span><span class="icon-clima-2"></span><span>6°C</span></div>
								<div><span>Wed</span><span class="icon-clima-1"></span><span>8°C</span></div>
								<div><span>Thu</span><span class="icon-clima-1"></span><span>8°C</span></div>
								<div><span>Fri</span><span class="icon-clima-2"></span><span>6°C</span></div>
								<div><span>Sat</span><span class="icon-clima-2"></span><span>5°C</span></div>
								<div><span>Sun</span><span class="icon-clima-2"></span><span>5°C</span></div>
							</div>
						</div>
					</li>
					<li class="icon-clima-4 rb-span-4">
						<h3>Sydney</h3><span class="rb-temp">25°C</span>
						<div class="rb-overlay">
							<span class="rb-close">close</span>
							<div class="rb-week">
								<div><span class="rb-city">Sydney</span><span class="icon-clima-4"></span><span>28°C</span></div>
								<div><span>Mon</span><span class="icon-clima-4"></span><span>24°C</span></div>
								<div><span>Tue</span><span class="icon-clima-4"></span><span>26°C</span></div>
								<div><span>Wed</span><span class="icon-clima-2"></span><span>27°C</span></div>
								<div><span>Thu</span><span class="icon-clima-2"></span><span>30°C</span></div>
								<div><span>Fri</span><span class="icon-clima-8"></span><span>31°C</span></div>
								<div><span>Sat</span><span class="icon-clima-8"></span><span>29°C</span></div>
								<div><span>Sun</span><span class="icon-clima-8"></span><span>29°C</span></div>
							</div>
						</div>
					</li>
				</ul>

			</div>
		</div><!-- /container -->

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script src="js/jquery.fittext.js"></script>
		<script src="js/boxgrid.js"></script>
		<script>
			$(function() {

				Boxgrid.init();

			});
		</script>

     


پیش نمایش دانلود فایل پلاگین

2 دیدگاه دربارهٔ «سبک مترو – ویندورز 8»

  1. مرتضی

    سلام
    سایتت عالیه…
    کل این کد هارو تو یک صفحه باید کپی پیست کنیم؟؟
    مثلا index.html؟؟؟
    اگه نه پس بگو اسم فایلی که بسازم رو چی بزارم

    بازم ممنونم

    پاسخ
    1. mahdi

      سلام مرتضی جان مرسی,
      ببین همونطور هم که تو آموزش استفاده گفته شما تو هر قالبی که میخوای این سورس رو استفاده کنی فایل ها و عکس ها رو تو پوشه های css و … میریزی بعد html ها رو استفاده میکنی و کتابخانه ها رو فراخوانی میکنی دقیقاً طبق مراحل گفته شده در آموزش استفاده

      پاسخ

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *