مقدمه ای بر CSS sprites برای dummies. CSS sprites مثال Css sprites

من بیش از یک دهه است که در ساخت ابزار و موتور برای هنرمندان بازی و جلوه‌های بصری کار کرده‌ام و همیشه از تمایز مردم بین «هنر نرم‌افزار» و «هنر واقعی بازی» متحیر بودم. من همچنین متوجه شده ام که افرادی که به شما اجازه عبور رایگان از گرافیک بد را می دهند، بیشتر برنامه نویسان دیگر هستند. مهم نیست که بازی شما چقدر سرگرم کننده است یا دموی شما چقدر از نظر فنی شگفت انگیز است، غیر برنامه نویسانی که شخصیت خود را به آنها نشان می دهید، فکر می کنند، "آیا او جت ​​پک دارد یا چیز دیگری است؟" اغلب، شما می توانید راهی برای ایجاد گرافیک خوب بدون نیاز به ترسیم آنها از ابتدا پیدا کنید. اما گاهی اوقات شما نیاز به ایجاد گرافیک در پرواز دارید. محدودیت‌های بودجه یا قوانین در یک مسابقه بازی، یا صرفاً ضرب‌الاجل محدود برای نمونه اولیه، ممکن است شما را ملزم به برداشتن خط‌کش و قلم مو کند.

من نمی توانم نقاشی بکشم ، واقعاً ... می خواهم بگویم ، به این نگاه کنید:

اگر گرافیک شما اینگونه است، پس این مقاله برای شما مناسب است. فکر کردم نکاتی را در مورد چگونگی بهتر کردن گرافیک خود به اشتراک بگذارم. این نکات صرف نظر از توانایی ها و تجربه طراحی برای همه مفید خواهد بود.

در حالی که نکاتی مانند «هر روز طرح‌ریزی» یا «بازدید از موزه هنر» می‌تواند برای یک هنرمند مشتاق مفید باشد، این مقاله برای یک هنرمند نیست، بلکه درباره این است که چگونه مردم را وادار کنید فکر کنند شما یک کدنویس، یک برنامه‌نویس، یک سرگرمی هستید. ریاضیات، دارای برخی از توانایی های هنری است.

همچنین، هیچ یک از این نکات (تقریباً) به "تمرین" نیاز ندارد، اگرچه تمرین برای یک هنرمند واقعی مفید و حتی ضروری است. همیشه به نظر می رسد که ضرب الاجل یک پروژه در سپیده دم فرا می رسد و تنها چیزی که نیاز دارید چند اسپرایت لعنتی است.

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

برخی از این موارد نیز برای شرکت کنندگان در مسابقات LudumDare و سایر مسابقات مشابه که هدف آن ایجاد یک بازی در پرواز در 48 ساعت است، انجام می شود. بازی‌های من در رده گرافیکی امتیاز خوبی کسب می‌کنند (افسوس، قاتل گیم‌پلی همچنان از من فرار می‌کند)، حتی اگر خودم را هنرمند بازی خوبی نمی‌دانم. بسیاری از این نمونه‌ها از ورودی‌های LD من می‌آیند، و بیشتر این تجربیات چیزهایی هستند که از شرکت در این مسابقات و مجبور شدن به خلق آثار هنری در مهلت‌های بسیار فشرده یاد گرفتم. علاوه بر این، آنها باید برای هر کسی که سعی در ایجاد گرافیک با کیفیت (یا چیزی نزدیک به آن) در یک برنامه زمانی کوتاه یا بودجه محدود دارد، ارزشمند باشند.

رایج‌ترین اشتباهی که می‌بینم و ساده‌ترین اشتباه برای اجتناب از آن. پالت پیش‌فرض برای اکثر برنامه‌های طراحی کامپیوتری به روزهای DOS برمی‌گردد (آیا می‌توانید ارتباط بین رنگ‌های این پالت و مقادیر باینری چهار بایتی از 00 تا 15 را تشخیص دهید؟ البته اینطور است. اگر می‌توانید؟ اگر آن را ببینید، یک هنرمند واقعی خواهید بود.).

منظور من از پالت، پالت رنگی 16 یا 256 بار VGA نیست. منظور من فقط یک سیستم هماهنگ برای بازی شماست. اگر با یک پالت خوب شروع کنید، "doodles" شما از نظر زیبایی شناسی دلپذیر و حتی از قبل طراحی شده به نظر می رسد.

اما کجا می توانم یک پالت پیدا کنم؟ من حتی صبح که لباس می پوشم نمی توانم رنگ ها را انتخاب کنم!

خوب، کمی تئوری رنگ خیلی پیشرفت می کند و اگر پانزده دقیقه وقت بگذارید و در اینترنت جستجو کنید «تئوری رنگ» چیست، در نهایت به تعریف بازی خواهید رسید. اما اگر برای این کار وقت ندارید، در اینجا نکاتی وجود دارد که به طرز شگفت انگیزی کار می کنند:

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

این مثال از یک پالت "تک رنگ" استفاده می کند، که در آن رنگ ها همه سایه های مختلف با یک تن بسیار مشابه هستند، سایر طرح های رنگی متنوع تر هستند، اما نکته مهم این است که رنگ ها در کنار هم خوب به نظر می رسند.

منابع:

1. MultiColr از آزمایشگاه های ایده
   خوبی این سایت عالی این است که می توانید یک پالت بسازید و با انتخاب چند رنگ دلخواه و تصویری که می توانید از آن رنگ ها استفاده کنید، تعداد زیادی عکس از آن داشته باشید.

من نمی توانم نقاشی کنم!..

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

از آنچه در دسترس شماست استفاده کنید. آیا روی میزتان چیزهای مزخرفی دارید؟ شاید یکی از محبوب ترین بازی های تمام دوران را ساخته باشید "دفاع برج دسکتاپ".

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

نکته سوم: شکل ها و سیلوئت های ساده

دایره، مربع، مثلث، لوزی، ذوزنقه، متوازی الاضلاع و غیره. شما می دانید که چگونه مساحت آنها را به طور دقیق محاسبه کنید، اما می دانید که ترسیم آنها ضعیف است؟ چند شکل را با دست ترسیم کنید، سپس چشم (برای شخصیت) یا چرخ (برای وسیله نقلیه) یا هر چیز دیگری اضافه کنید. آنها ممکن است خنده دار و پوچ و کاملاً نادرست باشند.

بسته به میزان قهوه ای که قبلاً نوشیده اید، آنها می توانند شکل های کاملاً متفاوتی داشته باشند. همه چیز خوب است! این در واقع چیز خوبی است، زیرا عیوب و تنوع "فردیت" ایجاد می کند و آنها را زنده می کند. از ابزارهای شکل دهی در برنامه طراحی خود استفاده نکنید، این یک نابودگر روح جن است. با متمایز کردن خطوط آنها، تشخیص بصری آنها را برای بازیکن آسان تر می کنید.

