• مقالات
  • خدمات
  • اخبار
  • درباره ما
  • تماس با ما
عضویت ورود   ۰۲۱-۸۶۰۸۶۸۶۴
وب 24
  • طراحی سایت  
    • طراحی سایت حرفه ای
    • قیمت طراحی سایت
    • طراحی سایت فروشگاه اینترنتی
    • طراحی سایت صنعتی
    • طراحی سایت گردشگری
    • طراحی سایت خبری
    • طراحی سایت شرکتی
    • طراحی وب سایت تبلیغاتی
  • سئو و بهینه سازی سایت  
    • خدمات سئو
    • قیمت سئو
    • سفارش سئو
    • مشاوره سئو
    • آموزش سئو
  • دیجیتال مارکتینگ  
    • خدمات رپورتاژ آگهی
      • رپورتاژ آگهی چیست
      • تعرفه رپورتاژ آگهی
    • خدمات تولید محتوا
      • تعرفه تولید محتوا
    • بازاریابی اینترنتی
  • نمونه کارها  
    • نمونه کارهای طراحی سایت
    • نمونه کارهای سئو
پورتال مشتریان وب24
وب 24
پایگاه دانش
مقالات
آموزش طراحی سایت
CSS sprite چیست

CSS sprite چیست

زمان انتشار: شنبه ۲۷ آبان ۱۳۹۶  

CSS sprite با عنوان CSS Image Sprites در سایت W3schoolsمعرفی میشود.  این سایت در تعریف  Css sprite می نویسد.

CSS Image Sprites: یک مجموع عکس میباشد، که درون یک عکس ذخیره شده اند.

برای ساده تر کردن این تعریف مثالی بزنیم : فرض کنید که سه عکس از سه ایکن در اختیار دارید، میتوانید این سه عکس را در یک عکس کنار هم گنجانده و با توجه به محل قرارگیری این عکس تنها آیکون مد نظر را به نمایش بگذارید.

ایکن برای Css sprite

 

در CSSدستوری از CSS1داریم که در CSS3نیز با امکانات جدید بروز رسانی شد. این دستور backgroundاست. در این آموزش ما تنها صفت urlاین دستور را بررسی میکنیم. صفت urlمسئول پذرفتن مقدار برای آدرس عکس پس زمینه یک تگ در HTMLاست.

در صورتی که تنها بخواهید تصویری را به پس زمینه یک تگ اضافه کنید، میتوانید از دستور background-imageنیز استفاده کنید. این دستور تنها ویژگی های مربوط به تصویر را بخود میگیرد.

به کد های زیر نگاه کنید:

#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}

این کدها در فایل HTML به این صورت نوشته میشوند:

<style>

#home {

width: 46px;

height: 44px;

background: url(img_navsprites.gif) 0 0;

}

 

#next {

width: 43px;

height: 44px;

background: url(img_navsprites.gif) -91px 0;

}

</style>

</head>

<body>

 

<img id="home" src="img_trans.gif"><br><br>

<img id="next" src="img_trans.gif">

 

میتوان بجای تگ IMG از تگهای دیگر HTML نیز برای نمایش عکس پس زمینه استفاده کرد. برخی از تگها مانند تگ span برای نمایش پس زمینه کاربرد ندارند، ولی بسیاری از تگها مانند تگ P یا Div میتوانند بجای تگ imgعکس پس زمینه را بخود بگیرند.

در کد های بالا برای نمایش صحیح تصویر پس زمینه، اندازه یکی از ایکون ها را بصورت طول و عرض در CSS مشخص کرده ایم.

در قسمت background: url(img_navsprites.gif) 0 0; از ویژگی تایپ چند صفت در یک خط استفاده شده است و علاوه بر مشخص کردن آدرس پس زمنیه مکان آن از چپ (صفر پیکسل) و از بالا (صفر پیکسل) را نیز مشخص می کند.

امکان تعیین موقعیت پس زمینه کمک کرده است، تا کاربران بتوانند چند عکس را در یک عکس قرار داده و در هر مکان عکس دلخواه را به نمایش بگذارند.

 

استفاده از Css Sprite

 

چرا باید از CSS sprite استفاده کرد

مزیت روش CSS sprite در کاهش تعداد ارسال درخواست به سرور است.  برای بارگذاری هر عکس در سایت یک درخواست برای آدرس آن عکس به سرور ارسال میشود و استفاده از CSS sprite تعداد این درخواست ها را به حداقل می رساند. تعداد درخواست های زیاد از سرور، در زمانیکه مشکلات اینترنتی و یا مشکل در پایداری خود سرور وجود داشته باشد، موجب بروز تجربه کاربری منفی خواهد شد.

نمونه ای از استفاده از چند صفت در یک خط کد

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

 

در کدهای بالا ویژگی های background-color ،background-image ، background-repeat،background-attachment ،background-position.در یک خط کد استفاده شده است.

 

اطلاعات تکمیلی از Css sprite

 

مطالب بیشتر برای علاقه مندان به مطالعه بیشتر در باره CSS sprite:

