04/10/2018, 19:58

Hướng dẫn từng bước sử dụng css sprite

Css Sprites là một kỹ thuật mà các bạn thiết kế và phát triển web đều nên biết, hôm nay mình sẽ hướng dẫn các bạn cách làm CSS Sprites từng bước một : Trong baì này mình sẽ giúp các bạn tạo 1 button sử dụng kỹ thuật css sprite này.các bạn có thể save hình sau về để test thử : Bước 1 ...

css-sprites

Css Sprites là một kỹ thuật mà các bạn thiết kế và phát triển web đều nên biết, hôm nay mình sẽ hướng dẫn các bạn cách làm CSS Sprites từng bước một :

Trong baì này mình sẽ giúp các bạn tạo 1 button sử dụng kỹ thuật css sprite này.các bạn có thể save hình sau về để test thử :

buttonsSprite

Bước 1 : Tạo File hình cho Css Sprites:

Để tạo 1 file hình dùng chung cho nhiều phần tử thì chìa khóa là bạn phải tính toán sao cho vừa khớp cả bề ngang lẫn chiều dọc phần tử mà bạn muốn tạo, để dễ hiểu các bạn có thể tham khảo hình sau :

Hướng dẫn từng bước tạo css sprites

Bước 2 : Tạo file css
Bạn đã tạo được file hình trong bước 1, giờ đây là lúc bắt nó hoạt động theo ý muốn , các bạn hãy copy đoạn code sau :

a.download:link, a.download:visited {
display:block;
awidth:202px;
height:64px;
text-indent:-9999px;
background:url(images/buttonsSprite.png) 0 0 no-repeat
}
a.download:hover, a.download:active {
display:block;
awidth:202px;
height:64px;
text-indent:-9999px;
background:url(images/buttonsSprite.png) 0 -64px no-repeat
}
a.demo:link, a.demo:visited {
display:block;
awidth:202px;
height:64px;
text-indent:-9999px;
background:url(images/buttonsSprite.png) -202px 0 no-repeat
}
.demo:hover, a.demo:active {
display:block;
awidth:202px;
height:64px;
text-indent:-9999px;
background:url(images/buttonsSprite.png) -202px -64px no-repeat
}

Bây giờ việc bạn cần làm là đặt đoạn code sau vào vị trí mà bạn muốn hiển thị các nút bấm (button)

<a href="#" class="demo">Demo</a>
<a href="#" class="download">Download</a>

Để hiểu rõ hơn về kỹ thuật này thì các bạn có thể tham khảo hình bên dưới từng bước hoạt động của nó

Hướng dẫn từng bước tạo css sprites

Hướng dẫn từng bước tạo css sprites

Hướng dẫn từng bước tạo css sprites

Hướng dẫn từng bước tạo css sprites

Rất đơn giản phải không các bạn, nếu bạn nào chưa hiểu rõ hoặc còn vướng mắc ở đâu thì có thể để lại lời nhắn sau bài viết này, mình sẽ giúp các bạn chỉnh sửa.

Chúc các bạn thành công !

Tags: css sprites css tips css turorial hoc css huong dan css thu thuat css

Chuyên Mục: Css

Bài viết được đăng bởi webmaster

  • Trang

    cho mình hỏi, ở 2 cái nút demo, vị trí xét toạ độ sao không là x: 202px, mà lại là -202px? mình thấy nó đi về bên tay phải mà?

    • Thu Thuat Web

      Cái -202px đó dùng để điều chỉnh độ cao chứ không phải điều chỉnh vị trí trái phải, ở đây thì nó sẽ chạy lên cao so với vị trí 0px

  • IT4RVN.TK

    cho mình hỏi có cách nào xác định tọa độ không?

Bài liên quan

Hướng dẫn từng bước sử dụng css sprite

Css Sprites là một kỹ thuật mà các bạn thiết kế và phát triển web đều nên biết, hôm nay mình sẽ hướng dẫn các bạn cách làm CSS Sprites từng bước một : Trong baì này mình sẽ giúp các bạn tạo 1 button sử dụng kỹ thuật css sprite này.các bạn có thể save hình sau về để test thử : Bước 1 ...

Trần Trung Dũng viết 19:58 ngày 04/10/2018

Hướng dẫn từng bước bảo mật dữ liệu trong doanh nghiệp

Trước khi tiến hành bảo mật dữ liệu cho doanh nghiệp , bạn cần xác định chính xác dữ liệu mà doanh nghiệp của bạn cần bảo vệ. Bản thân các doanh nghiệp thường không nắm chính xác những dữ liệu nào cần được bảo vệ, hoặc chỉ biết được một phần trong đó. Bước tiếp theo là thực hiện theo hướng dẫn ...

Vũ Văn Thanh viết 14:31 ngày 18/09/2018

Hướng dẫn từng bước thay đổi nghề nghiệp từ Tester sang BA (Business Analyst) - Nhà phân tích nghiệp vụ

Một chuyên gia kiểm thử là người kiểm tra phần mềm được phát triển để đảm bảo phần mềm đáp ứng các yêu cầu cuối cùng của khách hàng. Chuyên viên phân tích nghiệp vụ cũng chịu trách nhiệm xác minh phần mềm được xây dựng và phân phối có đáp ứng các yêu cầu cuối cùng của khách hàng hay không. Khía ...

Bùi Văn Nam viết 17:52 ngày 12/08/2018

[Kotlin] Hướng dẫn mọi người sử dụng StaggeredGridLayoutManager với recycler view trên Kotlin

Bạn đã quá chán với việc thiết kế các row của recycler view có giống nhau Hôm nay mình sẽ hướng dẫn mọi người phá cách 1 chút , làm cho recycler trở nên khác biệt hơn Bên trái là khi recycler view sử dụng GridLayoutManager Bên phải là recycler view sử dụng StaggeredGridLayoutManager, đây ...

Trịnh Tiến Mạnh viết 17:24 ngày 12/08/2018

Hướng dẫn 1 cách sử dụng action trong UITableViewCell

UITableView được sử dụng quá thường xuyên trong tất cả các App IOS. Và việc tạo custom UITableViewCell là 1 task quá common đối với bất kỳ lập trình viên nào. Bài viết này, mình muốn trình bày 1 cách mình hay sử dụng khi tạo custom view và action trong UITableViewCell. Để tạo custom ...

Hoàng Hải Đăng viết 17:15 ngày 12/08/2018
0