یک نکته: سعی نکنید در طول مسابقه نویسندگی بازی متوجه این موضوع شوید. قبل از انجام هر کاری ابتدا همه چیز را تست کنید تا دقیقا بدانید چگونه باید چه کاری را انجام دهید. شما زمان زیادی را صرف خواهید کرد، اما در طول یک مسابقه فقط 15-20 دقیقه طول می کشد و تفاوت زیادی ایجاد خواهد کرد.

و همچنین، تا زمانی که بافت‌های مدل‌ها را تمام نکرده‌اید، برای پخت عجله نکنید. شما نمی توانید "پخت" را حذف کنید یا آن را دو بار انجام دهید.

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

حتی اگر هیچ آرزویی برای تبدیل شدن به یک هنرمند بازی ندارید، اگر مقداری هنر روی رایانه بکشید، باید یک تبلت بخرید. لازم نیست که بزرگ یا گران باشد؛ می توانید یک تبلت از Wacom خریداری کنید. زیرا طراحی با موش شبیه به نقاشی با آجر روی کاغذ است.

بسیاری از افرادی که می شناسم برای اولین بار تبلت خریدند، در استفاده از آن کند بودند. در اینجا نکاتی وجود دارد که به شما کمک می کند تا از تبلت خود بیشترین بهره را ببرید.

• در کنترل پنل تبلت، حساسیت قلم را تا تنظیم محکم‌تر افزایش دهید. این بهترین کنترل را هنگام ترسیم فراهم می کند.
• طراحی با استفاده از یک ورق کاغذ خالی کاملاً احساس را تغییر می دهد. انواع کاغذ: کاغذ اداری، صفحات مجله، کاغذ ضخیم و غیره. - به شما کمک می کند تا طراحی روی تبلت را به طور کامل تجربه کنید. آن را امتحان کنید.
• تمرین. من می دانم که قبل از اینکه بگویم هیچ یک از توصیه های من نیاز به تمرین نداشت - دروغ گفتم. این تمرینات را امتحان کنید:
• ده مربع را پشت سر هم در فتوشاپ ایجاد کنید و آنها را با شعاع شفافیت صفر تا صد با رنگ مشکی پر کنید. ده مربع خالی زیر آنها درست کنید. سعی کنید مربع های پایینی را سایه بزنید تا مربع های اصلی ردیف شوند. با برس های دیگر امتحان کنید و با حساسیت فشار قلم تمرین کنید.
• سعی کنید چیزی بنویسید، الفبا یا فقط متن. با اندازه حروف بزرگتر شروع کنید و سپس به سمت پایین حرکت کنید. این کار باعث می شود که دست شما به تبلت عادت کند و همچنین چشمان شما به صفحه نمایش هنگام کشیدن نقاشی عادت کند.

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

در بخش اخبار، ترجمه رابط کاربری sprite generator را اعلام کردم - یک برنامه مرورگر رایگان که برای ایجاد CSS sprites طراحی شده است که فناوری پیشرفته جدیدی را برای افزایش سرعت بارگذاری صفحات وب پیاده سازی می کند. این بررسی به دو برنامه دیگر برای ایجاد خودکار (تولید) sprites می پردازد که به طور موثر و مؤثر تصاویر را در sprites CSS ترکیب می کنند. برنامه های شرح داده شده به شما این امکان را می دهند که نه تنها به راحتی و به سادگی sprite های CSS ایجاد کنید، بلکه اسنیپت های سبک را با مختصات sprite نیز ایجاد کنید، که این امکان را نیز به شما می دهد که به راحتی و به سادگی Sprites های CSS را در یک صفحه وب قرار دهید.

اما ابتدا کمی در مورد CSS sprites. آنها را اغلب وب اسپرایت، html sprites نیز می نامند. اولین باری که با این فناوری آشنا شدم زمانی بود که تصمیم گرفتم سرعت بارگذاری صفحات خود را بررسی کنم. صفحات من کوچک هستند، به خصوص با هیچ چیزی بیش از حد بارگذاری نمی شوند و خیلی سریع باز می شوند. با این حال می خواستم بررسی کنم. ابزار سرعت صفحه گوگل و ابزار مشابه YSlow یاهو لیستی از توصیه ها را برای بهبود سرعت بارگذاری صفحه به من ارائه کردند. از جمله این توصیه‌ها، تمایل به ترکیب تصاویر ارسال شده در سایت به صورت sprites بود. آشنایی من با CSS sprites اینگونه آغاز شد.

css sprites چیست و چگونه از آنها استفاده کنیم؟ اساس این روش ترکیب بسیاری از تصاویر قرار داده شده در یک صفحه وب در یک تصویر موزاییک ترکیبی است. شرط اصلی ایجاد و استفاده از CSS sprites، امکان استفاده از این مجموعه تصاویر به عنوان درج پس زمینه در صفحه است. به طور معمول، این تصاویر نشان‌دهنده لوگوها، نمادها، دکمه‌ها و دیگر عناصر ناوبری و کنترل گرافیکی مختلف هستند. اگر این تصاویر را می توان نه تنها به عنوان گرافیک با برچسب استفاده کرد ، بلکه به عنوان تصاویر پس زمینه با یک ظاهر طراحی شده است تصویر پس زمینه: آدرس اینترنتی (xxxxxxxx...)، سپس ایجاد و استفاده از css sprites خود را نشان می دهد (توجه داشته باشید که امکان ذکر شده تقریباً همیشه در دسترس است). برخی از منابع (چه خارجی و چه داخلی) تصویر ترکیبی هدف را یک sprite اصلی، گاهی اوقات یک صفحه sprite می نامند. من نیز به این اصطلاح پایبند خواهم بود. استفاده بیشتر از تصویر خاص مورد نیاز ما از Master sprite در صفحه وب با استفاده از موقعیت یابی با استفاده از CSS انجام می شود. کل ترفند این فناوری کاهش قابل توجه درخواست های HTTP برای دانلود تصاویر است. به جای چندین (گاهی ده‌ها یا بیشتر) درخواست برای دانلود تک‌تصاویر، تنها یک درخواست برای دانلود این تصویر موزاییک ترکیبی وجود دارد. با وجود اندازه بزرگتر این تصویر، زمان بارگذاری آن به طور غیرقابل مقایسه ای کمتر از زمان مورد نیاز برای بسیاری از درخواست های HTTP برای تصاویر تک و دانلود آنها است. استفاده از CSS sprites به شما این امکان را می دهد که سرعت بارگذاری تصاویر را به میزان قابل توجهی افزایش دهید؛ بر این اساس، خود صفحه که در آن از CSS sprites استفاده می شود، در مرورگر بسیار سریعتر باز می شود. نکته برجسته دیگر این روش اجرای بسیار ساده افکت رول اور تصاویر بدون استفاده از اسکریپت (فقط با استفاده از CSS) است که می تواند برای ایجاد منوهای موثر و شیک، دکمه های کنترلی و سایر عناصر گرافیکی مورد استفاده در وب سایت ها مفید باشد.

