alikhani98 517 ارسال شده در اسفند 91 گزارش بازنشر ارسال شده در اسفند 91 باسلاممن به تازگی با CSS Sprites آشنا شدم،خیلی چیز خوبیه اما من کار باهاش و نحوه استفاده اش را به خوب بلد نیستم!مثلا من اگر بخوام قسمت دوستان ما در ابزارک سایتم رابا استفاده از CSS Sprites درست کنم نمیشه که!آخه تصاویر متحرک هم وجود داره،چطوری اونها را توی یه تصویر جا بدم؟یا اینکه میشه یه عکس جیف درست کنم که تمام آیکونهای ثابت و متحرک داخلش باشه ولی حجمش زیاد میشه که!خوب الان من قسمت ابزارک های سایتم را بهتر کردم و تصاویر ثابت را در یک ردیف قرار دادم!خوب حالا چطوری برای هرکدوم توی تصویر یه لینک بدم؟و توی ابزارکم قرار بدم؟ نقل قول لینک به ارسال
arman100000 1264 ارسال شده در اسفند 91 گزارش بازنشر ارسال شده در اسفند 91 اين سايت رو امتحان كنيدhttp://csssprites.com 8 نقل قول لینک به ارسال
alikhani98 517 ارسال شده در اسفند 91 مالک گزارش بازنشر ارسال شده در اسفند 91 اين سايت رو امتحان كنيدhttp://csssprites.comممنونچیز عالی ای به نظر میرسه الان تست میکنمفقط درمورد این تنظیماتش یه توضیح بدید± options »Padding between elements: pxBorder around the whole image: pxAlign elements: left topBackground color: transparent RGB (, , ) نقل قول لینک به ارسال
alikhani98 517 ارسال شده در اسفند 91 مالک گزارش بازنشر ارسال شده در اسفند 91 خوب عکسش را درست کردحالا چطوری به تصویرها لینک بدم؟اینم صفحهhttp://csssprites.com/results/617864d5da597c6b59aa9c2f68163db3/result.html نقل قول لینک به ارسال
vahidd 203 ارسال شده در اسفند 91 گزارش بازنشر ارسال شده در اسفند 91 (ویرایش شده) CSS Sprite یه قابلیت خوبه که توی سایت های پربازدید باعث کاهش http request میشه، یعنی مثلا اگر سایت شما روزی 20 هزار تا بازدید و 30 عکس هست مثلا 600 هزار تا request به سرور میره، حالا شما تمام تصاویر رو در یک فایل قرار می دید و درخواست ها از 600 هزار تا میشه مثلا 20 هزار تا.اما استفاده از sprite یه سری محدودیت داره:اول این که شما باید تصویر رو به صورت background-image و با CSS تنظیم کنید، یعنی مثلا قسمتی که شما معرفی کردید به صورت image و SRC هست که نمیشه از Sprite استفاده کرد.دوم این که مثلا شما در پس زمینه سایتتون یک تصویر قابل تکرار قرار دادید، توی سی اس اس Sprite نمیشه این کار کردهم چنین ابزار های آنلاین این قابلیت دو نوع هستند:اول این که شما مثلا 30 تا تصویر دارید که میشه Sprite شد، حالا توی این نوع ابزار آنلاین شما تمام تصاویر رو آپلود می کنید، سپس خود سرویس تصاویر رو به هم می چسبونه و کد تک تک اون ها رو میده:http://csssprites.com/نوع دوم ابزار های آنلاین هم به این صورت هستند که شما خودتون تصاویر رو در مثلا فتوشاپ کنار هم می چینید و این تصویر Sprite رو در این سرویس آپلود می کنید حالا با قابلیت Drag توی سرویس می تونید یه قسمتی از تصویر رو انتخاب کنید و خود سرویس کد background اون قسمت رو میده، که از نظر من بهترینش این هست:http://www.spritecow.com/امیدوارم کمک کرده باشه. ویرایش شده اسفند 91 توسط vahidd 13 نقل قول لینک به ارسال
arman100000 1264 ارسال شده در اسفند 91 گزارش بازنشر ارسال شده در اسفند 91 خوب عکسش را درست کردحالا چطوری به تصویرها لینک بدم؟اینم صفحهhttp://csssprites.com/results/617864d5da597c6b59aa9c2f68163db3/result.htmlببينيد الان شما بايد از css استفاده كنيد يك سلكتور با نام دلخواه فرضا icon بسازيد.icon {...}حالا عكس ادغام شده رو در جايي مشخص آپلود كنيد بعد سلكتور رو كامل كنيد مثلا.icon {background: url('result.png');background-position: -0px -100px;}الان كافيه كه از اين كلاس در html استفاده كنيد مثلا :<div class"icon" ></div>براي لينك دار كردن هم كافيه از تگ a ويژگي href استفاده كنيد 7 نقل قول لینک به ارسال
alikhani98 517 ارسال شده در اسفند 91 مالک گزارش بازنشر ارسال شده در اسفند 91 مثلا من برای این عکس طبق گفته های شما درست کردم:.icon {background: url('http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png') ;background-position: 0px 0px; }.icoa {background: url('http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png') ;background-position: 0px -50px; }.icod {background: url('http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png') ;background-position: 0px -100px; }خوب من الان توی بالا برای این سه تا عکس سه تا کلاس نوشتم،آیا میشه با یه کلاس،سرو تهش را هم آورد؟خوب اینم کد اچ تی امش:<div class"icon" > <a title="مجید بلاگ" href="http://magidblog.com" target="_blank" rel"nofollow"><img src="http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png"></a>خوب آیا این دوتا کد را که نوشتم درسته؟باتشکر از توضیحی که دادید. نقل قول لینک به ارسال
arman100000 1264 ارسال شده در اسفند 91 گزارش بازنشر ارسال شده در اسفند 91 مثلا من برای این عکس طبق گفته های شما درست کردم:.icon {background: url('http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png') ;background-position: 0px 0px; }.icoa {background: url('http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png') ;background-position: 0px -50px; }.icod {background: url('http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png') ;background-position: 0px -100px; }خوب من الان توی بالا برای این سه تا عکس سه تا کلاس نوشتم،آیا میشه با یه کلاس،سرو تهش را هم آورد؟خوب اینم کد اچ تی امش:<div class"icon" > <a title="مجید بلاگ" href="http://magidblog.com" target="_blank" rel"nofollow"><img src="http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png"></a>خوب آیا این دوتا کد را که نوشتم درسته؟باتشکر از توضیحی که دادید.نه نميشه فقط با يه كلاس چند تا عكس رو استفاده كرد البته مي تونيد يكم خلاصه ترش كنيد مثلا :.icon,.icoa,.icoa {background: url('http://csssprites.com/results/27e05de01790a73338713259d17240d9/result.png') ;}.icon {background-position: 0px 0px; }.icoa {background-position: 0px -50px; }.icoa {background-position: 0px -100px; }و بهتره عكس رو در هاست خودتون آپلود كنيد .كد html هم اشتباه داره مثال:<a href="https://facebook.com" class="facebook"></a>البته بقيه ويژگي ها رو هم كه ميخايد مي تونيد به تگ اضافه كنيد 4 نقل قول لینک به ارسال
alikhani98 517 ارسال شده در اسفند 91 مالک گزارش بازنشر ارسال شده در اسفند 91 خوب آخرین کدی که قرار دادید را باید بین تک<div class"icon" >اینجا؟</div>قرار بدم؟ نقل قول لینک به ارسال
arman100000 1264 ارسال شده در اسفند 91 گزارش بازنشر ارسال شده در اسفند 91 نهاين خودش كلاس داره فقط كلاس و آدرس رو عوض كنيد و بزاريد توي قالب 3 نقل قول لینک به ارسال
alikhani98 517 ارسال شده در اسفند 91 مالک گزارش بازنشر ارسال شده در اسفند 91 دوستان میشه کمک کنیدمن با اون سایتی که دوستمون معرفی کرد نتونستم موقعیت تصویر را پیدا کنماین لینک تصویر هستش:(http://4blogers.com/wp-content/uploads/2013/01/404.jpg)خوب من میخوام موقیت اون کاد که توش نوسته مرجع وبلاگ نویسان را پیدا کنم،ولی نتونستممیشه موقعیتش را برام پیدا کنید؟باتشکر نقل قول لینک به ارسال
Morteza 34190 ارسال شده در اسفند 91 گزارش بازنشر ارسال شده در اسفند 91 با فتوشاپ فاضل هز چپ و فاصله از بالای اون بخش موردنظر رو براساس پیکسل پیدا کنید.این میشه همون اندازه هایی که میخواید 4 نقل قول لینک به ارسال
alikhani98 517 ارسال شده در اسفند 91 مالک گزارش بازنشر ارسال شده در اسفند 91 با فتوشاپ فاضل هز چپ و فاصله از بالای اون بخش موردنظر رو براساس پیکسل پیدا کنید.این میشه همون اندازه هایی که میخوایدراستش امتحان کردم ولی جواب ندادخوب نگاه کنید من میخوام موقعین یه مستطیل در تقریبا پایین صفحه بهش بدم ولی نمیدونم چطور! نقل قول لینک به ارسال
arman100000 1264 ارسال شده در اسفند 91 گزارش بازنشر ارسال شده در اسفند 91 قرار نيست كه هميشه از css sprites استفاده كنيم !مثلا الان شما ميخايد يه عكس 210 كيلوبايتي رو لود كنيد بعد فقط يك قسمت 5 كيلوبايتي رو ازش جدا كنيد اينجوري خيلي بيشتر فشار مياد به سرور ...اون قسمت رو با فتوشاپ جدا كنيد بعد بزاريد توي سايت+با اون سايتي كه من معرفي كردم راحت ميشه از تكنيك css sprites استفاده كرد خودش كامل توضيح داده ... 3 نقل قول لینک به ارسال
alikhani98 517 ارسال شده در فروردین 92 مالک گزارش بازنشر ارسال شده در فروردین 92 درورددوستان من عاشق این تکنیک شدم و کارباهاش را هم بلد شدم ولی چندتا مشکل دارم.من دارم روی لوکال درستش میکنم،مثلا الان به تصویر زیر نگاه کنید:خوب من با سی اس اس اسپریت آیکون ساعته که موس نزدیکش هستش را قرار دادم ولی وقتی براش اندازه تعریف میکنم متن یا همون تارخ پست میاد زیرش{width:12px;height:12px;background:url(img_navsprites.gif) 20px 0;}خوب چیکار کنم که عکسه در کنار متن باشه و متن از جاش جٌم نخوره نقل قول لینک به ارسال
Mohammad 1620 ارسال شده در فروردین 92 گزارش بازنشر ارسال شده در فروردین 92 بهش padding بدید:padding-right: 5px; 3 نقل قول لینک به ارسال
alikhani98 517 ارسال شده در فروردین 92 مالک گزارش بازنشر ارسال شده در فروردین 92 بهش padding بدید:padding-right: 5px;قبلا داشتش بازهم مشکل داره.صبر کنید فایل css را بزارم نقل قول لینک به ارسال
alikhani98 517 ارسال شده در اردیبهشت 92 مالک گزارش بازنشر ارسال شده در اردیبهشت 92 <html><head><style>.home{background:url("http://4blogers.com/wp-content/uploads/2013/05/sprites.png") 0 0;background-position: -468px 0;width: 128px;height: 128px;}</style></head><body><img class="home" src="http://4blogers.com/wp-content/uploads/2013/05/sprites.png" width="128" height="128" /></body></html>الان چرا تصویر را بد نشون میده؟این کد را اینجا تست کنید.چه چیزی را بد نوشتم؟ نقل قول لینک به ارسال
Morteza 34190 ارسال شده در اردیبهشت 92 گزارش بازنشر ارسال شده در اردیبهشت 92 عکسی نمیاد! نقل قول لینک به ارسال
alikhani98 517 ارسال شده در اردیبهشت 92 مالک گزارش بازنشر ارسال شده در اردیبهشت 92 عکس را که نشون میده!ولی یه عکس دیگه روش هستش! نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در اردیبهشت 92 گزارش بازنشر ارسال شده در اردیبهشت 92 کدها را خودتان مقایسه کنید<html><head><meta content="en-us" http-equiv="Content-Language"><style>.home{background:url("http://4blogers.com/wp-content/uploads/2013/05/sprites.png") -468px 0;width: 128px;height: 128px;display:block}</style></head><body><div class="home"> </div></body></html> 4 نقل قول لینک به ارسال
alikhani98 517 ارسال شده در اردیبهشت 92 مالک گزارش بازنشر ارسال شده در اردیبهشت 92 ممنونمحالا یه سوالچطوری براش لینک تعریف کنم؟مثلا اینجوری میشه:<a class="home" target="_blank" href="http://4blogers.com" title="منبع"></a>درسته همینجوریهممنون استاد نقل قول لینک به ارسال
alikhani98 517 ارسال شده در اردیبهشت 92 مالک گزارش بازنشر ارسال شده در اردیبهشت 92 (ویرایش شده) <ul id="navlist"><li class="home1"><a href="http://4blogers.com/forum/index.php" title="مرجع وبلاگ نويسان" target="_blank"></a></li><li class="google_plus"></li><li class="facebook"></li><li class="twitter"></li><li class="rss"></li><li class="Login"></li></ul>این هم css#navlist{position:relative}#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;opacity:0.1;-moz-transition:0.5s;-webkit-transition:0.5s}#navlist li:hover{opacity:1;-moz-transition:0.7s;-webkit-transition:0.7s}#navlist li,#navlist a{display:block}.facebook,.google_plus,.home1,.Login,.rss,.twitter{left:150px;width:43px;background:url(files/img/sprites.png) no-repeat}.facebook{left:100px;width:24px;background-position:-157px 0;height:24px}.google_plus{left:50px;width:24px;background-position:-125px 0;height:24px}.home1{left:12px;width:24px;background-position:-93px 0;height:24px}.Login{left:240px;width:24px;background-position:-63px 0;height:24px}.rss{left:200px;width:24px;background-position:-30px 0;height:24px}.twitter{background-position:0 0;width:24px;height:24px}خوب من توی کد اولی لینک تعریف کردم ولی کار نمیکنه چرا؟ ویرایش شده اردیبهشت 92 توسط alikhani98 نقل قول لینک به ارسال
imanfakhar 26231 ارسال شده در اردیبهشت 92 گزارش بازنشر ارسال شده در اردیبهشت 92 وقتی داخل لینک خالیه باید در css براش خاصیتdisplay:inline-block;یا block تعریف بشه کدی که قبلا عرض کردم تمام خواصش مورد نیازتون بوده 4 نقل قول لینک به ارسال
alikhani98 517 ارسال شده در اردیبهشت 92 مالک گزارش بازنشر ارسال شده در اردیبهشت 92 باسلامی دوبارهدوستان من با css cpirite تصاویر وبسایتم را درست کردماما یه مشکلی هستشمثلا توی صفحه اصلی آیکونها ی کوچک ساعت و نظرات و.. جاشون خوبه ولی وقتی وارد مطلب یا دسته ای میشم جاشون چند پیکسل جابه جا میشه!چطوری درستش کنم نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .