ورود به حساب کاربری        عضویت
مشاوره تلفنی    05136615381 - 09155249646 - 05136639567  

برچسب ها: ,

این جستار شامل 0 پاسخ ، و دارای 1 کاربر است ، و آخرین بار توسط  Advisor در 1 سال، 4 ماه پیش بروز شده است.

در حال نمایش 1 نوشته (از کل 1)
  • نویسنده
    نوشته ها
  • #11777

    Advisor
    سرپرست کل

    در بسیاری از سایتها دیده می شود که پیوندها دارای شمایل یا آیکونهایی هستند که در حالت 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 ; }
    
    
در حال نمایش 1 نوشته (از کل 1)

شما برای پاسخ به این جستار باید وارد تارنما شوید.