به هر حال، در مورد CSS. استفاده از تصاویر خاص منفرد در صفحه که تصویر ترکیبی ترکیبی را تشکیل می دهند با استفاده از ویژگی انجام می شود موقعیت پس زمینه. این ویژگی موقعیت افقی و عمودی تصویر پس زمینه را در عنصر مورد استفاده برای قرار دادن آن تعیین می کند. مقادیر ویژگی می تواند کلمات کلیدی یا مقادیر مشخص شده در پیکسل یا درصد باشد. هنگام استفاده از CSS sprites، معمولاً از مقادیر دقیق پیکسل استفاده می شود. مقدار اول مختصات افقی (x) و دومین مقدار مختصات عمودی (y) است. طبق مشخصات CSS، این ویژگی برای عناصر در سطح بلوک و جایگزین اعمال می شود. در عمل، اسپرایت ها اغلب در عناصر درون خطی استفاده می شوند ، که با استفاده از ویژگی بلوک ساخته شده است نمایش: بلوکبرای تنظیم عرض و ارتفاع برای این عناصر، ویژگی پس زمینه با مختصات لازم (پس زمینه-موقعیت) تنظیم شده است. به طور خلاصه و تقریبی، اینها مختصات (موقعیت) تصویر کوچکی است که ما روی بوم بزرگ تصویر کلی ترکیبی اسپرایت به آن نیاز داریم. به لطف این ویژگی و ارتفاع و عرض مشخص شده عنصری که در آن اسپرایت استفاده شده است، تجسم تصویر مورد نیاز ما در این عنصر تضمین می شود. من بر روی این واقعیت تمرکز می کنم که ملک موقعیت پس زمینهتحویل تصویر مورد نیاز ما (به شکل یک عنصر بلوک) را تضمین می کند، گویی از sprite اصلی بریده شده است، به صفحه وب. قرار دادن همین تصویر در مکان مناسب در صفحه به عهده نشانه گذاری یا نشانه گذاری سنتی HTML با استفاده از شناسه ها، کلاس ها یا انتخابگرهای ساده با ویژگی های لازم CSS است. (موقعیت، شناور، حاشیه و موارد دیگر)- در اینجا خیلی به تجربه ای که دارید و ترجیحات شما بستگی دارد. اگر تعجب می کنید که چرا این ویژگی هنگام استفاده از CSS sprites اعمال می شود زمینه، سپس به شما یادآوری می کنم که فناوری CSS sprites شامل قرار دادن آنها در صفحات وب سایت دقیقاً به عنوان درج پس زمینه است. علاوه بر این، نه تنها ویژگی background-position مورد نیاز است، بلکه یک تصویر پس‌زمینه نیز لازم است که مسیر را به master sprite و در صورت لزوم، سایر ویژگی‌های پس‌زمینه را نشان دهد. برخی از مثال‌ها، از جمله استفاده از املای مختصر ویژگی پس‌زمینه، در فهرست‌های سبک زیر قابل مشاهده است.

کاربرانی که با CSS آشنا هستند ممکن است متوجه شوند که موقعیت یابی CSS sprites بسیار ظریف تر و پیچیده تر است. بله همینطور است. اگر مکان sprite با واحدهای دقیق (px) مشخص شده باشد، آنگاه آنها به عنوان جابجایی از گوشه سمت چپ بالای ناحیه padding عنصر تفسیر می شوند. نقطه ای که نسبت به آن افست اندازه گیری می شود، گوشه سمت چپ بالای تصویر منبع است.

قابل فهم ترین توضیح را در مورد موقعیت یابی پس زمینه در صورت مشخص کردن مقادیر دقیق ویژگی پس زمینه در وبلاگ پیدا کردم که از آنجا تصویر و توضیحات زیر گرفته شده است:

« هنگام تعیین موقعیت یک تصویر پس زمینه با استفاده از واحدهای مطلق در موقعیت پس زمینه، اصل زیر برای تعیین موقعیت نهایی آن اعمال می شود. آن ها مرورگر جابجایی های مشخص شده را در امتداد محورهای X و Y از مبدا ناحیه ای که شی در آن قرار دارد تا مبدا خود این تصویر محاسبه می کند.»

هدف از این بررسی پاسخ به سوالات: نحوه ایجاد یک CSS sprite، نحوه ترکیب تصاویر در یک CSS sprite و آشنایی با سه برنامه ای است که ایجاد ساده و آسان CSS sprites (CSS Sprites) را فراهم می کند، بنابراین من صحبت نمی کنم. بیشتر در مورد خود تکنولوژی در حال حاضر مطالب معقول و دقیق زیادی در مورد این موضوع در اینترنت وجود دارد (من یک پیوند را در بالا ارائه کردم). این بررسی به کار با برنامه هایی برای ایجاد CSS sprites (مولدهای اسپرایت) اختصاص دارد، جایی که من فقط به طور خلاصه به برخی از نکات مهم (به نظر من) هنگام استفاده از sprites اشاره می کنم. فوراً رزرو می‌کنم - استفاده از CSS sprites نوشدارویی نیست و تلاش برای قرار دادن عکس‌های بزرگ از هدرها، صفحه‌نمایش‌ها و گرافیک‌هایی که در sprite استفاده می‌شوند، نیست. دقیقا مثل گرافیک، نه چگونه تصاویر پس زمینه، انجامش نده. استفاده از اسپرایت برای تصاویر دائمی که اغلب در صفحات تکرار می شوند توصیه می شود. اگر این تصاویر اغلب با تصاویر دیگر جایگزین شوند، نیاز به ایجاد spriteهای جدید و البته ویرایش CSS و HTML وجود خواهد داشت.

