تبلیغات
p5soft | دانلود نرم افزار,طراحی سایت,طراحی قالب وبلاگ
پرواز تفریحی پاراگلایدر
پرواز تفریحی پاراگلایدر پرواز تفریحی پاراگلایدر

دوشنبه 13 آبان 1392

CSS Sprites چیست ?

نویسنده: امیر حسینی   

CSS Sprites چیست

تکنیک بسیار کارآمد css image sprites برای تبدیل چند تصویر کوچک و بزرگ به یک تصویر و استفاده از آن با کمک css می باشد.
با استفاده از این تکنیک تعداد درخواست های HTTP و حجم عکس ها به طور چشمگیری کاهش پیدا می کند که این امر در افزایش سرعت بارگزاری سایت بسیار تاثیر گذار است و همچنین یکی از تکنیک های مورد استفاده در مبحث سئو نیز می باشد.
در این مطلب چگونگی استفاده از تکنیک css image sprites به همراه نمونه کار به صورت قدم به قدم آموزش داده خواهد شد.

خاصیت های مورد استفاده در تکنیک css sprites:

/*آدرس تصویر*/
background-image: url(smiley.gif);
/*مقدار تکرار تصویر*/
background-repeat: no-repeat;/*بدون تکرار*/
background-repeat: repeat-x;/*تکرار به صورت افقی*/
background-repeat: repeat-y;/*تکرار به صورت عمودی*/
/*موقعیت تصویر*/
background-position: top right;/*با نام جهت قرارگیری*/
background-position: -2px 10px;/*با استفاده از فاصله به پیکسل*/

در نمونه ایی که کار کردم از unordered list استفاده کردم که به این صورت هست:

<ul id="sprites">
	<li><a href="#"><span class="home"></span>Home</a></li><!--
	--><li><a href="#"><span class="blog"></span>Blog</a></li><!--
	--><li><a href="#"><span class="contact"></span>Contact</a></li><!--
	--><li><a href="#" class="none"><span class="rss"></span>RSS</a></li>
</ul>

و ترکیب شیوه نامه نیز برای unorder list به این صورت هست:

/** css sprites menu **/
#sprites{
	direction: ltr;
	display: block;
	width: 203px;
	height: 35px;
	margin: 15% auto;
	background: #00B8E6;
	border: 1px solid #008FB3;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 0px 3px 0px #007A99;
	box-shadow: 0px 0px 3px 0px #007A99;
}
#sprites li{
	display: inline-block;
	text-align: center;
}
#sprites a{
	display: block;
	width: 50px;
	height: 35px;
	margin: 0 0 -3px 0;
	border-right: 1px solid #007A99;
	font-family: Tahoma;
	font-size: 11px;
	font-weight: bold;
	color: #000;
	transition-duration: 500ms;
	-webkit-transition-duration: 500ms;
	text-shadow: 0px 1px 0px #00CCFF;
}
#sprites a:hover{
	background: #00A3CC;
	color: #00CCFF;
	text-shadow: 0px 1px 0px #008FB3;
	transition-duration: 500ms;
	-webkit-transition-duration: 500ms;
}



چهار آیکنی که برای استفاده از این منو لازم دارم را با استفاده از نرم افزار ویرایش تصویر زیر هم و با فاصله تقریباً 10px در یک تصویر جمع کردم:


CSS Sprites چیست
به حجم تصویر توجه کنید که تا 1/5 کاهش پیدا کرد:


CSS Sprites چیست
اکنون تصویر را در تگ span فراخوانی میکنیم:


#sprites span{
	display: block;
	width: 50px;
	height: 20px;
	background-image: url(img/sprites.png);
	background-repeat: no-repeat;
}


اگر به کدنویسی HTML توجه کرده باشید هر تگ span ما دارای یک کلاس هست، برای هر کلاس قسمت مورد نظرمان از تصویر را نمایش می دهیم:


#sprites .home{
	background-position: center 2px;
}
#sprites .blog{
	background-position: center -26px;
}
#sprites .contact{
	background-position: center -55px;
}
#sprites .rss{
	background-position: center -83px;
}


