روش ساختن sprit

[admin]

در بسیاری از سایتها دیده می شود که پیوندها دارای شمایل یا آیکونهایی هستند که در حالت hover تغییر شکل یا رنگ می دهند.
در دنیای وب به این ساختارها sprit میگویند.

روش کار با sprit بسیار ساده است.
۱٫ شما ابتدا تمام آیکونهای خود را روی یک فایل با فرمت jpg,png یا gif قرار میدهید
۲٫ اندازه (width و height) هر آیکون را بر اساس پیکسل تعیین کنید.
۳٫ مختصات هر آیکون را برا اساس x و y با کمک فتوشاپ، برگه info تعیین کنید
۴٫ در ادامه کار شما باید از دو خصوصیت background-image و background-position استفاده کنید:

مسیر فایل را به خصوصیت background-image بدهید.
مختصات آیکون را به خصوصیت background-position بدهید البته با علامت منفی

در پایین کد دونمونه از sprit آورده شده است. نمونه کامل آن از این آدرس قابل دانلود است.

<div class="social">

	<ul>
	
		<li><a class="fb" href="#"></a></li>
		<li><a class="rss" href="#"></a></li>
		<li><a class="in" href="#"></a></li>
		<li><a class="pad" href="#"></a></li>
		<li><a class="share" href="#"></a></li>
		<li><a class="yt" href="#"></a></li>
		<li><a class="tweeter" href="#"></a></li>
		
	</ul>

</div>
<!-- End social-->

<div class="clear"></div>

<div class="nav">

	<ul>
		<li><a class="home" href="#"></a></li>
		<li><a class="about" href="#"></a></li>
		<li><a class="services" href="#"></a></li>
		<li><a class="contact" href="#"></a></li>
	</ul>

</div>
<!-- End nav-->

<strong>css</strong>

{
	margin:0; padding:0
}
.clear{clear:both}
.social{margin:50px auto; width:600px; border-radius:3px; background:#F5F5F5; border:1px solid #E8E8E8; height:55px; padding:10px}
.social ul{list-style:none; padding:0 50px}
.social ul li{float:left; margin-right:15px}
.social ul li a{display:inline-block; width:55px; height:55px;}
.fb{background:url('Social_circle.png') no-repeat -47px -28px }
.fb:hover{background-position:-47px -96px}

.rss{background:url('Social_circle.png') no-repeat -107px -28px }
.rss:hover{background-position:-107px -96px}

.in{background:url('Social_circle.png') no-repeat -169px -28px }
.in:hover{background-position:-169px -96px}

.pad{background:url('Social_circle.png') no-repeat -230px -28px }
.pad:hover{background-position:-230px -96px}

.share{background:url('Social_circle.png') no-repeat -291px -28px }
.share:hover{background-position:-291px -96px}

.yt{background:url('Social_circle.png') no-repeat -351px -28px }
.yt:hover{background-position:-351px -96px}

.tweeter{background:url('Social_circle.png') no-repeat -412px -28px }
.tweeter:hover{background-position:-412px -96px}

/****************************/

.nav{margin:50px auto; width:600px}
.nav ul{list-style:none; padding:0 80px}
.nav ul li{float:left; margin-right:15px}
.nav ul li a{display:inline-block; background-image:url('sprites2.gif'); background-repeat:no-repeat}

.home{background-position:-23px -49px ; width:76px; height:49px}
.home:hover{background-position:-23px -147px ; }

.about{background-position:-100px -49px ; width:82px; height:49px}
.about:hover{background-position:-100px -98px ; }

.services{background-position:-183px -49px ; width:97px; height:49px}
.services:hover{background-position:-183px -98px ; }

.contact{background-position:-281px -49px ; width:97px; height:49px}
.contact:hover{background-position:-281px -147px ; }

[نویسنده]

نوشته‌ها