Sgwgo

کمک در SpriteMe کردن پوسته

23 پست در این موضوع قرار دارد

سلام دوستان خوبید

این تمام عکس هایی هست که تو سایت لود میشن عکسشون ساختم ولی حالا تو css ضعیف هستم و نمیدونم چطور باید کدهارو دستکاری کنم

با مختصات دادن مشکل دارم

اینم آدرس سایتم www.fadroid.ir

post-320-0-50353700-1344939120_thumb.png

به عنوان مثال برای عکس بگراند کمکم کنید

عکس زیر عکس بگراند منه

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

کد های منو هم که میتونید خودتون از سایت من ببینید

http://www.fadroid.com/wp-content/themes/goodnews-persianscript/images/dark/bg.png

0

به اشتراک گذاری این پست


لینک به پست

مختصات دادن کار سخت و زمان بریه اول از همه عکس ها را باید با قانونی مشخص کنار هم بگذاری به طور مثال با فاصله ی 50 پیکسل از دو طرف و در هر مربع از گوشه ی سمت چپ بالا یک آیکون قرار بدی و اگر فرض کنیم عرض تصویر ساخته شده 250 پیکسل بشود یعنی در هر ردیف 5 آیکون باشد

کدت می شود


<style type="text/css">
.icon1 {
background-position:0px 0px;
}
.icon2 {
background-position:50px 0px;
}
.icon3 {
background-position:100px 0px;
}
.icon4 {
background-position:150px 0px;
}
.icon5 {
background-position:200px 0px;
}
.icon6 {
background-position:0px 50px;
}
.icon7 {
background-position:50px 50px;
}
.icon8 {
background-position:100px 50px;
}
.icon9 {
background-position:150px 50px;
}
.icon10 {
background-position:200px 50px;
}
</style>

3

به اشتراک گذاری این پست


لینک به پست

به اشتراک گذاری این پست


لینک به پست

برای بک گراندت پیشنهاد می کنم از رنگش استفاده کنی

کد رنگ بک گراند شما #4C4F52 است که می شود


background:#4C4F52;

4

به اشتراک گذاری این پست


لینک به پست

آقا من با spriteme عکسامو درست کردم آیا این قانونی درست میکنه

اگه قانونی درست میکنه مختصات این عکسم چطور بدست بیارم

0

به اشتراک گذاری این پست


لینک به پست

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

آقا من با spriteme عکسامو درست کردم آیا این قانونی درست میکنه

من نتونستم باهاش کار کنم.

3

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

خب دوستان من تا حدودی موفق شدم

عکسمو به صورت استاندارد ساختم ولی هنوز یجایی مشکل دارم و اون عدم آشنایی کامل با کدهایی css

به این عکس دقت کنید

post-320-0-76386900-1345034944_thumb.png

آیکن هوم فقط باید یکم بیاد پایین

با هیچ کدی نتونستم با موفقیت بیارمش پایین

اینم عکس اسپرایت من

post-320-0-75420700-1345035007_thumb.png

و اینم کدهایی css من


#navigation ul.nav li.home > a {
background:url(../images/spite.png) no-repeat top left;
background-position: 15px -262px; width: 29px; height: 28px;

ویرایش شده در توسط Sgwgo
0

به اشتراک گذاری این پست


لینک به پست


#navigation ul.nav li.home > a {
background:url(../images/spite.png) no-repeat 3px left;
background-position: 15px -262px; width: 29px; height: 28px;

با کم و زیاد کردن 3px جای دقیق آیکون را تعیین کنید

2

به اشتراک گذاری این پست


لینک به پست

از 262 کم کنم؟

وااااااااااااااااااااای باورم نمیشه مشکل فقط از یه height بود باید 100% میکردم

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

اینبار با عکس بکگراند مشکل دارم

کد سی اس اسش اینه


background:#3a3c3d url(../images/sprite.png);
background-position: 0px 0px;

پرا چرا اینطور نشون میده

post-320-0-56138200-1345043547_thumb.png

ویرایش شده در توسط Sgwgo
0

به اشتراک گذاری این پست


لینک به پست

بکگراند سایتتتون هست؟

برای انتخاب بکگراند یک بخش به روش Sprite باید width و height اون قسمت هم تنظیم باشد

از norepeat هم استفاده کنید برای تکرار نشدن

background:#3a3c3d  url(../images/sprite.png) norepeat ;

3

به اشتراک گذاری این پست


لینک به پست

بله زمینه سایت هست

طول و عرض که داده نمیشه!!

تکرار همکه باید باشه

0

به اشتراک گذاری این پست


لینک به پست

فکر میکنم تصویر اشتباه انتخاب شده!

0

به اشتراک گذاری این پست


لینک به پست

خب عکس من قرار دادم اولین تیکه هم مال خود بکگراند یعنی مختصاصت 0 و 0

ولی چرا کل عکس نمایش داده میشه

خداااااا دارم راوانی میشم

0

به اشتراک گذاری این پست


لینک به پست

واسه زمینه سایت (body) نمیشه موقعیت تعیین کرد!

باید از تصویر یک شکل استفاده کنید

2

به اشتراک گذاری این پست


لینک به پست

از norepeat هم استفاده کنید برای تکرار نشدن


background:#3a3c3d url(../images/sprite.png) norepeat ;

بی ادبی مرا بپذیرید.ولی فکر کنم no-repeat صحیح تر است...#

2

به اشتراک گذاری این پست


لینک به پست

از زمینه که بگذریم

یه قسمت هم دارم که توش مشکل دارم

post-320-0-36851700-1345056217_thumb.png

post-320-0-44503200-1345056219_thumb.png

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

0

به اشتراک گذاری این پست


لینک به پست

من متوجه این مشکل آخرتون نشدم. بیشتر توضیح بدید که چیکار کردید.

0

به اشتراک گذاری این پست


لینک به پست

تصویر اول قبل اسپرایت

و دوم بعد اسپرایت

عکس اسپرایتی که گذاشتم و شامل چندتا عکسه دیگه بضیا عریض هستن و بعضیا باریک

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

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

با چه کدی به هم نزدیکشون کنم؟

0

به اشتراک گذاری این پست


لینک به پست

اگر آنلاین باشه یا بتونید کد رو بزارید تا در عمل هم مشکل رو ببینیم خیلی خوب میشه.

چون وقتی مختصات دایدید و repeat هم هست باید درست عمل کنه مگر اینکه آدرس دهی یا position اشتباه باشه.

0

به اشتراک گذاری این پست


لینک به پست

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

دارم روی لوکال باهاش ور میرم که تا الان واسه 2 تا از تصویرا موفق بودم و رو قالب آنلاین هم اعمالشون کردم

من به شما وسایل میدم شما با خاصیت inspact یا یا افزونه firebug روی قالب اصلی من تست کنید

آدرس عکس اسپرایت شده:

http://www.fadroid.c...ages/sprite.png

آدرس سایت : www.fadroid.ir

پستیشن تصویر در عکس اسپرایت :

background-position: 0 -143px;

محلی که این تصویر وجود داره

post-320-0-99018800-1345123330_thumb.png

0

به اشتراک گذاری این پست


لینک به پست

کسی متوجه مشکل من نشد ؟

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری