ورود ثبت نام
دانلود فیلم CSS - نحوه استفاده از روش Image Sprites در CSS
» طراحی سایت » آموزش CSS » دانلود فیلم CSS – نحوه استفاده از روش Image Sprites در CSS
6250 بازدید

دانلود فیلم CSS – نحوه استفاده از روش Image Sprites در CSS

در این جلسه از دانلود فیلم CSS نحوه استفاده از Image Sprites را آموزش داده ایم . Sprites یعنی تعدادی از تصاویر را در یک تصویر قرار دهیم و از آن در طراحی سایت استاده کنیم .

Image Sprites چیست ؟

همان طور که در پاراگراف اول توضیح دادم یعنی به جای این که برای هر قسمت از قالب سایت ، از یک تصویر استفاده کنیم میایم آن تصاویر را با استفاده از فتوشاپ در یک تصویر قرار می دهیم و از آن استفاده می کنیم .

حالا شاید براتون سوال باشه مگه مریضیم که تصاویر را در کنار هم قرار بدیم ؟؟؟
در جوابتون باید بگم برای این که حجم تصاویر را پایین بیاریم و همین طور سرعت لود صفحه را بالا ببریم از این روش استفاده می کنیم و در سئو سایت هم خیلی تاثیر داره.

حالا به تصویر زیر توجه کنید :

دانلود فیلم CSS - اسپرایت تصویر

دانلود فیلم CSS – اسپرایت تصویر

می خوایم اون دایره آبی رنگی که توی عکس هستش رو توی صفحه وب نمایش بدیم برای این کار از کد های زیر استفاده می کنیم :

کد HTML :

<!doctype html>
<html>
	<head>
		<title>Web30ty</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
	
		<div id="sprite"> 
			
		</div>
		
	</body>
</html>

کد CSS :

#sprite{
	width: 130px;
	height: 123px;
	background: url(sprites.png) -67px -126px     no-repeat;
}

اول با استفاده از HTML یک تگ Div تعریف می کنیم و به آن یک آی دی با مقدار Sprite می دهیم و در CSS از این آی دی استفاده می کنیم و برای آن با استفاده ویژگی Background یک تصویر در نظر می گیریم .
مهم ترین نکته در این جا استفاده از background-position است همان اعداد 67px- و 126px- هستند که اولین مقدار عرض تصویر را مشخص می کند یعنی تصویر رو از کدوم عرض نمایش بدیم و مقدار اولیش صفر هست و هرچه به سمت راست میریم عدد رو باید به صورت منفی بنویسیم  و دومین مقدار هم ارتفاع عکس را نمایش می دهد ، یعنی ار کدام ارتفاع عکس را نمایش بدیم و هر چقدر به سمت پایین میریم باید بهش یه عدد منفی بدیم .

در فیلم آموزشی همه این هارو به طور کامل آموزش دادم . اگر سوالی داشتین میتونین در قسمت نظرات بنویسید .

برای دانلود فیلم CSS از لینک زیر استفاده کنید .

رضا طوماری

دیدگاه



جواب سوال چیه ؟ *

  1. ميلاد گفت:

    ممنون از سایت خوبتون . بسیار مفید و کاربردی بود.

  2. Agahi90.ir گفت:

    سلام این لینک زیر کار نمیکنه :
    https://dl.web30ty.com/Films/Reza/web_design/design_menu_top_2.mp4

  3. Agahi90.iR گفت:

    میخواهیم تمام موارد در یک خط افقی قرار گیرد کدی که شما گفتید رو گذاشتم در یک خط عمودی قرار میگیره
    لطفا نحوه نوشتن کد html اش رو هم بگید
    ممنون

  4. Agahi90.iR گفت:

    سلام مجدد
    مهندس جان دوباره میگم درخواستم رو ترتیب قرار گیری در یک خط به شکل زیر باشه ؟
    تصویر (یک عدد فاصله) تیتر h1 دوباره (یک عدد فاصله) تصویر بعدی
    کد html رو چطوری بنویسیم که تمامش در یک خط قرار بگیره ؟ بدون اینکه روی هم بیافته ؟

  5. Agahi90.iR گفت:

    هوالرزاق
    سلام و احترام
    فرض کنید بخواهیم چیدمان در یک خط قرار بگیره که موارد روی هم نیافتند بصورت زیر بخواهیم چطوری باید html و css رو بنویسیم ؟ (بترتیب میگم)
    عکس خونه فاصله که داخلش یه تیتره بعد فاصله بعد عکس فلش
    چطوری بنوسیم ؟ مشکل اون h1

    • رضا طوماری گفت:

      سلام
      برای اینکه عناصر رو توی یک خط نمایش بدید راه های زیادی دارید : 1- می تونید از مقدار float:right برای همه عناصر استفاده بکنید تا در کنار هم قرار بگیرن .
      2- میتونید از display: inline-block هم برای عناصر استفاده بکنید .

  6. علی اکبر گفت:

    سلام
    آموزش هاتون بسیار خوب و کاربردیه . خیلی ممنون از لطفتون