در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش ایجاد Sprte images در CSS

سلام به همه ی دوستان itpro ! تقریبا توی تمام وبسایت هایی که میرویم لینک های شبکه های اجتماعی (social links) هستند که هرکدوم از آن ها به شکل خاصی درست شدند .

social links

یکی از شیوه های قشنگ برای درست کردن این لینک ها استفاده از Sprite Image هست ، یک تکنیک ساده که با CSS پیاده سازی می شود.

sprite image

برای شروع ما icon یکی از این شبکه های اجتماعی رو نیاز داریم که من از این سایت تهیه می کنم:

Icon Finder

من یک icon گوگل پلاس (Google plus) انتخاب می کنم و با فرمت png دانلود می کنم. ما برای استفاده از icon نیاز به یک سری تغیرات در آن داریم. برای همین نرم افزار Photoshop رو باز می کنیم و عکس رو داخلش آن قرار می دهیم.

sprite images

بعد عکس رو Select میکنم.

sprite image

سپس قسمت انتخاب شده که کل عکس هست رو cut می کنیم.

Sprite image

از منوی Image در قسمت Image size ارتفاع عکس رو دو برابر می کنیم.

sprite image

حالا دو بار عکس رو past می کنیم تا دونمونه از اون روی صفحه قرار بگیرد وبعد با استفاده از grids های photoshop اون دو عکس رو دقیقا در مکان متقارن قرار می دهم به شکلی که اگر عکس را از وسط دو icon ببریم و روی هم قرار دهیم کاملا روی هم قرار گیرند.

sprite image

حالا با استفاده از double click کردن روی layer عکس بالایی و رفتن به قسمت Color Overlay رنگ عکس بالایی را با رنگ عکس پایین متمایز می کنیم.

sprite image

کار ما در 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 در حالت عادی نخواهد شد.)

خروجی:

sprite image

حالا دیگر کافی است که وقتی موس روی 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 بروید عکس جدید جای گزین عکس قبلی می شود.

sprite image

ممنون از همراهی شما . itpro باشید.

#آموزش_طراحی_sprite_image_در_css #استفاده_از_background_در_css #طراحی_لوگوی_شبکه_های_اجتماعی_در_css #طراحی_لینک_شبکه_های_اجتماعی_در_css #شبکه_های_اجتماعی_در_css #طراحی_sprite_image_در_css #ترفندهای_طراحی_در_css #آموزش_طراحی_css_در_php #ترفند_های_طراحی_css
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....