ژنراتورهای تجربی css sprite برنامه های رایگانی هستند CssSpriter-1.2, DoHTMLSpriteو SpriteGenerator 0.2. اگر اولین مورد از آنها اینجا و آنجا در منابع روسی زبان ذکر شده باشد، من هیچ اشاره ای به دوم و سوم در Runet ندیده ام. تقریباً تمام مولدهای CSS sprite معمولاً منابع آنلاین هستند (پیروی از روند مد روز فعلی). علاوه بر این، بیش از دو یا سه نفر از آنها روسی زبان نیستند. من برنامه ها و خدمات آنلاینی را دوست دارم که اگر نه فوراً، پس از چند بار تلاش می توانم آنها را بفهمم. از میان ژنراتورهای اسپرایت که من بررسی کرده ام، یکی را که قبلا ذکر شد بیشتر دوست داشتم. برای سادگی، راحتی، سفارشی سازی، کارایی و پیش بینی پذیری. بقیه ژنراتورها (عمدتاً آنلاین) این معیارها را برآورده نکردند (شاید بازوها کاملاً صاف نباشند یا از جای اشتباه رشد کنند یا سر به درستی چرخانده نشده باشد). یک کاربر باتجربه (اگر ناگهان در اینجا سرگردان شود) ممکن است پوزخند بزند - چرا زحمت بکشید، اگر می توان در یک ویرایشگر گرافیکی sprites ایجاد کرد و مختصات را می توان محاسبه کرد (خوب، خوب). البته که می توانید، اما من ترجیح می دهم از ابزارهای تخصصی استفاده کنم و همچنان برنامه های دسکتاپ را ترجیح می دهم * . هر سه برنامه توصیف شده تحت Windows XP SP3 آزمایش شدند. قابلیت های آنها به اندازه Instant Sprite گسترده نیست، اما بسیار شایسته توجه است.
تبصره مورخ 22.02.14. تمامی لینک‌های موجود در این مقاله که به برنامه Instant Sprite اشاره می‌کنند منجر به اطلاعیه نسبتاً مفصلی از اولین ترجمه این برنامه می‌شوند. پس از نوشتن یک مقاله جداگانه در مورد Instant Sprite، تصمیم گرفتم به آن در اینجا نیز پیوند دهم. او اینجاست - .
یک یادداشت دیگر می‌خواهم مقاله‌ای را که اخیراً نوشته شده است، اعلام کنم که رویکرد کمی متفاوت را برای تعیین مختصات و اندازه‌های sprites CSS برای قرار دادن آنها در صفحات وب نشان می‌دهد. اینم لینک این مقاله:
با این حال، اجازه دهید با بررسی خود شروع کنیم ...

Sprite Generator CssSpriter-1.2

یک برنامه کوچک رایگان (بایگانی فشرده 150 کیلوبایت) که نیازی به نصب ندارد. کار با برنامه برای ایجاد CSS sprites آسان است، رابط کاربری ساده و واضح است. دکمه‌های نوار ابزار موارد منو را کپی می‌کنند و نکات ابزار دارند. پانل سمت چپ تصاویر منبع را با اندازه و مختصات آنها در sprite آینده نمایش می دهد، پانل سمت راست نتایج برنامه را نمایش می دهد (یک برگه خروجی CSS sprite، دومی demo-html است).

می‌توانید تصاویر را برای ترکیب کردن در یک sprite از کادر گفتگوی سیستم یکی یکی یا با انتخاب چندگانه از یک پوشه آماده با تصاویر اضافه کنید. شما همچنین می توانید تصاویر را با استفاده از روش کشیدن و رها کردن اضافه کنید. این برنامه از تصاویر ورودی در فرمت های زیر پشتیبانی می کند: ico، gif، png، bmp، jpg. فایل های فتوشاپ psdپشتیبانی نمی شوند، من فرمت های دیگر را امتحان نکرده ام - تعداد زیادی از این ها وجود دارد. من استفاده از دو فرمت آخر را توصیه نمی کنم bmpو jpg. آنها از شفافیت پشتیبانی نمی کنند، که به وضوح در لیست ریز عکسها در پانل سمت چپ و در تصویر حاصل در پانل سمت راست قابل مشاهده است (تصاویر این فرمت ها دارای پس زمینه سیاه یا حاشیه هایی در sprite هستند، همانطور که برخی از کاربران می گویند). برای اعمال چنین sprites در صفحات وب، باید عمق رنگ را کاهش دهید و شفافیت را بازنشانی کنید، که همیشه به درستی کار نمی کند. یک فرمت خروجی - png 32 بیت. برای نمایش عادی تصویر در نسخه های قدیمی اینترنت اکسپلورر، توصیه می شود تصویر را به فرمت 8 بیتی تبدیل کنید. pngو دوباره شفافیت را تنظیم کنید. در برگه دوم در سمت راست، می‌توانید نشانه‌گذاری HTML را با سبک‌های CSS تودرتو برای اعمال sprites مشاهده کنید.

با کلیک بر روی دکمه سمت چپ نوار ابزار، پروژه ما به HTML صادر می شود. سه فایل در پوشه مشخص شده برای ذخیره نتیجه ظاهر می شود:

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

نتایجی که این برنامه به ما داد مبنای اعمال sprites در صفحه شماست. البته، باید استایل‌های موجود را با استایل‌های sprite پیوند دهید، می‌توانید به جای کلاس‌ها از شناسه‌ها استفاده کنید، می‌توانید خود سبک‌های sprite را بهینه کنید، نشانه‌گذاری مورد نیاز خود را اعمال کنید، استایل‌ها را به یک فایل خارجی صادر کنید و غیره. - همه چیز به صفحه ای که در آن از sprites استفاده می کنید و همچنین به ترجیحات و مهارت های شما بستگی دارد.
با این حال، همه چیز آنقدر خوب نیست. این برنامه به نظر من یک اشکال جدی دارد. هیچ راهی برای تنظیم شکاف (تغییر، تورفتگی) بین تصاویر در sprite وجود ندارد، بنابراین هنگام مشاهده یک صفحه با مقیاس بزرگ شده یا کوچک شده، که گاهی اوقات اتفاق می افتد، ممکن است انواع همپوشانی ها رخ دهد. دومین اشکال اما کوچکتر، عدم امکان مرتب سازی تصاویر در برنامه است، بنابراین باید تصاویر را به ترتیبی که نیاز دارید در برنامه بارگذاری کنید (در واقع، این فقط به ترجیحات شما بستگی دارد؛ در نهایت، استفاده از تصویر مورد نظر با مشخص کردن مختصات آن مشخص می شود).

Sprite مولد DoHTMLSprite

درک اینکه نویسنده این برنامه کیست دشوار است، اما تقریباً تمام آرشیوهای نرم افزارهای خارجی پیوندی به http://www.downloadinn.com/dohtmlsprite.html به عنوان منبع اصلی ارائه می دهند. این همچنین یک آرشیو فایل است که در آن می توانید نویسنده نشریه - Stefan Grasutu را پیدا کنید. با کلیک بر روی این پیوند شما را به وب سایت الکساندر ترتیسکو معینی می برد - http://www.teral-soft.com. من هیچ اثری از این برنامه در سایت پیدا نکردم، بنابراین می توانید برنامه را از اولین لینک ذکر شده دانلود کنید.
برنامه رایگان کوچک (بایگانی فشرده 13 کیلوبایت) یک رابط فوق العاده زاهدانه دارد، اما چیزهای خود را نمی داند. همچنین نیازی به نصب ندارد.

الگوریتم عملیاتی به شرح زیر است:

• پوشه را با فایل های منبع مشخص کنید (پوشه باید از قبل ایجاد شده و فایل های لازم در آن قرار داده شود)
• پوشه مقصد را برای ذخیره نتایج تنظیم کنید
• یک جن ایجاد کنید

