منوهای نصب در پنل مدیریت

تکنیکی بسیار کارامد در css

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

1

فرض کنید می خواهیم برای المانی از صفحه ایکون home را نمایش دهیم برای اینکار ابتدا باید موقعیت تصویر را از سمت چپ تا نقطه شروع تصویر و سپس از  بالای تصویر تا نقطه سروع ان مشخص کنیم. برای اینکه مطلب بهتر روشن شود موقعیت دو تصویر از سمت چپ را تعین می کنیم .

برای تصویر اول از سمت چپ باید 0 پیکسل و از بالا نیز باید 0 پیکسل حرکت کنیم تا به تصویر برسیم و سپس بوسیله width و height ان اندازه از تصویر که باید در صفحه نمایش یابد را مشخص می کنیم . حال مقادیر لازم را برای ایکون اول مشاهده می کنید

background: url(img.gif) 0 0

width: 46px

height: 44px

 

0 و 0 موقعیت عکس در تصویر کلی و 46 و 44 مقدار طول و عرضی است که از ان تقطه در صفحه باید نمایش داده شود .

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

background: url(img_navsprites.gif) 87px 0

        width: 43px

        height: 44px

 

یعنی مرورگر ابتدا به اندازه 87 پیکسل از سمت چپ حرکت کرده سپس به اندازه 43 پیکسل در 44 پیکسل از ان تصویر را نمایش می دهد.

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

http://www.spritecow.com/

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

0 پاسخ در "تکنیکی بسیار کارامد در css"

ارسال یک پیغام

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

2017 © تمامي حقوق مطالب سايت Developersian محفوظ و همچنین استفاده از مطالب سایت با ذکر منبع بلامانع است.
X