CSS Sprite – Dùng một ảnh chung cho nhiều thành phần

Bài viết này hướng dẫn các bạn kỹ thuật CSS Sprite – Dùng một ảnh to chứa tất cả icon để gắn từng icon nhỏ cho các thành phần riêng biệt.

CSS Sprite

CSS Sprite

[button link=”http://cosmospham.com/demo/clock-css-jquery-01/” color=”#AAAAAA” size=”3″ style=”1″ dark=”0″ radius=”auto” target=”_blank”]Demo[/button]

[button link=”https://www.dropbox.com/s/rbwcvdoagljtfgy/sprite-css.zip” color=”#AAAAAA” size=”3″ style=”1″ dark=”0″ radius=”auto” target=”self”]Source Code[/button]

Chuẩn bị: Một hình png (chuẩn này tốt khi dùng icon cho web nhất). Có thể tải ảnh mẫu tại đây.

HTML để tạo CSS Sprite

Bạn soạn thảo một đoạn code như sau:

<ul>
	<li><span id="home"></span>Home</li>
	<li><span id="next"></span>Next</li>
	<li><span id="previous"></span>Previous</li>
	<li><span id="fullscreen"></span>Fullscreen</li>
</ul>

Trong đó, thẻ span sẽ chứa hình ảnh.

CSS Sprite

Ta thiết lập chiều ngang và cao của span bằng kích thước icon. Những phần bên ngoài ô này sẽ bị ẩn đi.

Các list item với các id tương ướng sẽ có vị trí hình nền được dịch chuyển sao cho icon cần dùng hiện đúng ngay khung span tương ứng.

li {
	list-style-type: none;
}
li span {
	background: url('icon.png') no-repeat;
	display: inline-block;
	height: 16px;
	width: 16px;
}

#home {
	background-position: 0 -112px;
}

#next {
	background-position: -112px -192px;
}

#previous {
	background-position: -144px -192px;
}

#fullscreen {
	background-position: -32px -80px;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s