آموزش ایجاد Sprite Image در CSS بصورت تصویری
چگونه یک Sprite Image در CSS ایجاد کنیم؟ تقریبا توی تمام وبسایت هایی که میرویم لینک های شبکه های اجتماعی (social links) هستند که هرکدوم از آن ها به شکل خاصی درست شدند .
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
یکی از شیوه های قشنگ برای درست کردن این لینک ها استفاده از Sprite Image هست ، یک تکنیک ساده که با CSS پیاده سازی می شود.
برای شروع ما icon یکی از این شبکه های اجتماعی رو نیاز داریم که من از این سایت تهیه می کنم:
من یک icon گوگل پلاس (Google plus) انتخاب می کنم و با فرمت png دانلود می کنم. ما برای استفاده از icon نیاز به یک سری تغیرات در آن داریم. برای همین نرم افزار Photoshop رو باز می کنیم و عکس رو داخلش آن قرار می دهیم.
بعد عکس رو Select میکنم.
سپس قسمت انتخاب شده که کل عکس هست رو cut می کنیم.
از منوی Image در قسمت Image size ارتفاع عکس رو دو برابر می کنیم.
حالا دو بار عکس رو past می کنیم تا دونمونه از اون روی صفحه قرار بگیرد وبعد با استفاده از grids های photoshop اون دو عکس رو دقیقا در مکان متقارن قرار می دهم به شکلی که اگر عکس را از وسط دو icon ببریم و روی هم قرار دهیم کاملا روی هم قرار گیرند.
حالا با استفاده از double click کردن روی layer عکس بالایی و رفتن به قسمت Color Overlay رنگ عکس بالایی را با رنگ عکس پایین متمایز می کنیم.
کار ما در Photoshop تمام شد. عکس را در پوشه ی پروژه ای که ایجاد می کنیم با فرمت PNG قرار می دیم .
حالا یک قایل index.html درون پوشه ی پروژه ایجاد می کنیم و درونش یک div قرار می دیم که جای icon ما خواهد بود.
<!DOCTYPE html>
<html>
<head>
<title>Sprite images</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color:gainsboro;
direction:rtl;
}
#google-plus{
width:50px;
height:50px;
margin:50px 50px 0 0;
background-color:#f1f1f1;
background-image:url(google-plus.png);
background-size:100% 200%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="google-plus"></div>
</body>
</html>
توی style های div عکسی که آماده کرده بودیم رو background قرار می دیم و چون نمی خواهیم که دو تا آیکون توی عکس با هم بر روی div نمایش داده شوند ارتفاع background-image رو دو برابر
div قرار می دیم تا فقط نصفه ی بالای عکس نمایش داده شود. یعنی با توج به ارتفاع div ، ارتفاع عکس الان 100px است پس مختصات عکس پایینی می شود 50 ولی از انجایی که مبدا مختصاتی ما گوشه ی سمت چپ بالایی div است ، برای دادن مختصات عکس پایینی باید مختصات آن را منفی بدهیم یعنی -50. بعد هم جهت محکم کاری background repeat را در div به شکل no repeat می کذاریم تا در هیچ صورتی عکس تکرار نشود(با توجه به اندازه ی div در حالت عادی نخواهد شد.)
خروجی:
حالا دیگر کافی است که وقتی موس روی div رفت ، عکس پایینی نمایش داده شود.
#google-plus:hover{
background-position:0 -50px;
}
حالا اگر با موس روی div بروید رنگ icon قرمز خواهد شد.
ولی هنوز زیبایی زیادی ندارد.
برای بیشتر شدن زیبایی div ما یک transition به div می دیم که در زمانی که موس روی div رفت ، به تدریج icon پایینی جای گزین بشه.
transition:background-position 0.3s; -webkit-transition:background-position 0.3s; -o-transition:background-position 0.3s; -moz-transition:background-position 0.3s;
کار تمام شد.
اکنون اگر بر روی div بروید عکس جدید جای گزین عکس قبلی می شود.
ممنون از همراهی شما .