نکته : در سایت های بسیاری ذکر شده است که حجم عکس ها در حالت استفاده از CSS sprite کمتر از حالتی است که عکس ها بصورت جداگانه ذخیره شده باشند. این موضوع ممکن است همیشه صادق نباشد. توجه به اینکه عکس های بدون پس زمینه را با پسوند gif ذخیره کنید و نه با پسوند png و استفاده از فشرده سازی مناسب برای فرمت JPG ، برای کم کردن حجم یک تصویر ترکیبی بسیار مهم است.

 

ایجاد دکمه های انتقال به کمک CSS sprite

ما تصویر  دکمه انتقال با Css Sprite را دانلود و با نام img_navsprites.gif ذخیره کرده ایم. از این تصویر میتوان برای ایجاد یک لیست انتقال بین صفحات استفاده کرد. دلیل اینکه ما از لیست برای انجام این تمرین استفاده میکنیم، امکان استفاده از لینک و پس زمینه بصورت همزمان در لیست ها میباشد.

کد های ما عبارتند از :

#navlist {
position: relative;
}

#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}

#navlist li, #navlist a {
height: 44px;
display: block;
}

#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}

#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}

#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}

 

کدلیست ما در HTML به این صورت است:

 

<ul id="navlist">

<li id="home"><a href="default.asp"></a></li>

<li id="prev"><a href="css_intro.asp"></a></li>

<li id="next"><a href="css_syntax.asp"></a></li>

</ul>

 

توضیح استایل های داده شده :

#navlist {position:relative;} : دو نوع صفت position در CSS وجود دارد، relative که به صفت دیگر یعنی absolute امکان میدهد، که موقعیت مکانی خود را بر اساس مکان تگ دارای صفت relative تنظیم کند.

#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} :در این قسمت برای لیست پدینگ و مارجین تعیین شده و استایل لیست حذف شده است. همانطور که مشاهده می کنید مکان لیست بصورت absolute مشخص شده است.

#navlist li, #navlist a {height:44px;display:block;} : ارتفاع تمام عکس ها را 44 پیکسل تعیین میکند.

#home {left:0px;width:46px;} : مکان تگ دارای ID=home را مشخص می کند. عرض تصاویر در این قسمت 46 پیکسل در نظر گرفته شده است.

#home {background:url(img_navsprites.gif) 0 0;}  : همانطور که در ابتدای مقاله اشاره کردیم این کد ترکییبی از، صفت مکان، و عکس پس زمینه را برای ایجاد امکان سوییچ کردن، به قسمت های مختلف یک عکس استفاده میکند.

#prev {left:63px;width:43px;} : مکان و عرض تگ دارای id= prev را تعیین می کند.

#prev {background:url('img_navsprites.gif') -47px 0;}  : عدد 47 برای فاصله این عکس از جمع عرض 46 پیکسل در id=”home” و یک پیکسل برای خط جدا کننده است.

#next {left:129px;width:43px;}  : مکان را با جمع مکان های قبلی و مقداری مکان اضافه تعیین کرده است.

#next {background:url('img_navsprites.gif') -91px 0;} : فاصله عکس را 91 پیکسل تعیین می کند که از جمع 46 پیکسل عرض Home با یک پیکسل جدا کننده و 43 پیکسل برای id=” prev” و یک پیسل دیگر برای جدا کننده این قسمت است.

استفاده از CSS sprite برای تغییر عکس هنگام هاور کردن

لیست ها مانند بیشتر تگ ها در html امکان استفاده از ویژگی :Hover را دارند. ما عکسی حاوی ایکون های اصلی و ایکن ها در حالت هاور را در یک عکس، آماده کرده ایم.

با توجه به اینکه این عکس یک پارچه است و 6 عکس جدا گانه در کنار هم نیست، هنگام هاور کردن موس روی عکس، نیازی به بارگذاری عکس جدیدی روی سایت نیست. که این موضوع یکی از دلایل افزایش سرعت در روش Css Sprite است. با سه خط کد زیر میتوان، به این عکس ها افکت هاور اضافه کرد:

هاور کردن با Css Sprite

 

#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}

 

این کد ها در واقع مکان عکس را در هنگام هاور 45 پیکسل پایین تر میبرند تا عکس زیرین در هنگام هاور موس به نمایش در بیاید.

 

CSS Sprite برای افبزایش سرعت سایت

 

نحوه استفاده از CSS sprite در Sass

Sass نرم افزار متن باز و رایگانی است که به کاربران امکان میدهد، تا بتوانند با کد های برنامه نویسی فایلهای CSS را ایجاد کنند. نرم افزار Sass بدلیل افزایش سرعت کد نویسی در بین طراحان دنیا از اهمیت بالایی برخوردار گشته است. برای آنکه بتوانید CSS sprite را در برنامه Sass بکار ببرید از دستورات زیر استفاده کنید:

@import 'sprite'; // the generated style file (sprite.scss)

 

// camera icon (camera.png in src directory)

.icon-camera {

@include sprite($camera);

}

 

// cart icon (cart.png in src directory)

.icon-cart {

@include sprite($cart);

}

 

