ایجاد css sprite در یک دقیقه

- visibility ۴ mode_comment

سلام به تمام دوستان امروز می خواهم ابزار بسیار مفید و آنلانی رو بهتون معرفی کنم که با صرف زمان بسیار کوتاه تصاویر وبتون رو بصورت sprite در آورید.

همونطور که می دونید استفاده از این تکنیک باعث کم شدن در خواست های مرورگر به سرور برای لود تصاویر متعدد سایت در نتیجه افزایش سرعت لود شدن صفحات وب شما در مرورگرها میشه.

بعد از ورود به سایت این ابزار از منوی بالا رو گزینه sprite map کلیک کنید و گزینه new spritemap رو انتخاب کنید, توسط منوی size map هم میتونید اندازه سند ایجاد شده رو تغییر بدهید.

info نکته :

عرض سند ایجاد شده بهتر است برابر با عرض بزرگترین تصویر استفاده شده در سایت شما باشد

حالا نوبت به قرار دادن عکس ها در سند ایجاد شده می باشد.یکی از خصوصیات جالب این ابزار امکان Drag and Drop بودن آن است یعنی شما نیازی ندارید تا تصاویرتون رو در آن لود کنید تنها کافیه عکس مورد نظر رو بکشید و در سند رها کنید تا ازش استفاده کنید.

به محض قرار دادن تصویر در سند در ستون سمت راست کدها ی sprite تصویر مورد نظر ایجاد میشه که شامل  نام تصویر ,موقعیت(position) تصویر در سند ایجاد شده و طول و عرض تصویر می باشد .

بعد از قرار دادن تصاویر مورد نظرتون از منوی بالا روی Download کلیک کنید تا فایل css sprite که ایجاد کردین رو سیستمتون ذخیره کنید.

حال اگر فایل دانلود شده رو مشاهده کنید می بینید که شامل یک فایل css و یک تصویر از تمام تصاویر مورد استفادتون با اسم sprite درش موجوده که در این مرحله این تصویر رو در پوشه تصاویر وب سایت یا وبلاگتون کپی کرده و توسط کد های موجود در فایل sprite.css موقعیت تصاویر رو اعمال کنید.

 

مثال:

فرض کنید در سایت شما و در پوشه تصاویر ,2 تصویر با نام  های 7learn.png و 7learn-logo.png دارید و اون رو در سایتتون به حالت زیر قرار دادید.

کدهای مرحله اول:

 

حالا اگر این تصاویر رو توسط ابزار که معرفی کردم به حالت sprite در بیارید کد های زیر رو براتون ایجاد می کنه ,که کد مربوط به position بر میگرده به مکانی که  تصویری که شما  در سند sprite ایجاد شده در ابزار فوق قرار داده اید مال من بصورت زیر هست:

کدهای مرحله دوم که توسط ابزار ایجاد شد:

 

 

sprite3

 

حالا تنها کافیه که کدهای مرحله اول رو به صورت زیر تغییر بدید:

 

 

info نکته :

اگر دقت کرده باشید ما به کدهای ایجاد شده توسط ابزار آدرس تصویر sprite.png رو که ایجاد کردیم و در پوشه تصاویر سایتمون قرار داده بودیم رو اضافه کردیم و باز هم تاکید میکنم که خاصیت background-position تصاویر شما قطعا با تصاویر من فرق خواهد داشت.

حتما در سند ابزار فاصله میان تصویر رو رعایت کنید و تصاویر رو روی هم قرار ندهید ...

info نکته :

اگر در سایت مذکور عضو شوید امکان ذخیره فایل هایی رو که ایجاد کرده اید رو خواهید داشت

 

امیدوارم که این مطلب مورد استفاده شما عزیزان قرار بگیره که حتما خواهد گرفت.

comment دیدگاه کاربران
m.yMJJ

من خیلی وقته از این سایت استفاده میکنم ، واقعا فوق العاده هست .

تنها مشکلی که باهاش داشتم این بود که بعضی تصاویر رو در خروجی به صورت تار و بهم ریخته نشون میده (موقعی که دانلود میشه) .

کافیه اون عکس رو با یک فرمت یا حجم دیگه استفاده کنید . شاید این مشکل براتون پیش بیاد که این راه حلش هست ….

محمد اسفندیاری

مرسی از آموزشهای خوبتون.

علی

با عرض سلام، ممنون از آموزش خوبتون بنده کلیه ی محتوای این نوشته را متوجه شدم به جز اینکه ما بعد از دانلود فایل تصاویر و css این دو فایل را دقیقا کجای وب سایت خود قرار بدهیم؟ در کدام پوشه ی هاست ؟؟ ممنون میشم کمکم کنید و جوابم رو بدید.
😥

وحید صالحی

سلام فایل تصویر رو باید در پوشه تصاویر قالبتون قرار بدید و کدهای درون فایل استایل رو هم باید خواصیت های position رو که مربوط به هر تصویر هست رو برای اون عنصری که تصویر مربوط بهش هست رو در فایل استایل قالبتون کپی کنید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.