بیایید سعی کنیم از همان تصاویری که در بررسی برنامه اول استفاده شده بود یک CSS sprite بسازیم: 2 فایل gifو یکی یکی ico، bmp، jpg، pngو psd. اولین برنامه امکان دانلود همه فایل ها را به جز psdیعنی من 6 فایل از 7 فایل را دانلود کردم. ببینیم DoHTMLSprite چگونه رفتار می کند.

این برنامه 5 فایل از 7 فایل را در مقابل 6 فایل شناسایی شده توسط CssSpriter-1.2 شناسایی کرد. کدام یک هنوز ناشناخته است.
پوشه خروجی را تنظیم کرده و دکمه را فشار دهید یک جن ایجاد کنید. این برنامه با خوشحالی از ایجاد یک sprite، یک فایل css و یک فایل HTML نسخه ی نمایشی گزارش می دهد.

بیایید به محتویات پوشه خروجی نگاه کنیم. در واقع تمامی فایل های ذکر شده با نام هایی غیرقابل تلفظ در آنجا قرار دارند.

بیایید به آنها نگاه کنیم، با جن شروع کنیم. همانطور که مشاهده می کنید، فایل sprite با فرمت ساخته شده است png، در مورد عمق رنگ نیز می گویم - همان 32 بیتی که در برنامه اول وجود داشت. این بدان معنی است که تمام نظرات در مورد شفافیت برای مرورگرهای قدیمی نیز مرتبط است.
با نگاه کردن به تصویر عمودی (و شما نمی توانید جهت آن را تغییر دهید، که با این حال، اشکال قابل توجهی برای برنامه نیست)، توجه می کنیم که این برنامه از فرمت ها پشتیبانی نمی کند. icoو psdبه عنوان ورودی کاربران مرورگرهای قدیمی علاوه بر پس‌زمینه سیاه روی تصاویری که فایل‌های ورودی برای آن‌ها استفاده شده‌اند، پس‌زمینه خاکستری روی Sprite نیز مشاهده خواهند کرد. bmpو jpg، که به طور بومی از شفافیت پشتیبانی نمی کنند. با بررسی دقیق تر، می توانید متوجه شوید که اسپرایت حاوی است فواصل(تورفتگی، آفست) بین تصاویر، یعنی اشکال اصلی برنامه قبلی اینجا نیست. اگر به مختصات تصاویر درست زیر (در فایل استایل) نگاه کنید، متوجه می شوید که این شکاف 5 پیکسل است.

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

و این همان چیزی است که صفحه نمایشی (تکه ای از آن) هنگام مشاهده در یک مرورگر مدرن به نظر می رسد. این اسکرین شات همچنین شکاف‌هایی را بین تصاویر جداگانه نشان می‌دهد، اما آنها قبلاً در فایل سبک تنظیم شده‌اند (جزئیات زیر).

آخرین فایل ایجاد شده توسط برنامه، فایل استایل خارجی است.

در اینجا می توانید مختصات تمام تصاویر ما را در اسپرایت ببینید. بررسی دقیق مختصات نشان می دهد که آنها شکاف های 5 پیکسلی بین تصاویر را در sprite که دقیقاً توسط برنامه مشخص شده است در نظر می گیرند (ابعاد تصاویر 32x32px و تفاوت مختصات 37px، 37-32=5) است. . برای صفحه نمایشی، نویسنده با استفاده از ویژگی مختصر، حاشیه‌های خارجی در بالا و پایین در استایل‌ها را نیز روی 5 پیکسل قرار داده است (مقدار دیگری را می‌توان تنظیم کرد). لبه. هنگام مقایسه صفحات HTML دمو ایجاد شده توسط برنامه های اول و دوم، می توانید ببینید که سبک های استفاده شده چگونه بر قرارگیری تصاویر در صفحه تأثیر می گذارد. برخی از کاربران استفاده می کنند لبهبه عنوان یک ابزار اضافی برای جلوگیری از همپوشانی‌های غیرمنتظره هنگام بزرگ‌نمایی صفحه هنگام مشاهده. این احتمالاً هنگام ایجاد و بهینه‌سازی استایل‌ها برای sprite ایجاد شده توسط برنامه اول مفید خواهد بود، جایی که هیچ شکافی بین تصاویر در sprite وجود ندارد. با ایجاد و بهینه‌سازی استایل‌ها برای اسپرایت‌هایتان، خودتان تصمیم می‌گیرید به چه ویژگی‌هایی نیاز دارید و چگونه از آنها استفاده کنید.

می‌خواهم توجه داشته باشم که برنامه در ابتدا یک سبک فشرده یک خطی ایجاد می‌کند و یک واحد اندازه‌گیری (px) را بعد از مختصات صفر قرار نمی‌دهد؛ صفر در آفریقا صفر است، چه برحسب پیکسل یا کیلوگرم. برخی از خدمات آنلاین برای ایجاد CSS sprites چنین تفکری ندارند.

نتیجه گیری

هیچ نتیجه گیری در مورد استفاده از برنامه های بررسی شده وجود نخواهد داشت. خودتان آنها را خواهید ساخت. من تمام آنچه را که خودم مرور کردم با جزئیات کافی شرح داده ام، بقیه به شما بستگی دارد. برای پایان دادن به این بررسی طولانی، چند پیشنهاد تصادفی و نکات اختیاری برای استفاده از CSS sprites را به اشتراک می‌گذارم.

