آموزش کامل Image Sprites در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل Image Sprites در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
Image Sprites در CSS چیست؟
بطور کلی به مجموعه ای از چندین تصویر / عکس که درون یک تصویر واحد قرار میگیرند Image Sprites می گوییم ، یعنی در واقع اینجوری بگیم به چندین تصویر کوچک شده که در کنار همدیگر در یک تصویر واحد قرار دارند عکس اسپریت شده می گوییم.
خب حالا به چه درد میخوره این Image Sprites ؟! بیشترین فایده ای که میتونه برامون داشته باشه یکی افزایش سرعت بارگذاری صفحه وبمون هست و دیگری کم کردن تعداد درخواست ها به سمت سرور می باشد.
خب بلاخره من فقط یک عدد عکس دارم و چون داخل همون یک عدد عکس ، تعدادی عکس دیگر وجود دارد پس طبیعتا سرعت لود شدن صفحه وب من میتونه خیلی بیشتر باشه نسبت به صفحه ای که قرار است چندین عکس واحد درش لود شه.
خب حالا بریم تا یک نمونه از Image Sprites با همدیگه ببینیم، تصویر زیر نمونه ای از یک تصویر اسپریت شده می باشد ، پس یعنی الان ۱ عدد تصویر داریم ولی داخل همین ۱عدد تصویر ، تعدادی تصویر، بخش یا قسمت یا هرچی که شما اسمشو بزارید داریم.
پس در ادامه من میخوام با استفاده از CSS و یکسری ویژگی هایی که در این مورد ایجاد شده اند، به تصاویر موجود در این تصویر واحد دسترسی پیدا کنم و آنها را در صفحه وبم به نمایش درآورم.
خب همونطور که میبینید تصویر بالا درواقع تصویر اصلی و واحد من هس، خب شاید من دلم بخواد در گوشه ای از سایتم مثلا لوگوی فیسبوک قرمز رنگ ( f ) رو به نمایش درآورم یا مثلا در گوشه دیگه میخوام لوگوی توئیتر ( t ) رو به نمایش درآورم.
Free-Learn
آموزش کامل Image Sprites در CSS
خب حالا من میخوام با استفاده از دستورات CSS از سمت چپ در ردیف ۴ لوگوی فیسبوک قرمز رنگ رو به نمایش در آورم، بریم ببینیم چجوری میتونیم اینکارو انجام بدیم. لطفا در ادامه و تا پایان این جلسه با من همراه باشید.
پیشنهاد میکنم حتما آموزش کار با پس زمینه ها یا Backgrounds در CSS را مشاهده نمایید.
در دستورات زیر ویژگی به اسم background-position وجود دارد که با استفاده از این ویژگی موقعیت یا محل قرار گیری تصویر رو مشخص میکنیم، مقدار اول یعنی فاصله از سمت چپ به راست ( بصورت افقی ) تا محل تصویر و مقدار دوم یعنی فاصله از سمت بالا به پایین ( بصورت عمودی ) تا محل تصویر.
مثال شماره ۱ : استفاده در تگ DIV ( نمایش ۳ عدد از لوگوهای موجود در تصویر اصلی )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<style> div.t1{ width:46px; height:50px; background-image:url('demo-img-spr.png'); background-position: -47px -142px; background-repeat:no-repeat; } div.t2{ width:46px; height:46px; background-image:url('demo-img-spr.png'); background-position:-190px 0; background-repeat:no-repeat; } div.t3{ width:46px; height:46px; background-image:url('demo-img-spr.png'); background-position:-95px -95px; background-repeat:no-repeat; } </style> |
Free-Learn
مثال های بیشتر از Image Sprites در CSS
مثال شماره ۱ : ایجاد یک منو ( Navigation Bar ) با استفاده از تکنیک Image Sprites در CSS
|
1 2 3 4 5 6 7 8 |
<body> <ul id="navlist"> <li id="m1"><a href="files/user.html"></a></li> <li id="m2"><a href="files/car.html"></a></li> </ul> </body> |
مثال شماره ۲ : ایجاد یک لیست از آیتم ها با استفاده از تکنیک Image Sprites در CSS – روش دیگری برای قرار دادن عکس / تصویر بجای گلوله های مشکی آیتم های یک لیست وجود دارد که پیشنهاد میکنم از آن روش استفاده نمایید.
پیشنهاد میکنم آموزش نحوه قرار دادن تصویر بجای گلوله های مشکی توپُر پیش فرض یک لیست ،را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 |
<body> <ul id="mylist"> <li id="item1">Salam</li> <li id="item1">Khobi?</li> <li id="item1">Salam</li> <li id="item1">Khobi?</li> </ul> </body> |
