آموزش ساخت تصویر Sprite

[پـویـا امیری 464]

سلام

 

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

در این تاپیک می خوایم بهتون یاد بدیم طرز کارش چه جوریه!

 

خب مثلا این عکس رو ما داریم.

 

 

 

 

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

( عکس بدون بک گراند باشه )

 

خب میریم سر کدنویسی. با این شروع می کنیم:

.logo {

}

(این راست چین بودن انجمن خیلی اذیت می کنه )

خب حالا شما باید بهش عکس رو بدید به عنوان بک گراند! به این شکل:

.logo {
background: url(http://forums.rl-pro.ir/uploads/imgs/pre_1398781145__sprite.png);
}

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

الان اندازه ی ایکون ای پی بی در اینجا به اینه:

Width:117

Height:104

 

خب می دیم به CSS ـمون اینا رو. اینجوری میشه:

.logo {
background: url(http://forums.rl-pro.ir/uploads/imgs/pre_1398781145__sprite.png);
width: 117px;
height: 104px;
}

سخت بود تا اینجاش؟

خب الان باید جای ایکون رو بهش بدیم. ادرس روی جلوی ادرس قسمت بک گراند می نویسیم. عدد اول مربوط به چپ و راستیه ، عدد دوم مربوط به بالا پایینی ( راحت ترین راه توضیح دادن )

 

خب کل CSS ما این میشه:

.logo {
background:url(http://forums.rl-pro.ir/uploads/imgs/pre_1398781145__sprite.png) -171px -80px;
width: 117px;
height: 104px;
}

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

<div class="logo"></div>

همین تمام شد!

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

 

 

 

بعد هی بگین CSS و HTML سخته

 

منبع اصلی آموزش: W3Schools

دوستان برای تمرین بیشتر و تست به این آدرس بروید:

http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img

 

این آموزش توسط پویا (Pois0nous) برای انجمن های رپیدلیچ پرو و آی پی بی فارسی تهیه شده. هرگونه کپی برداری بدون ذکر منبع مجاز نمی باشد! با تشکر

 

 

پ.ن:

عجیبه! موقع نوشتن راست چین بود کد ها پدر ما رو در اورد الان که پست ارسال شده همه چیش درسته

[پـویـا امیری 464]

دوستان توجه داشته باشند که هیچ وقت از همچین عکسی که برای تست گذاشتم برای Sprite استفاده نکنید! معمولا ایکون ها رو توی یک سطر یا یک ستون می ذارند که ادرس دهیش اسون تر بشه.

 

برای مثال این یک اسپرایت لوگو های بانکی هست:

 

 

 

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

سوالی داشتید همینجا بپرسید.

[سعید نظری 1710]

بدین صورت: 

#backtotop > img,#recentTopicsWrapper > h3 > span > ul > div > a > img,#toggleThemeEditor img,#notify_link img,#sign_in img,#register_link img, #inbox_link img,#search_link img,#changeBackground img,#toggletuts img,.fbic img,.ttic img {
    width: 20px;
    height: 20px;
    background: url no-repeat;
{

#search_link img { background-position: 0px -232px;}
#changeBackground img { background-position: 0px -106px;}
#toggletuts img { background-position: 0px -253px;}
#notify_link img { background-position: 0px -43px;}
#inbox_link img { background-position: 0px -1px;}
#notify_link.menu_active img { background-position: 0px -64px;}
#inbox_link.menu_active img { background-position: 0px -22px;}
.fbic img { background-position: 0px -190px;}
.ttic img { background-position: 0px -169px;}

حله؟ 11 تا عکس با همین یه تیکه کد . 2 تا از اونها رو ننوشتم تو bg position! حالا هر مورد دیگه ای رو هم میخواید اد کنید بهش کافیه ای دی یا کلاسش رو به اون تیکه بالایی با کاما اضافه کنید و سپس مکانش هم تعیین....