• سعی نکنید فقط یک sprite برای همه موارد ایجاد کنید و تمام تصاویر استفاده شده در صفحات خود را در آن قرار دهید، این کار تنظیمات HTML و CSS را در صورت لزوم در آینده پیچیده خواهد کرد.
• ایجاد sprite برای عناصر گرافیکی که اغلب تکرار می شوند مانند آرم ها، نمادها، دکمه ها و سایر عناصر ناوبری و کنترل
• سعی کنید از تصاویر با اندازه یکسان اسپرایت بسازید (بهتر است نه یک اسپرایت از تصاویر با اندازه های مختلف، بلکه چندین اسپرایت بسازید، اما هر یک از تصاویر یک اندازه هستند)، این به بهینه سازی سبک های استفاده شده کمک می کند. یک مثال را در زیر نشان دهید)
• از تصاویر در فرمت هایی که به طور بومی از شفافیت پشتیبانی نمی کنند برای ایجاد sprites استفاده نکنید (استفاده از تصاویر ورودی در قالب ها صحیح تر و بهتر است. gifو png، و برای برنامه اول و Instant Sprite ذکر شده نیز می توانید استفاده کنید ico)
• برای پشتیبانی از شفافیت فایل های خروجی PNGدر مرورگرهای قدیمی، آنها را به فرمت 8 بیتی یا به تبدیل کنید GIF(هک های CSS نیز وجود دارند که می توانند این مشکل را برای png حل کنند، اما این موضوع بررسی امروز نیست)
• بهینه سازی سبک ها (می توانید از خدمات آنلاین، برنامه ها، TopStyle، Rapid CSS و غیره استفاده کنید یا به صورت دستی ویرایش کنید)
• بهینه سازی sprites - استفاده از سرویس آنلاین TinyPNG (http://tinypng.org) یا برنامه بسیار راحت و مؤثر است. شورش، بررسی شده در (به شدت آن را توصیه می کنم)
• از sprites برای یک روش ساده و زیبا برای جابجایی تصاویر در صفحات خود بدون استفاده از اسکریپت استفاده کنید
• و در سفری طولانی... پرچم در دستان تو... به پیش و با آهنگ...

P.S. در مورد بهینه سازی سبک ذکر شده

من فقط یک نمونه از بهینه سازی ممکن را در هنگام استفاده از تصاویر هم اندازه در نظر خواهم گرفت. بیایید با استفاده از DoHTMLSprite یک اسپرایت آزمایشی از تصاویر هم اندازه ایجاد کنیم و سبک های ایجاد شده را ببینیم.

اولا، من نیازی به padding اضافی ندارم، بنابراین آن را از فایل استایل حذف می کنم. ثانیاً، همه عکس‌های من یک اندازه هستند، بنابراین هیچ چیز مانع من نمی‌شود که فقط یک بار اندازه‌ها را به سبک خود استاد اسپرایت ثابت کنم. این چیزی است که اتفاق افتاد.

حجم فایل از 1403 بایت به 749 بایت (تقریباً 2 برابر) کاهش یافته است و همه چیز عالی کار می کند. اگر به این دو اسکرین شات دقت کرده باشید، احتمالاً می‌بینید که من فضاهای اضافی و نیم‌ویرگول‌های اختیاری را قبل از بسته شدن پرانتز حذف کردم. برای مقایسه بصری، من همچنین سبک را برای sprite اصلی که قبلاً مورد بحث قرار گرفت، بهینه کردم. این همان چیزی است که هنگام مشاهده در مرورگر اتفاق افتاد.

اگر اسکرین شات ها را با هم مقایسه کنید متوجه تفاوت خواهید شد. شکاف بین تصاویر در صفحه، که توسط ویژگی مشخص شده است، ناپدید شده است (حاشیه: 5 پیکسل 0). من تصمیم گرفتم که به آنها نیازی ندارم (اسپرایت ها در مکان های مختلف صفحه قرار می گیرند، و نه در یک ردیف، مانند نمونه آزمایشی). در عین حال، شکاف های موجود در خود تصویر sprite که توسط برنامه ایجاد شده است، در هیچ کجا ناپدید نشده اند و به عنوان یک شبکه ایمنی برای ما در هنگام مقیاس بندی سفارشی احتمالی صفحه هنگام مشاهده در مرورگر عمل می کنند.

بالاخره آخرین مورد

در میان سرویس‌های تبلیغاتی گسترده برای ایجاد CSS sprites، یکی از آنها برجسته است Sprite Me. به طور خودکار تصاویری را پیدا می‌کند که می‌توانند در sprites ترکیب شوند و توصیه‌های فوری برای سازماندهی مجدد فایل‌های سبک و نشانه‌گذاری HTML ارائه می‌کند. آن را امتحان کنید. من یک بار با آن شروع کردم و این سرویس به من کمک کرد تا ماهیت استفاده از اسپرایت را درک کنم. اما، متأسفانه، او فقط 20٪ از تصاویر را در صفحات من پیدا کرد که از آنها می توان اسپرایت ایجاد کرد. به همین دلیل است که من بیش از یک بار به آنچه اشاره شد رفتم و همین آرزو را برای شما دارم. از بین بسیاری از تصاویر ارسال شده در صفحات من، همه تصاویر پس زمینه جن هستند. علاوه بر این، دکمه‌های کنترلی (مانند آپلود یک فایل، اسکرول کردن صفحه، مشاهده اسکرین‌شات یا ویدیو) با استفاده از افکت رول‌اور با استفاده از CSS از sprite ساخته می‌شوند.
همه!

به نوعی نمی توانم بررسی را تمام کنم. من به تازگی آن را منتشر کردم و یک روز بعد یک مولد دیگر css sprite پیدا کردم.

Sprite Generator SpriteGenerator 0.2.

همچنین آنلاین نیست، بلکه یک برنامه Win است. یک برنامه کوچک، به ظاهر منبع باز، که تحت یک مجوز عمومی مایکروسافت توزیع شده است. این برنامه دارای یک رابط نسبتا ساده و بصری است.

بیایید مسیر همان پوشه را با تصاویر آزمایشی برای برنامه هایی که قبلاً مورد بحث قرار گرفته است نشان دهیم. بیایید پوشه را برای خروجی sprite مشخص کنیم، سپس همان پوشه را برای خروجی فایل CSS مشخص کنیم.
این برنامه به شما امکان می دهد طرح بندی را برای جن آینده انتخاب کنید: افقی، عمودی، مستطیلی و به صلاحدید برنامه (انتخاب خودکار). با نگاهی به آینده، من می گویم که وقتی تصاویر ورودی زیادی وجود دارد، برنامه خود طرح بندی خودکار را تنظیم می کند - گزینه های باقی مانده غیرفعال می شوند و اسپرایت حاصل مستطیل شکل است. این برنامه به شما امکان می دهد فاصله بین تصاویر را تنظیم کنید و تورفتگی ها را تنظیم کنید. پارامترهای نشان داده شده در تصویر را انتخاب کنید و دکمه را فشار دهید ايجاد كردن. برنامه در جایی بدون گزارش پرواز می کند. بیایید به پوشه خروجی نگاه کنیم.

این برنامه دو فایل ایجاد کرد: یک فایل سبک و یک sprite با فرمت PNG 32 بیتی (من نام آنها را هنگام تعیین پوشه خروجی مشخص کردم). این برنامه یک صفحه نمایشی ایجاد نکرد. بیایید به اسپرایت نگاه کنیم.

چیزی که بلافاصله توجه شما را جلب می کند: از 7 عکس فقط 4 عکس باقی مانده است. معلوم می شود که برنامه فایل ها را نمی پذیرد bmp، در تصویر با فرمت ورودی jpgتکه‌ای از پس‌زمینه مشکی نیز قابل مشاهده است و کاربران مرورگرهای قدیمی‌تر نیز پس‌زمینه‌ای مایل به خاکستری را در تصاویر دیگر مشاهده خواهند کرد. باز هم من sprite را بهینه نکردم یا شفافیت را تنظیم نکردم. دومین موردی که باید به آن توجه کرد این است که در اطراف هر تصویر شکاف هایی وجود دارد - این قابل انتظار است زیرا برنامه از یک طرح مستطیلی پشتیبانی می کند. اما شکاف بین تصاویر و حاشیه بیرونی به وضوح بزرگتر از شکاف بین خود تصاویر است. وقتی نگاهی به فایل استایل بیندازیم همه چیز مشخص می شود.

اولین چیزی که در اینجا باید به آن توجه کرد این است که برنامه به جای تعیین نام های بدون چهره در برنامه های مورد بحث در بالا، نام تصاویر ورودی را ذخیره کرد. دوم، تورفتگی که گذاشتیم، چون من آن را ملک دانستم لبه، در فایل سبک نیست. به نظر می رسد که هر دو گزینه برای تنظیم شکاف در برنامه به خود تصویر مربوط می شود: یکی (فاصله بین تصاویر) شکاف بین خود عکس ها را تعیین می کند، دوم (عرض حاشیه) - بین تصاویری که اسپرایت را تشکیل می دهند و آن مرز بیرونی اگر به خواص نگاه کنید موقعیت پس زمینهدر فایل style می بینید که هر دو نوع فاصله ذکر شده را در نظر می گیرد. بیایید خودمان یک صفحه وب دمو ایجاد کنیم، از جمله تورفتگی های مختلف در فایل سبک برای وضوح (ما در مورد تورفتگی در فایل سبک برای وضوح در موقعیت تصاویر در صفحه صحبت می کنیم).

من عمداً هنگام مشاهده در IE6 اسکرین شات گرفتم تا بتوانید پس زمینه مات تصاویر را ببینید. قبلاً در مورد نحوه جلوگیری از آن برای مرورگرهای قدیمی صحبت کرده ام. در مرورگرهای مدرن همه چیز خوب به نظر می رسد، به جز فرمت تصویر ورودی jpg، که به صورت بومی از شفافیت پشتیبانی نمی کند، در اینجا پس زمینه سیاه است.
برای علاقه مندان، در اینجا اسکرین شات هایی از فایل های HTML و CSS برای آخرین نمونه آورده شده است.

نتیجه

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

من برنامه های ذکر شده در بررسی را روسی نکردم؛ آنها بدون ترجمه کاملاً ساده و قابل درک هستند. خوشحال خواهم شد که این بررسی برای کسی مفید باشد. (UPD - من بعداً کوچکترین و ساده ترین برنامه را ترجمه کردم - DoHTMLSprite. اعلام محلی سازی آن را می توانید در صفحه اخبار پیدا کنید.)

پس از انتشار این بررسی، چندین برنامه دیگر (نه خدمات) در اینترنت برای ایجاد CSS sprites پیدا کردم. اما همه این برنامه ها نسبت به برنامه هایی که در اینجا توضیح داده شده اند، پایین تر هستند. یا بر اساس عملکرد، یا با ثبات عملکرد، یا با خواص دیگر. بنابراین، من به این بررسی اضافه نمی کنم. برنامه های مورد بحث در این بررسی وظایف خود را به خوبی انجام می دهند. شما می توانید هر یک از آنها را برای ایجاد CSS sprites توصیه کنید.

احتمالاً فعلاً همین است!

ممنون که همه اینها را خواندید.

*) پیش از این، من تا حدودی در مورد ایجاد CSS sprites با استفاده از ویرایشگرهای گرافیکی شک داشتم. اما یک سری ویرایشگر رایگان گیمپبا افزونه ها CSS WebSpritesو ذخیره برای وبباعث شد نظرم عوض بشه سادگی، شهودی بودن و قابلیت‌های اضافی برای ایجاد CSS sprites و بهینه‌سازی هر دو سبک و تصاویر مرا بر آن داشت تا مقاله دیگری در این زمینه بنویسم. در صورت تمایل می توانید در صفحه با آن آشنا شوید.
همچنین توصیه می‌کنم در مقاله با رویکرد کمی متفاوت در مورد Sprites CSS و تعیین مختصات و اندازه‌های آنها آشنا شوید.