یک مثال دیگر :

 

@import 'sprite' // the generated style file (sprite.sass)  

// camera icon (camera.png in src directory)

.icon-camera

+sprite($camera)

 

// cart icon (cart.png in src directory)

 

.icon-cart

 

 

+sprite($cart)

 

 

اجرای CSS sprite در پلتفرم Less

Less پلتفرمی است که مانند Sass به کاربران امکان میدهد که برای تولید فایل Css از کد نویسی استفاده کنند. هدف تولید این پلتفرم کم کردن میزان کد نویسی در CSS بوده است. میتوان در پلتفرم Less از ویژگی Css Sprite استفاده کرد. برای این منظور کد زیر را بکار ببرید:

@import 'sprite'; // the generated style file (sprite.less)

 

// camera icon (camera.png in src directory)

.icon-camera {

.sprite(@camera);

}

 

// cart icon (cart.png in src directory)

.icon-cart {

.sprite(@cart);

}

اگر به یادگیری پلتفرم Less علاقه مند شده اید سایت http://lesscss.org/3.x/ آموزش های خوبی برای نسخه جدید این پلتفرم ارائه داده است.

استفاده از CSS sprite در زبان stylus

در زبان stylus شما امکان استفاده از تمام ویژگی های CSS را در کنار قابلیت های کد نویسی و تعریف متغییر را دارند که این موضوع باعث شده است که زبان stylus به رقیبی سر سخت برای پلتفرم های Sass و less باشد. اگر بخواهیم در زبان stylus از CSS sprite استفاده کنیم، میتوانیم از دستورات زیر استفاده کنیم:

 

@import 'sprite' // the generated style file (sprite.styl)

 

// camera icon (camera.png in src directory)

.icon-camera

sprite($camera)

 

// cart icon (cart.png in src directory)

.icon-cart

sprite($cart)

 

نتیجه گیری

Css sprite روش کاربردی برای کاهش ارسال درخواست به سرور و افزایش سرعت سایت است، که با تعیین طول و عرض و مکان به یک تصویر بکگراند، امکان استفاده از یک عکس برای تولید چندین پس زمینه مختلف را میدهد. Css Sprite برای ایکون ها و تصاویر کوچک طراحی شده است و استفاده از آن در تصاویر بزرگ میتواند تمام مزیت هایی که برای Css Sprite ذکر کرده ایم، را از بین ببرد و در نهایت سرعت بارگذاری سایت را افزایش دهد.


نظرات (اولین نفری باشید که نظر می دهد)
 مقالات مرتبط
بردکرامب (Breadcrumb) چیست و چه تاثیری بر روی سئو دارد؟
اهمیت طراحی سایت ریسپانسیو برای موفقیت وبسایت
3 راه برای کسب درآمد آنلاین از وب سایت
PWA یا وب اپلیکیشن های پیش رونده چه هستند
چگونه سایت مان را با ابزار AMP  گوگل تست کنیم
مقایسه وردپرس با سیستم مدیریت محتوای اختصاصی
10 دلیل برای عدم استفاده توسعه دهندگان وب از وردپرس
 دسته بندی مقالات
آموزش طراحی سایت
آموزش سئو و بهینه سازی سایت
آموزش بازاریابی اینترنتی
اخبار تکنولوژی
ویدئوهای آموزشی
دسترسی سریع
  • خدمات رپورتاژ آگهی
  • خدمات تولید محتوا
  • مقالات
  • نمونه کارهای طراحی سایت
  • خدمات
  • نمونه کارهای سئو
  • اخبار
  • درباره ما
  • تماس با ما
خدمات وب 24
  • تبلیغات در گوگل
  • سئو و بهینه سازی سایت
  • طراحی سایت فروشگاه اینترنتی
  • طراحی سایت صنعتی
  • طراحی سایت گردشگری
  • طراحی سایت خبری
  • طراحی وب سایت تبلیغاتی
  • طراحی سایت شرکتی
تماس با ما
  • آدرس شرکت: خیابان گاندی، کوچه دهم، پلاک 4، زنگ سوم تهران
  • تلفن تماس: 86086864 - 02186086906
  • تلگرام: 09027362447
وب 24 در شبکه های اجتماعی
آدرس شرکت وب 24
  • طراحی سایت
  • قیمت طراحی سایت
  • مقالات
  • خدمات سئو
  • سفارش سئو
  • تعرفه تولید محتوا
  • تعرفه رپورتاژ آگهی
  • مشاوره سئو
  • درباره ما
  • تماس با ما

طبق ماده 12 فصل سوم قانون جرائم رایانه هرگونه کپی برداری ممنوع بوده و پیگرد قانونی دارد

تمام حقوق نزد شرکت طراحی سایت وب 24 محفوظ است

  • ۰۲۱۸۶۰۸۶۸۶۴
  • ثبت نام در باشگاه مشتریان وب 24
  • نمونه کارهای وب 24
  • ثبت سفارش در وب 24
  • ارتباط از طریق تلگرام
  • آدرس صفحه ی اینستاگرام وب 24
 ثبت سفارش