رفتن به مطلب

استفاده از CSS Sprites برای تصاویر


پست های پیشنهاد شده

باسلام

من به تازگی با CSS Sprites آشنا شدم،خیلی چیز خوبیه اما من کار باهاش و نحوه استفاده اش را به خوب بلد نیستم!

مثلا من اگر بخوام قسمت دوستان ما در ابزارک سایتم رابا استفاده از CSS Sprites درست کنم نمیشه که!

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

خوب الان من قسمت ابزارک های سایتم را بهتر کردم و تصاویر ثابت را در یک ردیف قرار دادم!

Snap4.jpg

خوب حالا چطوری برای هرکدوم توی تصویر یه لینک بدم؟و توی ابزارکم قرار بدم؟

لینک به ارسال

اين سايت رو امتحان كنيد

http://csssprites.com

ممنون

چیز عالی ای به نظر میرسه الان تست میکنم

فقط درمورد این تنظیماتش یه توضیح بدید

± options »

Padding between elements: px

Border around the whole image: px

Align elements: left top

Background color: transparent RGB (, , )

لینک به ارسال

خوب عکسش را درست کرد

حالا چطوری به تصویرها لینک بدم؟

اینم صفحهhttp://csssprites.com/results/617864d5da597c6b59aa9c2f68163db3/result.html

لینک به ارسال

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/

امیدوارم کمک کرده باشه.

ویرایش شده توسط vahidd
لینک به ارسال

خوب عکسش را درست کرد

حالا چطوری به تصویرها لینک بدم؟

اینم صفحه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 استفاده كنيد

لینک به ارسال

مثلا من برای این عکس طبق گفته های شما درست کردم:


.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 {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>

البته بقيه ويژگي ها رو هم كه ميخايد مي تونيد به تگ اضافه كنيد

لینک به ارسال

خوب آخرین کدی که قرار دادید را باید بین تک

<div class"icon" >اینجا؟</div>

قرار بدم؟

لینک به ارسال

دوستان میشه کمک کنید

من با اون سایتی که دوستمون معرفی کرد نتونستم موقعیت تصویر را پیدا کنم

این لینک تصویر هستش:(http://4blogers.com/wp-content/uploads/2013/01/404.jpg)

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

میشه موقعیتش را برام پیدا کنید؟

باتشکر

لینک به ارسال

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

این میشه همون اندازه هایی که میخواید

لینک به ارسال

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

این میشه همون اندازه هایی که میخواید

راستش امتحان کردم ولی جواب نداد

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

لینک به ارسال

قرار نيست كه هميشه از css sprites استفاده كنيم !

مثلا الان شما ميخايد يه عكس 210 كيلوبايتي رو لود كنيد بعد فقط يك قسمت 5 كيلوبايتي رو ازش جدا كنيد اينجوري خيلي بيشتر فشار مياد به سرور ...

اون قسمت رو با فتوشاپ جدا كنيد بعد بزاريد توي سايت

+

با اون سايتي كه من معرفي كردم راحت ميشه از تكنيك css sprites استفاده كرد خودش كامل توضيح داده ...

لینک به ارسال
  • 1 ماه بعد...

درورد

دوستان من عاشق این تکنیک شدم ^_^ و کارباهاش را هم بلد شدم ولی چندتا مشکل دارم.

من دارم روی لوکال درستش میکنم،مثلا الان به تصویر زیر نگاه کنید:post-848-0-78291900-1366470015_thumb.jpg

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


{
width:12px;
height:12px;
background:url(img_navsprites.gif) 20px 0;
}

خوب چیکار کنم که عکسه در کنار متن باشه و متن از جاش جٌم نخوره :)

لینک به ارسال

بهش padding بدید:


padding-right: 5px;

قبلا داشتش بازهم مشکل داره.صبر کنید فایل css را بزارم

لینک به ارسال
  • 2 هفته بعد...


<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>

الان چرا تصویر را بد نشون میده؟

این کد را اینجا تست کنید.

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

لینک به ارسال

کدها را خودتان مقایسه کنید


<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>

لینک به ارسال

ممنونم

حالا یه سوال

چطوری براش لینک تعریف کنم؟

مثلا اینجوری میشه:


<a class="home" target="_blank" href="http://4blogers.com" title="منبع"></a>

درسته همینجوریه

ممنون استاد

لینک به ارسال


<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}

خوب من توی کد اولی لینک تعریف کردم ولی کار نمیکنه چرا؟

ویرایش شده توسط alikhani98
لینک به ارسال

وقتی داخل لینک خالیه باید در css براش خاصیت


display:inline-block;

یا block تعریف بشه کدی که قبلا عرض کردم تمام خواصش مورد نیازتون بوده

لینک به ارسال

باسلامی دوباره

دوستان من با css cpirite تصاویر وبسایتم را درست کردم

اما یه مشکلی هستش

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

چطوری درستش کنمpost-848-0-02771000-1368177800_thumb.jpg

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...