به همین سادگی!
البته در کدنویسی برای خاصیت background می توانید از خلاصه نویسی نیز استفاده کنید:


CSS Sprites چیست
برای اینکه بدون استفاده از نرم افزار آیکن ها و تصاویر مورد نظر خود را در یک تصویر جمع کنید از این سایت ها می توانید کمک بگیرید:


1. CSS Sprite Generator
2. SpritePad
3. Sprite Me (توصیه من)


Sprite به معنای روح یا شبح است این اسم برای این تکنیک انتخاب شده زیرا شما فقط قسمتی از تصویر را مشاهده می کنید و قسمت های دیگر مانند شبحی ناپیدا هستند…

نمایش منو با استفاده از تکنیک CSS Sprites [کلیک کنید]

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

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت PC با موبایل از طریق usb
اتصال مستقیم تبلت به اینترنت adsl
دفترچه راهنمای فارسی گوشی هوشمند سامسونگ
راهنمای کامل فعال سازی اینترنت ایرانسل (GPRS و EDGE)، بسته های افزایشی و تعرفه‌های مربوطه
ساخت کاربر VIP برای سایت های وردپرسی
/طرح-لایه-باز-اسلایدر-سری-اول.
دریافت کد « ما را حمایت کنید 2 »
دانلود قالب گالری عکس
اسلاید شوی حرفه ای
کد اسلاید شو برای وبلاگ
قالب های حرفه ای وبلاگ همراه با اسلایدشو
ابزار نمایش اسلایدر تصاویر
ابزار اسلایدر عکس برای نمایش چندین تصویر در وبلاگ
قالب همراه با اسلاید شو
کد عضویت کاربر
دانلود اسکریپت مدیریت کاربران AuthManager نسخه ۳
عوامل موثر در افزایش رنکینگ سایت در گوگل
نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip نمایش کد
اسلایدشو با قابلیت پیش نمایش فریم ها- کد جاوا
فیلم فارسی آموزش جاوا اسکریپت (JavaScript) – بخش اول
آموزش ساخت تاریخ و روز با جاوا
کد جاوا اسکریپت تغیر رنگ پس زمینه با کلیک بر روی یک دکمه/لینک
آموزش انتقال بازدید کننده از دامنه قدیمی به دامنه جدید سایت یا وبلاگ
پیش فرض چگونه جاوا اسکریپت را بر روی مرورگر فعال کنیم؟ (+آموزش تصویری)
دانلود کتاب آموزش جاوا اسکریپت صورت کامل
اسکریپت پرداخت آنلاین بانک پارسـیان
اسکریپت سئو سایت در موتور های جستجوگر seo paneL
مراقب لیست سیاه متور های جستجوگر باشید!!
افزونه رمز گذاری روی لینک های دانلود مخصوص vip کردن سایت+آموزش استفاده
25 افزونه کاربردی برای مرورگر کروم
25 افزونه کاربردی برای مرورگر کروم- part2
بازاریابی شبکه های اجتماعی
کلمات کلیدی مطلب : آموزش - تنظیمات - فیس بوک - امنیت فیس بوک - facebook -
آموزش کامل تنظیمات فیس‌بوک(قسمت اول)
5 اشتباه در رایج در شبکه های اجتماعی
ابزارهای بازاریابی شبکه های اجتماعی - نبض وب سایت تان را در دست بگیرید
5 راه برای فروش توسط شبکه های اجتماعی
سوالات و مشکلات سری d سامسونگ
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
ستون های چندگانه در Css3
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
مرجع کامل دستورات CSS2
آموزش ساختن منوی بازشو توسط CSS
آموزش ساخت منوی عمودی ساده با CSS
آموزش ساخت منوی افقی ساده با CSS
آموزش هک کردن فیس بوک
آموزش هک و جلوگیری از هک شدن مودم ADSL

آمار وبلاگ

  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
  • P5design & PARAPINK5 Sales, I.R.I., Inc. All information applies to I.R. vehicles only
    tell number : 09365995390 | 09122061238 | 09022061238
    www.p5bisim.com