یکی از وظایف کلیدی جن CSSبهینه سازی گرافیک صفحه بارگذاری است. هدف از این بهینه سازی چیست و چرا انجام آن ضروری است؟ ایده این است: تا زمانی که صفحه بهینه شود، عناصر گرافیکی فایل های جداگانه هستند. تعداد چنین عناصری بیش از 5 یا 10 قطعه است، بنابراین، برای دانلود هر تصویر، مرورگر درخواست جداگانه ای می کند.

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

بعلاوه sprites استفاده می شودبه منظور ایجاد صحیح اثر تغییر بصری در یک عنصر در لحظه ای که کاربر مکان نما را روی آن قرار می دهد. عدم وجود این را می توان با مشاهده یک دکمه چشمک زن متوجه شد: دکمه دارای دو حالت است - اولیه و در لحظه شناور، بین بارگیری این حالت ها در صورت عدم سازماندهی یک مکث بسیار طولانی وجود دارد که به همین دلیل است که اثر چشمک زدن رخ می دهد.

بنابراین، بیایید به مثال‌های اساسی CSS sprites نگاه کنیم:

ما لیستی از نمادها را در یک فایل داریم. وظیفه: نمایش برخی از تصاویر به ترتیب تصادفی.

تصویر ( css-sprite-01.png) در زیر یک جن است.

پس از اعمال لیست سبک ها، نمادها به ترتیب تصادفی نمایش داده می شوند.

بیایید به این مثال با جزئیات بیشتری نگاه کنیم. وضوح تصویر اسپرایت اصلی: 200 * 200 پیکسل. تصویر اصلی به 4 قطعه تقسیم شده است که هر کدام دارای وضوح هستند 100*100 پیکسل. ما باید یک لیست در سند با شناسه css-sprite-ul ایجاد کنیم. بیایید موارد لیست را 001، 002، 003 و غیره شماره گذاری کنیم.

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

تجزیه و تحلیل سبک ها به شما این امکان را می دهد تا متوجه شوید که دقیقاً در چه مکان و چگونه قسمت هایی از این تصویر اسپرایت نمایش داده می شود.

مثال 2: تصویر با شناور تغییر می کند.

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

جن شبیه چه چیزی است:

کد html:

ابتدا یک مقدمه کوتاه. هنگام بارگذاری یک صفحه، مرورگرها فقط 2 درخواست به سرور مجاز می‌کنند (در مرورگرهای مدرن این تعداد به 6 افزایش یافته است). هر عنصر از سایت، خواه یک فایل با یک شیوه نامه، فایل های جاوا اسکریپت، تصاویر، دانلودهای مستقلی هستند که نیاز به درخواست جداگانه ای از سرور دارند.

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

مدت ها پیش (2003-2004) راه حلی برای این وضعیت با هدف اصلی افزایش سرعت بارگذاری سایت از طریق کاهش تعداد درخواست ها به سرور ارائه شد. این فناوری "Sprites" نام دارد.

CSS sprites چیست؟

Sprite CSS- فن آوری برای ترکیب تصاویر کوچک در یک. با استفاده از شیفت از طریق CSS، برش قسمت مورد نظر از تصویر حاصل می شود

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

مثال CSS Sprite

بیایید به یک مثال کوچک از پیاده سازی CSS sprite نگاه کنیم. فرض کنید تصویر زیر را از سه فلش مجزا ساخته ایم.

برای دسترسی به فلش مورد نظر در CSS باید بنویسید

این چیزی است که در صفحه به نظر می رسد:

در مثال در نظر گرفته شده از تورفتگی منفی استفاده کردیم. این کار به منظور بالا بردن تصویر انجام می شود. به عنوان مثال، sprite زیر وجود دارد:

برای برش آیکون RSS باید تورفتگی های زیر را بنویسیم

پس‌زمینه موقعیت: -90px -40px;

در مثال، تصویر را 40 پیکسل به بالا و 90 پیکسل به سمت چپ منتقل کردیم.

مزایای استفاده از اسپرایت

• کاهش تعداد تماس های سرور
• اگر از تغییرات پویا در تصویر استفاده شود (به عنوان مثال، هنگامی که ماوس را روی یک عنصر منو قرار می دهیم)، آنگاه تصویر از قبل در حافظه پنهان خواهد بود و بنابراین تاخیری در بارگذاری در زمان مناسب وجود نخواهد داشت.
• اگر پس‌زمینه تصاویر ترکیبی مشابه باشد، این کار باعث کاهش وزن کلی تصاویر نیز می‌شود

از جمله معایب جن: پیچیدگی کار در مورد کار یدی. اما خوشبختانه خدمات رایگانی وجود دارد که آماده است تا کار شما را ساده کند و همه چیز را برای شما انجام دهد.

روز بخیر، امروز می خواهم به شما بگویم که چگونه یک آیکون CSS برای وب سایت خود بسازید. بله، در موارد دیگر، نه تنها نمادها، بلکه هر عنصر دیگری، به عنوان مثال، دکمه ها، منوها و غیره. حداقل گرافیک کل صفحه فرود.

مقاله باید تحت عنوان شتاب و بهینه سازی باشد، زیرا استفاده از sprites سرعت بارگذاری صفحه را افزایش می دهد، زیرا یک تصویر، حتی با اندازه بزرگتر، سریعتر از چندین تصویر کوچکتر بارگذاری می شود. این اتفاق می افتد زیرا بازدیدهای کمتری به سرور ایجاد می شود.

برای کسانی که نمی دانند، sprite به این صورت است:

یعنی در رابطه با وب، این یک عکس با عناصر زیاد است که هر کدام به دلیل موقعیت یابی در جای مناسبی در سایت نشان داده شده است.

اما من در مقاله بعدی به این سوال می پردازم که یک صفحه با استفاده از sprites چقدر سریعتر یا کندتر بارگذاری می شود و قطعاً در دسته بندی مناسب قرار می گیرد. پس مشترک شوید توییترتا اطلاعیه مقاله را از دست ندهید.

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

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

ایجاد یک css sprite - نشانه گذاری html

اکنون باید نشانه گذاری html را ترسیم کنید. هیچ چیز غیرعادی نیست لیست نامرتب:

به جای "#"، آدرس حساب های خود را وارد کنید. عنوان را به پیوندها اضافه کنید. و بیایید به اضافه کردن سبک ها ادامه دهیم!

ایجاد css sprite – css markup

استایل های ظرف را تنظیم کنید:

سوکستی (
عرض: 270 پیکسل؛
ارتفاع: 150 پیکسل؛
حاشیه: 200 پیکسل خودکار;
پس زمینه: url(../images/bg-soc.png) no-repeat;
بالشتک: 15 پیکسل؛
}

ما سبک‌ها را برای متن و یک لیست بدون شماره توضیح می‌دهیم که آنها را به سمت چپ شناور می‌کنیم (روش استاندارد برای منوها و عناصر مشابه)

Socseti ul (
سرریز: پنهان;
عرض: 246 پیکسل؛
حاشیه: 20 پیکسل خودکار;
}

Socseti ul Li (
شناور به سمت چپ؛
margin-left:2px;
}

Socseti ul li: آخرین فرزند(
حاشیه سمت راست: 2 پیکسل
}

حالا سرگرمی شروع می شود. بیایید سبک های کلی پیوندها را تنظیم کنیم:

Socseti ul li a (
نمایش: بلوک؛
عرض: 59 پیکسل؛
ارتفاع: 59px;
}

همانطور که ممکن است متوجه شده باشید، من هنگام ایجاد sprite اشتباه جزئی کردم و به همین دلیل به اندازه احمقانه 59x59 پیکسل رسیدم - اما این بر درک بصری تأثیری نداشت. بیا ادامه بدهیم...
بیایید یک تصویر پس زمینه برای پیوند اول تنظیم کنیم.

آ. توییتر (

انتقال: 0.3s;
}
آ. توییتر: شناور(

انتقال: 0.3s;
}

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

به عنوان مثال، ممکن است متوجه شده باشید که در sprite اولین عنصر نماد شبکه اجتماعی "VKontakte" است و اولین نماد در منوی اجتماعی است. نمادها - "تویتر". یعنی اگر پهنای آیکون های من 59 پیکسل باشد، باید پس زمینه را به 59- پیکسل برسانم. و همچنین، من می خواهم رنگ از خاکستری به رنگی تغییر کند. برای این کار باید پس زمینه را 59 پیکسل کم کنم. که در اینجا نشان داده شده است:

آ. توییتر (
پس زمینه: url(../images/css-sprite-iconok2.png) -59px -59px بدون تکرار;
انتقال: 0.3s;
}

برای اینکه سبک‌های کلاس هنگام شناور کردن تغییر کنند، باید کلاس شبه شناور را تنظیم کنید. کاری که من اینجا انجام می دهم:

آ. توییتر: شناور(
پس زمینه: url(../images/css-sprite-iconok2.png) -59px 0 بدون تکرار.
انتقال: 0.3s;
}

و برای اینکه عکس تغییر موقعیت دهد، مختصات نمایش را تغییر دادم.

ویژگی transition برای تنظیم سرعت تغییر موقعیت استفاده می شود. روی 0.3 ثانیه تنظیم کردم.

به روشی مشابه، باید موقعیت عناصر باقیمانده sprite را تنظیم کنید، آن را با 118 پیکسل حرکت دهید تا نماد RSS نمایش داده شود، و آن را به 0 پیکسل برای نمایش نماد "VK" برگردانید.

امیدوارم مقاله برای شما مفید بوده باشد و اکنون از css sprites برای وب سایت های خود استفاده کنید. فردا سعی خواهم کرد تجزیه و تحلیل کنم که سایت با استفاده از این فناوری چقدر سریعتر بارگذاری می شود.