Một sprite html là gì. Tạo một sprite css - đánh dấu css. Những hình ảnh nào nên được kết hợp thành các họa tiết CSS?

Sprite không chỉ là một thức uống có hại mà còn là một tính năng CSS rất hữu ích giúp cải thiện tình trạng trang web của bạn và cũng mang lại nhiều ý tưởng mới về cách sử dụng nó.

Chúng ta đang nói về một phương pháp nổi tiếng là kết hợp tất cả các hình ảnh dịch vụ như nút, biểu tượng, phần nền và thậm chí cả logo thành một hình ảnh lớn, chính xác là cái được gọi là sprite (css sprite).

Tại sao bạn cần một sprite trên một trang web?

Đầu tiên, nó cho phép tất cả các hình ảnh trang trí của bạn hiển thị chính xác. Điều này không có nghĩa là hình ảnh trong bài viết mà là bản thân thiết kế của trang web. Điều này đặc biệt đúng đối với

Nếu bạn sử dụng hai hình ảnh riêng biệt cho một nút như vậy, trước tiên trình duyệt sẽ chỉ tải hình ảnh đầu tiên. Và khi bạn di chuột qua nút này, bạn có thể nhận thấy hình ảnh thứ hai có độ trễ xuất hiện vì nó sẽ chỉ tải sau hành động của bạn. Đó là cách các trình duyệt được thiết kế.

Thứ hai, sprite cho phép bạn đơn giản hóa việc thiết kế tệp kiểu về mặt địa chỉ hình nền. Trên thực tế, mọi người sẽ được cung cấp một bức tranh giống nhau, đó là chính sprite. Tất cả những gì bạn phải làm là chỉ ra tọa độ chính xác cho từng chi tiết của địa điểm và phần hiển thị của bức tranh lớn này.

Và thứ ba, nó vừa đẹp, ngăn nắp vừa hiện đại.

Cách sprite hoạt động trên một trang web

Vậy bản chất của phương pháp này là gì? Chúng tôi có một bức tranh lớn trong đó tất cả các chi tiết thiết kế được đặt thành một đống. Ví dụ, đây là một sprite của Amazon (đoạn) nổi tiếng:

Và bây giờ chúng ta hãy nhớ lại phần mở đầu của bộ phim Liên Xô cũ của chúng ta về Sherlock Holmes và bác sĩ Vaston. Ở đó, nếu bạn còn nhớ, một tấm giấy nến màu đen có các khe được đặt trên một loạt các chữ cái lộn xộn và một dòng chữ hoàn toàn có thể đọc được sẽ hiện rõ qua chúng.

Sprite hoạt động theo nguyên tắc tương tự. Từ một loạt hình ảnh có khoảng cách gần nhau, một hình ảnh được chọn để hiển thị một chi tiết cụ thể:

Nó được chọn như thế nào? Đơn giản và dễ dàng!

Bất kỳ hình ảnh nào trên sprite đều có kích thước riêng về chiều rộng và chiều cao. Và bất kỳ trong số chúng đều nằm ở một nơi được xác định nghiêm ngặt. Điều này có nghĩa là, khi biết kích thước của hình ảnh và tọa độ của nó, bạn có thể dễ dàng cho trình duyệt biết nơi cần tìm và chính xác nội dung cần hiển thị:

Cái nút (
chiều rộng: 180px;
chiều cao: 20px;
nền: url(sprite.png) không lặp lại;
vị trí nền: 0 -80px;
}

Mục nhập này có nghĩa là nút có lớp .button được cung cấp kích thước chiều rộng và chiều cao và hình nền, chính là sprite. Điểm then chốtđây là dòng cuối cùng của quy tắc:

vị trí nền: 0 -80px;

Nó chỉ cho trình duyệt biết tọa độ của phần hình ảnh mong muốn. Tọa độ được đặt cho bên trái góc trên cùng phần được chọn của hình ảnh. Số đầu tiên biểu thị khoảng cách theo chiều ngang, số thứ hai - theo chiều dọc.

Nếu chúng ta lấy góc trên bên trái của toàn bộ sprite làm điểm 0 ban đầu thì bản thân nguyên tắc sẽ trở nên rõ ràng. Chúng tôi chỉ cần đếm số pixel cần thiết cho phần đã chọn của hình ảnh và thay thế chúng vào dòng quy tắc trên.

Làm thế nào để tạo sprite cho một trang web?

Trong trường hợp của chúng tôi, phần được chọn nằm ở cạnh trái của sprite (0 theo chiều ngang) và cách cạnh trên của sprite 80 pixel.

Chỉ định làm giá trị thứ hai một số âm, do đó chúng tôi “kéo” toàn bộ hình ảnh lên 80 pixel. Và vì trước đây chúng tôi đã đặt nghiêm ngặt kích thước của hình ảnh hiển thị thành 180x20 pixel, nên không phải toàn bộ sprite sẽ hiển thị mà chỉ hiển thị nút chúng tôi cần:

Tọa độ của tất cả các hình ảnh trên sprite có thể được viết trước bằng thước trong Photoshop.

Nếu bạn quá lười mày mò, bạn có thể thử sử dụng dịch vụ đặc biệt- máy phát điện sprite. Cho anh ấy ăn tập tin ZIP với tất cả các bức ảnh của bạn, anh ấy sẽ đặt chúng vào một hình ảnh chung và xuất nó cùng với một tệp kiểu đã được thiết kế và tính toán sẵn.

Có nhiều phương pháp để tối ưu hóa trang web. Một số trong số chúng hoạt động, một số thì không. Tuy nhiên, có một số phương pháp bắt buộc đối với bất kỳ trang web và blog nào. Tôi muốn nói chuyện với bạn về một trong số họ.

Một trong những phương pháp chính để tối ưu hóa các trang web. Vì vậy, hôm nay chúng ta sẽ nói về cách kết hợp các họa tiết hình ảnh trên một trang web bằng CSS, từ đó tăng tốc độ tải của chúng.

Một ít lịch sử

Trong quá khứ xa xôi, khi các modem phát ra tiếng bíp trong các căn hộ và tốc độ kết nối không vượt quá 5 Kbps, mọi người đã miệt mài với nhiệm vụ khó khăn là làm thế nào để các trang web tải nhanh hơn mà không phải trả số tiền cắt cổ cho lưu lượng truy cập đến. Họ nghĩ, tức là họ nghĩ, và họ nảy ra ý tưởng ghép những hình ảnh được sử dụng trên trang thành các họa tiết.

Và chúng ta đi xa...

Kết hợp hình ảnh thành sprite

Và như vậy, như chúng ta đã biết trước đó, sprite là một số hình ảnh được sắp xếp thành một trên nền trong suốt, được truy cập bằng cách sử dụng Thuộc tính CSS vị trí nền. Nhưng xin đừng nhầm lẫn nó với ảnh ghép. Sprite ≠ ảnh ghép.

Để có được một sprite, bạn cần phải lắp tất cả các nút, biểu tượng, dấu đầu dòng và những thứ linh tinh khác càng gọn càng tốt vào một tập tin PNG. Đừng quên, nền phải trong suốt. Bây giờ hãy xem xét nó với một ví dụ.

Hãy nói rằng chúng ta có tập tin PSDÔi có nút 3 trạng thái đẹp thế này.

Blogger bố cục tự học trung bình làm gì? Nó cắt nút ở mỗi trạng thái và lưu nó vào tập tin riêng biệt. Tức là, một nút sẽ chụp 3 bức ảnh của người đàn ông tốt bụng này. Và nếu bạn cảm thấy căng thẳng, hãy nhớ rằng mỗi bức ảnh trên trang web đều là một phần bổ sung Yêu cầu HTTP, tải máy chủ và blog của bạn chạy ngày càng chậm hơn và chậm hơn và chậm hơn và chậm hơn và chậm hơn và chậm hơn...

Để ngăn điều này xảy ra, sẽ hợp lý hơn nhiều nếu lưu nút vào một tệp . Để thực hiện việc này, chúng tôi mở cùng một tệp PSD, xóa các mũi tên, dòng chữ và nền vô dụng khỏi tệp đó và sắp xếp tất cả các trạng thái nút càng gần nhau càng tốt mà không bị chồng chéo.

Đây là những gì chúng tôi đã kết thúc với. Trong mọi trường hợp, các nút không được chồng lên nhau.

Tuyệt vời, tập tin đồ họa Chúng tôi đã chuẩn bị xong, bây giờ hãy để tôi chỉ cho bạn cách bố trí nó.

Bố cục sprite

Bố cục của CSS sprite không khác gì bố cục hình ảnh bình thường, ngoại trừ một NHƯNG. Bạn cần biết không chỉ kích thước chính xác của hình ảnh bạn muốn hiển thị mà còn cả tọa độ của nó. Ví dụ: toàn bộ sprite của chúng tôi rộng 330 px và cao 150 px.

Nhưng chúng ta chỉ cần hiển thị một nút rộng 227 px và cao 41 px, chỉ định tọa độ chính xác của nó. Nếu bạn không có html tốt biên tập viên - tôi có thể.

Tạo một tập tin chỉ mục.html và viết vào đó những dòng mã cần thiết, loại tài liệu và tất cả những thứ đó.

Sau tất cả mọi thứ hành động tiêu chuẩn Xong, hãy thử hiển thị nút của chúng tôi.

Sau thẻ thân hình tạo một thùng chứa div với lớp cái nút– đây sẽ là nút của chúng tôi.

Đây là nơi html của chúng ta kết thúc và bây giờ chúng ta cần thêm các kiểu CSS cho nút.

Đoạn mã dưới đây cho thấy rằng đầu tiên chúng ta khai báo một lớp cái nút. Sau đó sử dụng thuộc tính chiều cao và chiều rộngđặt kích thước của nút của chúng tôi. Tài sản lý lịch cho phép chúng tôi chọn tệp mà chúng tôi sẽ sử dụng làm sprite và vị trí nền thiết lập tọa độ của hình ảnh chúng ta cần trong sprite này. Nó đơn giản.

1 2 3 4

.button ( chiều cao : 41px ; chiều rộng : 227px ; nền : url (img/sprite.png ) ; vị trí nền : 0px -12px ; )

Chúng ta hãy xem xét kỹ hơn về tài sản vị trí nền.

Như bạn có thể thấy từ đoạn mã trên, nó có hai ý nghĩa. Giá trị đầu tiên cho phép bạn đặt tọa độ hình ảnh dọc theo trục X và do đó, giá trị thứ hai dọc theo trục Y. Nút của chúng tôi không nhảy đến bất kỳ đâu dọc theo trục X, vì tất cả các trạng thái đều nằm bên dưới nhau. Do đó, để trạng thái thứ hai của nút xuất hiện khi di chuột, chúng ta cần thay đổi giá trị chịu trách nhiệm cho trục Y.

1 2	.button :hover ( vị trí nền : 0px -56px ; ) .button :active ( vị trí nền : 0px -98px ; )

Như bạn đã biết, và nếu không thì đúng vậy, mỗi nút có một số trạng thái.

Bình thường – trạng thái bình thường hoặc bình thường

Di chuột - trạng thái nút khi di con trỏ

Hoạt động - trạng thái nút khi nhấn

Chúng tôi đã tận dụng những đặc tính này.

Nếu bạn quá lười tạo các họa tiết theo cách thủ công và thường bận tâm đến Photoshop, một công cụ tuyệt vời dịch vụ miễn phí: spritepad.wearekiss.com. Chỉ cần ném nó vào khu vực làm việc những hình ảnh cần thiết và anh ấy sẽ tạo ra một sprite cho bạn.

Bị giam giữ

CSS sprites rất giai đoạn quan trọngđang trên đường tăng tốc trang web. Hãy đối xử với nó một cách tôn trọng và cố gắng sử dụng nó ở mọi nơi.

Đã thích:
27

Không thích: 4

Không có bản dịch có sẵn.

trước hoặc sau "trước" "sau" "sau"

Angry_bird tức giận.png. chỉ mục.html

Không có bản dịch có sẵn.

CSS sprites là đồ họa cho trang Web của bạn, được kết hợp thành một tệp đồ họa. "Tại sao lại là một tập tin?" - bạn hỏi. Thực tế là phương pháp lưu trữ hình ảnh này cho phép bạn cải thiện hiệu suất của các trang web cũng như lưu trữ Hình ảnh đồ hoạ có tổ chức hơn. Chúng ta hãy xem xét một số thực hành tốt nhất sử dụng sprite. Chính cái tên của các sprite có thể khiến bạn nhớ đến các sprite chơi game, retro bảng điều khiển trò chơi và thậm chí cả các trò chơi trình duyệt rất phổ biến hiện nay:

Vì vậy, khi áp dụng vào thiết kế Web, sprite chỉ là một tập tin lớn, chứa một số hình ảnh cho trang web của bạn, tiết kiệm thời gian tải xuống và truyền tệp qua mạng. Ví dụ: khi một sprite chứa 20-30 hình ảnh, điều này có thể giảm tải đáng kể cho máy chủ, vì nếu những hình ảnh này được lưu trữ riêng biệt, máy chủ sẽ phải thực hiện 20-30 yêu cầu riêng biệt để có được từng hình ảnh như vậy. Nhờ sprite, chỉ có một yêu cầu HTTP được gửi đến máy chủ - để nhận một hình ảnh duy nhất. Một sprite có thể không “đọc được” bằng mắt thường, vì nhiệm vụ chính của nó chỉ là lắp ráp các “mảnh” khác nhau trong thiết kế của bạn lại với nhau. Ví dụ: một sprite có thể trông như thế này:

Sprites được sử dụng bởi hầu hết các trang web hiện đại và VKontakte nổi tiếng cũng không ngoại lệ. Ví dụ: đây là cách nó lưu trữ “các phần” của giao diện trong một tệp - cụ thể là các biểu tượng quen thuộc:

Điều tuyệt vời khi sử dụng CSS sprite là bạn chỉ cần gửi cho máy chủ một tệp đồ họa chứa tất cả hình ảnh của bạn, thay vì nhiều hình ảnh riêng lẻ - và thông qua CSS, bạn có thể hiển thị bất kỳ đoạn nhỏ nào của tệp đồ họa đó làm nền cho một phần tử. Một số người nghĩ rằng từng hình ảnh tải nhanh hơn nhưng điều này không đúng. Khi tải lên một tệp đồ họa có nhiều hình ảnh, chúng tôi chỉ gửi một yêu cầu đến máy chủ và khi tải lên một số lượng lớn hình ảnh, chúng tôi sẽ gửi nhiều yêu cầu hơn đến máy chủ. Việc kết hợp các hình ảnh vào một tệp không chỉ có thể làm giảm đáng kể số lượng yêu cầu HTTP mà còn giảm kích thước tổng thể tập tin hình ảnh.

Hãy để tôi cho bạn một ví dụ khác về sprite. Đây là cách một trang web nổi tiếng của phương Tây dành riêng cho việc thiết kế lưu trữ các yếu tố đồ họa:

Bạn có thể hỏi khi nào Cách tốt nhất có thể chuẩn bị một sprite? Có hai cách tiếp cận khác nhau cho việc này.

Các cách tiếp cận khác nhau - tạo sprite trước và sau khi tạo trang web

Có hai cách tiếp cận phổ biến khi tạo bảng sprite - thực hiện trước hoặc sau khi tạo trang web của bạn. Bạn có thể đặt tất cả hình ảnh vào một bảng sprite trước khi tạo trang web. Đây là những gì chúng tôi gọi là cách tiếp cận "trước". Ngoài ra, bạn có thể tạo tất cả hình ảnh dưới dạng tệp riêng biệt, giúp việc chỉnh sửa chúng dễ dàng hơn. Sau khi trang web được xây dựng và tất cả các hình ảnh đã được chuẩn bị, bạn có thể nhanh chóng và dễ dàng tạo một bảng sprite theo cách thủ công hoặc sử dụng một trong nhiều công cụ. Chúng tôi sẽ gọi đây là cách tiếp cận “sau”. Nếu bạn chưa quen với sprite sheet hoặc chưa quen với thiết kế Web thì cách tiếp cận “sau” sẽ phù hợp hơn với bạn. Có rất nhiều tiện ích, dịch vụ và chương trình giúp bạn tạo sprite, hầu hết chúng đều được phân phối và cung cấp miễn phí.

Sắp xếp các hình ảnh trong sprite một cách có tổ chức

Khi tạo sprite trong Photoshop, bạn nên đặt ngay tất cả các hình ảnh một cách có tổ chức và theo một trình tự nhất định do bạn chọn để sau này làm việc với chúng sẽ dễ dàng và đơn giản. Cố gắng luôn làm tròn không gian cho mỗi hình ảnh sprite đến 10 pixel gần nhất hoặc để lại nhiều không gian hơn xung quanh họ nếu tất cả họ đều cùng cỡ. Khi viết kiểu CSS, bạn sẽ không phải ghi lại số đo tọa độ và bạn sẽ ít có khả năng quên số tọa độ hình ảnh cần thiết. Đây là một ví dụ về việc đặt thành công các hình ảnh khác nhau trong một sprite:

Từ lý thuyết đến thực hành! Tạo một chú chim hoạt hình từ Angry Birds bằng cách sử dụng sprite

Như vậy, chúng ta đã làm quen với khái niệm sprite trong thiết kế Web, nhưng lý thuyết mà không thực hành thì chẳng là gì cả. Vì vậy, bây giờ bạn và tôi sẽ tạo sprite đầu tiên của mình và học cách tạo hoạt hình đơn giản trên trang HTML. Ví dụ của chúng tôi sẽ dựa trên một nhân vật trong trò chơi Angry Birds - đây là một con chim màu đỏ ngộ nghĩnh. Trước tiên, hãy chuẩn bị một hình ảnh sprite ở định dạng .PNG chứa 4 giai đoạn hoạt hình của chú chim:

Hãy tạo một thư mục Angry_bird ở đâu đó trên đĩa - chúng tôi sẽ đặt các tệp mẫu của mình ở đó. Chúng ta lưu sprite có hình chim vào thư mục này và gọi tệp là Angry.png. Bước tiếp theo- tạo một tệp trong cùng thư mục có tên là index.html - đây sẽ là trang thử nghiệm của chúng tôi có hoạt ảnh. Tiếp theo, mở tệp này trong trình chỉnh sửa và đặt đoạn mã sau vào đó:

Bài học trên trang web - Minh họa cách làm việc với các sprite $(document).ready(function() ( // đây sẽ là mã jQuery tạo hoạt ảnh ));

Hãy để tôi giải thích một chút những gì chúng tôi đã làm bây giờ. Đầu tiên, chúng tôi đặt tài liệu HTML của mình thành mã hóa UTF-8, có nghĩa là chúng tôi phải lưu index.html của mình trong mã hóa đó. Bạn cũng có thể đặt một cái khác, chẳng hạn như windows-1251 - đối với nhiệm vụ của chúng tôi, điều này không quan trọng. Tiếp theo, chúng tôi đã kết nối tệp style.css với tài liệu (nó chưa có trong thư mục Angry_bird của chúng tôi, chúng tôi sẽ tạo nó sau). Chúng tôi cũng đã cung cấp một liên kết đến tập lệnh bên ngoài và kết nối thư viện jQuery- Với sử dụng jQuery Chúng tôi sẽ tự động thay đổi hình ảnh của con chim và thay đổi các “giai đoạn” của nó từ hình ảnh. Chúng tôi cũng đã chuẩn bị một khối JavaScript nội bộ, nơi chúng tôi sẽ đặt mã tạo hoạt ảnh cho chú chim. Và cuối cùng, phần chính của tài liệu chứa một siêu liên kết duy nhất, bên trong là một khối DIV và ID của nó được đặt thành birdImage và lớp mặc định là bird-sleeping . Điều này có nghĩa là con chim của chúng ta sẽ “ngủ” khi mở trang - điều này tương ứng với hình ảnh phía dưới bên trái bên trong sprite - nơi mắt nó nhắm lại. Bây giờ là lúc để “cắt” sprite của chúng ta, tức là. chọn hình ảnh riêng lẻ từ nó.

Cắt sprite bằng dịch vụ SpriteCow.Com

Nhiệm vụ "cắt lát" một sprite khá tốn công sức - nó đòi hỏi phải cẩn thận để không mắc sai lầm với tọa độ xác định từng hình ảnh trong sprite. May mắn thay, ngày nay có những dịch vụ giúp loại bỏ hoàn toàn vấn đề đau đầu này của người thiết kế và thiết kế bố cục. Mình sử dụng dịch vụ cắt lát http://spritecow.com và giới thiệu cho các bạn. Bản chất của dịch vụ là đơn giản và rất tiện lợi - chúng tôi chọn từng hình ảnh con chim bằng chuột và SpriteCow cung cấp cho chúng tôi mã CSS tạo sẵn có tọa độ. Tất cả những gì chúng ta phải làm chỉ đơn giản là thiết lập 4 kiểu cho từng giai đoạn của con chim! Sau khi vào trang web, chúng tôi thấy 2 nút - “Mở hình ảnh” và “Hiển thị ví dụ”. Chúng ta cần nút đầu tiên, nhấp vào nó:

Trong hộp thoại mở ra, hãy chọn tệp sprite Angry.png của chúng tôi, sau đó chúng tôi sẽ xem sprite của chúng tôi đã được tải như thế nào trên trang web. Tiếp theo, chúng ta cần xác định màu nền, để thực hiện việc này, hãy nhấp vào thanh công cụ “Chọn nền” và chỉ vào vùng màu trắng của hình ảnh của chúng ta - điều này sẽ cho phép chúng ta cắt từng giai đoạn của con chim một cách chính xác:

Chọn hình ảnh đầu tiên và tự động lấy mã CSS cho nó:

Bây giờ là lúc tạo tệp style.css trong thư mục Angry_bird của chúng ta. Ở đó, chúng tôi chèn tuần tự 4 đoạn mã CSS được tạo, nhưng thay vì lớp .sprite tiêu chuẩn do SpriteCow cung cấp cho chúng tôi, hãy gọi các kiểu của chúng tôi rõ ràng hơn. Ngoài ra, vì chúng tôi lưu trữ hình ảnh sprite trực tiếp trong thư mục gốc nên chúng tôi sẽ xóa phần tử đường dẫn không cần thiết - imgs/ khỏi thuộc tính nền. Tôi đã nhận được nó như thế này:

/* chim "bình thường". Hình ảnh trên cùng bên trái trong sprite */ .bird-normal ( nền: url("angry.png") no-repeat -12px -16px; width: 97px; Height: 94px; ) /* "Happy" bird. Hình ảnh trên cùng bên phải trong sprite */ .bird-happy ( nền: url("angry.png") no-repeat -118px -17px; width: 97px; Height: 94px; ) /* "Sleeping" bird. Hình ảnh phía dưới bên trái trong sprite */ .bird-sleeping ( nền: url("angry.png") no-repeat -12px -120px; width: 97px; Height: 94px; ) /* "Angry" bird. Hình ảnh dưới cùng bên phải trong sprite */ .bird-angry ( nền: url("angry.png") no-repeat -118px -120px; width: 97px; Height: 94px; )

Bươc cuôi- Chúng tôi viết mã jQuery tạo hoạt ảnh.

Bây giờ chúng ta đã cắt thành công sprite và đặt 4 kiểu cho mỗi hình ảnh trong tệp style.css của mình, tất cả những gì chúng ta cần làm là viết một số mã jQuery sẽ thêm hoạt ảnh khi siêu liên kết của chúng ta được di chuột qua và khi liên kết được nhấp vào. Như chúng ta nhớ, theo mặc định chúng ta có lớp bird-sleeping , tức là. chú chim đỏ của chúng ta sẽ "ngủ" khi mở một tài liệu :)

Tất cả hoạt ảnh sẽ dựa trên 3 phương thức jQuery:

di chuột - trình xử lý để di con trỏ qua một liên kết và để di chuyển con trỏ ra khỏi liên kết. Khi chúng ta di con trỏ, con chim sẽ “thức dậy” - tức là. lớp học sẽ trở nên bình thường như chim
mousedown - trình xử lý để nhấp chuột trái vào một liên kết. Trong trường hợp này, con chim sẽ trở nên “hạnh phúc” - tức là. Khối DIV sẽ được gán lớp bird-happy
mouseup - trình xử lý nhả nút chuột trái. Khi được thả ra, con chim sẽ trở nên “tức giận” - tức là. Khối DIV được gán lớp chim giận dữ

Vì vậy, hãy dán đoạn mã sau vào nơi chúng tôi đã chuẩn bị đơn vị trong nhà JavaScript được đặt trên trang:

$(document).ready(function() ( // đây là mã jQuery tạo hoạt ảnh $("#birdImage").hover(function() ( $(this).removeClass("bird-sleeping"); $ (this).removeClass("bird-angry"); $(this).removeClass("bird-happy"); $(this).addClass("bird-normal"); ), function() ( $( this ).removeClass("bird-normal"); $(this).removeClass("bird-angry"); $(this).removeClass("bird-happy"); $(this).addClass("bird- đang ngủ "); )); $("#birdImage").mousedown(function() ( $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-normal"); $ ( this).removeClass("bird-angry"); $(this).addClass("bird-happy"); )).mouseup(function() ( $(this).removeClass("bird-sleeping"); $ (this).removeClass("bird-normal"); $(this).removeClass("bird-happy"); $(this).addClass("bird-angry"); )); ));

Sẵn sàng! Kiểm tra hoạt ảnh

Được rồi, mọi chuyện đã kết thúc rồi! Con chim của chúng tôi đã sẵn sàng và đã mang lại sự sống cho trang giấy bằng hình ảnh động của nó! :) Bạn có thể xem bản demo. Tải về kho lưu trữ với một ví dụ ở cuối bài viết.

Từ sprite (tiếng Anh sprite - cổ tích, ma quái) lần đầu tiên được sử dụng bởi các nhà làm phim hoạt hình của Disney với một khả năng hơi khác, các nhà làm phim hoạt hình để làm việc nhanh hơn và dễ dàng hơn. sáng tạo thuận tiện và “hồi sinh” các nhân vật hoạt hình, đầu tiên họ vẽ tất cả các giai đoạn chuyển động của mình trên phim trong suốt, sau đó phủ những phim này lên nền chính - sân khấu và nhận các khung hình của phim hoạt hình, từ đó tiết kiệm thời gian, tiền bạc và thần kinh của các nghệ sĩ. .. họ gọi những bộ phim này là những hình ảnh.

Sau đó thuật ngữ sprite được đưa vào đô họa may tinh và trở nên đặc biệt phổ biến ở trò chơi máy tính- nhưng đây cũng không hẳn là điều tôi muốn nói với bạn.. Hôm nay tôi muốn nói với bạn về cái gọi là CSS sprites..

Vì vậy, sprite trong CSS thường được gọi là một hình ảnh, bao gồm một số “phần” được hiển thị riêng biệt tùy thuộc vào hành động của người dùng.

Có quá nhiều từ... Tôi sẽ chỉ cho bạn một ví dụ...

Đây là một sprite hiện diện trên mọi trang của trang web này:

Chỉ là ở trạng thái “bình tĩnh”, bạn sẽ được hiển thị một phần của nó và khi bạn di con trỏ đến phần khác.

Làm thế nào để làm nó? Nó thực sự khá đơn giản.

TRONG trong ví dụ nàyđối với một khối có kích thước cố định, chúng tôi tải hình ảnh “kép” làm nền, nhưng vì bản thân khối đó, do kích thước được chỉ định cho nó, chính xác bằng một nửa chiều cao của hình ảnh, trình duyệt chỉ hiển thị “phần” đầu tiên của hình nền và khi bạn di con trỏ, lớp giả :hover được kích hoạt với thuộc tính vị trí nền để di chuyển nền lên bằng cách khoảng cách cần thiết, từ đó hiển thị phần thứ hai của bức tranh.

Được rồi, hãy để yên logo của tôi, đặc biệt là khi tôi đã nói dối bạn một chút... hãy làm điều gì đó hữu ích hơn cho bạn, ví dụ như nút này:

Hãy mở Photoshop và vẽ một cái gì đó như thế này trong đó:

Điều chính ở đây là không phạm sai lầm về kích thước! Phần thứ hai của hình ảnh, nơi nút của chúng tôi hoạt động, phải có kích thước giống hệt với phần đầu tiên của hình ảnh, nếu không sau này, khi bạn di con trỏ, mọi thứ sẽ "nhảy". Tốt nhất là trước tiên bạn nên vẽ một phần của bức tranh, sau đó sao chép nó, chạy qua các bộ lọc, vẽ xong thứ gì đó và dán hai hình ảnh thành một... tuy nhiên, tôi không thích học Photoshop...

Vì vậy, chúng ta có một hình ảnh “kép” 175 x 80 pixel, hãy nhớ các kích thước này và bắt đầu viết mã.

Tôi hiểu nó như thế này... hãy nhìn vào kết quả và đọc các nhận xét trong mã:

CSS sprite

phần thân (màu nền: #020)
h1 (cỡ chữ: 24px; màu: #ddd)

/* Tạo một lớp riêng cho các liên kết có nút */
a.sprite(
hiển thị:khối; /* Liên kết sẽ là khối. */
chiều rộng: 175px; /* Chặn chiều rộng 175 pixel theo chiều rộng của hình ảnh “kép” của chúng tôi */
chiều cao:40px; /* Chiều cao khối 40 bằng một nửa chiều cao của hình ảnh kép của chúng ta */
nền:url("sprite.png"); /* đặt bức ảnh làm nền (biết rằng chỉ hiển thị một nửa bức ảnh) */
lề:3px; /* "khoảng trống" giữa các nút */
căn chỉnh văn bản:giữa; /*văn bản được căn giữa */
chiều cao dòng: 40px; /* Khoảng cách giữa các dòng là 40 pixel để văn bản được căn giữa trong nút */
cỡ chữ: 18px; /* phông chữ 18 pixel */
màu sắc:#ddd; /*màu xám gần với màu trắng hơn */
trang trí văn bản: không có /*chúng ta sẽ không gạch dưới các liên kết của lớp này */
}

/* Kiểu liên kết khi được di chuột */
a.sprite:di chuột (
vị trí nền: 0 -40px; /* TẤT CẢ SỰ HUYỆN THOẠI ĐANG Ở ĐÂY! chúng tôi di chuyển nền lên 40 pixel, với giá trị vị trí nền âm, từ đó hiển thị phần thứ hai của hình ảnh nơi nút của chúng tôi đang hoạt động */
màu: #fff /* màu trắng */
}

Đây là thực đơn chúng tôi có:

Nút 1
Nút 2
Nút 3
Nút 4

Tôi nghĩ nhiều độc giả đang thắc mắc: “Tại sao lại cần đến những họa tiết này nếu có thể thực hiện được điều tương tự bằng cách sử dụng hai hình ảnh cá nhân, trong đó một nền chỉ dành cho một liên kết và nền thứ hai dành cho một liên kết với :hover , mà không cần phải vật lộn với Photoshop và không cần tính toán tọa độ nền cho CSS??"

Thứ nhất: Tốc độ tải hình ảnh tăng lên đáng kể!! Mặc dù thực tế là một hình ảnh “kép” có trọng lượng tương đương với hai hình ảnh “đơn” nhỏ riêng biệt, việc tải một hình ảnh lớn sẽ nhanh hơn vì trình duyệt không tạo thêm các yêu cầu HTTP tới máy chủ.

Bạn có nhớ khi tôi cho bạn xem logo sprite của mình và nói rằng tôi đang nói dối không? Vì vậy, sự xảo quyệt của tôi nằm ở chỗ bức ảnh này không chứa hai phần logic của hình ảnh, mà là mười tám phần!!

Và nó trông như thế này đầy đủ:

Nghĩa là, hầu hết tất cả đồ họa mà bạn nhìn thấy trên trang web này thực sự đến với bạn dưới dạng một hình ảnh duy nhất! tập tin CSS Tôi sẽ không thể hiện ra, tôi sợ điều đó..)),

Vì vậy, đây là các yêu cầu HTTP... nếu có 18 hình ảnh thay vì một hình ảnh thì cuộc đối thoại của trình duyệt với máy chủ sẽ trông giống như thế này:

Trình duyệt: Xin chào máy chủ! Tôi đến đây từ bạn, theo yêu cầu của tôi, nhận HTML và Tài liệu CSS, vậy là họ chỉ ra rằng trong thư mục “đồ họa” của bạn.. nên có một bức ảnh có tên: “picture1” bỏ nó đi phải không?
Server: Chào Browser, lâu rồi không gặp, bây giờ tôi vào xem... ừ, tôi có hình như thế này! Nắm lấy!!
Trình duyệt: Cảm ơn, hiểu rồi! Nhưng tôi vẫn cần "picture2" trong cùng một thư mục..
Máy chủ: Vâng, và có một cái.. Tôi đang gửi..
Trình duyệt: Đã tải.. nhưng “picture3” cũng được liệt kê ở đây.
Máy chủ: Và bạn không thể ngủ được! Hãy giữ hình ảnh của bạn!!
Trình duyệt: Cảm ơn bạn! Vâng, thành thật mà nói, tôi đã chán nó rồi, nhưng người dùng của tôi muốn tải trang hoàn toàn... tóm lại, bạn cũng nên có “picture4” ở đó...
Máy chủ: Bạn bắt đầu làm tôi căng thẳng rồi đấy! Để hình ảnh của bạn!!
Trình duyệt: Xin lỗi, nhưng không phải lỗi của tôi mà có quá nhiều hình ảnh ở đây!!! Cần "hình5"!
Máy chủ: Bạn đang làm bộ xử lý của tôi sôi lên rồi!! Tôi khẳng định rằng!! Nhận hình ảnh của bạn!!
... ... ...

Tôi sẽ không lên tiếng thêm nữa, bởi vì những gì tiếp theo là ngôn từ tục tĩu…

Tại sao tất cả những cuộc trò chuyện này giữa máy chủ và trình duyệt (máy khách), tốn rất nhiều thời gian và lưu lượng truy cập, đồng thời cũng tải máy chủ khi số lượng lớn khách truy cập trang web, nếu việc thực hiện một yêu cầu HTTP và nhận tất cả 18 ảnh trong một gói sẽ nhanh hơn và tiết kiệm hơn nhiều!!

Thứ hai: Việc tải hình ảnh thứ hai khi sử dụng lớp giả :hover chỉ xảy ra tại thời điểm người dùng di chuột qua liên kết với hình ảnh đầu tiên. Nếu đây là một hình ảnh nhỏ giống như một nút trong ví dụ trên thì sẽ không có gì đặc biệt xấu xảy ra - hình ảnh thứ hai sẽ tải nhanh và người dùng sẽ không nhận thấy bất cứ điều gì... nhưng nếu đây là một hình ảnh lớn về trọng lượng và kích thước thì sao? ? Sau đó, người dùng sẽ xem nó tải như thế nào, mặc dù anh ta đã chuẩn bị tâm lý cho sự thay đổi nhanh chóng của hình ảnh! Một điểm cộng nữa cho sprite! ... mặc dù, thành thật mà nói, đây cũng là một điểm trừ.. một điểm trừ nếu người dùng không bao giờ di con trỏ trong phiên.. hình ảnh được tải nhưng không hữu ích với anh ta.. nhưng tin tôi đi, “nạn nhân của giao thông” hầu như luôn mang lại kết quả. !

Và thứ ba: Dù nó có vẻ lạ lùng đến thế nào đối với bạn thì nó vẫn rất tiện lợi!! Thật thuận tiện khi chỉ ra đường dẫn đến cùng một hình ảnh trong mã, thật thuận tiện khi chỉnh sửa nó trong Photoshop, ví dụ, để làm cho toàn bộ trang web sáng hơn hoặc tối hơn bằng cách làm việc với một hình ảnh duy nhất, thuận tiện để lưu trữ, thuận tiện để tải lên máy chủ và ngay cả trong CSS, thật thuận tiện khi làm việc với một sprite lớn! - mặc dù điều này đòi hỏi những kỹ năng và thói quen nhất định..

Được rồi, hãy tự quyết định xem có nên sử dụng sprite hay không.. và công việc kinh doanh của tôi nhỏ, chỉ để mang thông tin đến cho bạn, có thể nói như vậy.. nếu có thêm câu hỏi nào phát sinh, tôi đang đợi bạn tại

Trước khi pseudo-class:hover xuất hiện trong CSS, việc tạo rollover - một phần tử thay đổi diện mạo khi được di chuột qua - đã được triển khai thông qua Ngôn ngữ JavaScript. Ngày nay, việc này được thực hiện dễ dàng hơn nhiều, nhưng có một nhược điểm: nếu một số hình nền xuất hiện ở trạng thái:hover (tức là khi di con trỏ qua một phần tử), thì nó sẽ bắt đầu tải tại thời điểm con trỏ được di chuột chứ không phải khi tổng tải trang.

Vì lý do này, có thể có một chút chậm trễ khi hình ảnh xuất hiện lần đầu tiên. Và mặc dù độ trễ này không còn xảy ra với tất cả các lần di chuyển con trỏ tiếp theo nhưng nhiều nhà phát triển đã nghĩ về cách khắc phục sự cố này. Ví dụ, với sử dụng JavaScript Bạn có thể đảm bảo rằng tất cả hình nền đều được tải trước. Nhưng có một cách không cần kiến thức về ngôn ngữ lập trình đó là sử dụng sprite.

CSS sprite là gì

CSS sprite là một tệp đồ họa duy nhất chứa nhiều hình ảnh khác nhau. Nó có thể chứa, ví dụ, tất cả yếu tố đồ họa giao diện như biểu tượng, nút bấm, v.v. Ngoài ra, các sprite thường kết hợp các hình nền cùng với các biến thể của chúng cho trạng thái:hover. Ví dụ điển hình yêu tinh:

Sprite, chứa tất cả các biểu tượng được sử dụng Sprite với các biểu tượng mạng xã hội và các biến thể của chúng cho: di chuột

Lợi ích của CSS Sprites

CSS sprite chứa hinh nên cho các trạng thái khác nhau của các phần tử và nó được tải hoàn toàn khi trang web được tải. Điều này ngăn quá trình cuộn qua chậm lại khi bạn di chuột qua phần tử lần đầu tiên.
Số lượng cuộc gọi đến máy chủ giảm. Cuối cùng, để tải từng biểu tượng nhỏ bạn cần yêu cầu riêng, và càng ít yêu cầu thì càng tốt. Để tải xuống một sprite, bạn chỉ cần một yêu cầu tới máy chủ.
Một ưu điểm khác của việc lưu trữ nhiều ảnh trong một sprite là nếu chúng có bảng màu tương tự nhau thì một ảnh lớn sẽ nặng hơn các ảnh nhỏ riêng lẻ cộng lại.
Tất cả điều này thường có tác động tích cực đến tốc độ tải trang web.

Cách tạo sprite từ ảnh

Trong trường hợp cổ điển, các họa tiết được tạo trong trình chỉnh sửa hình ảnh. Những bức tranh nhỏ được đặt tuần tự trên một khung vẽ lớn (thường có nền trong suốt), sau đó được lưu dưới dạng tệp đồ họa.

Phương pháp tạo sprite thủ công là một công việc khá tốn thời gian. Vì vậy, khi việc sử dụng sprite bắt đầu phát triển, các dịch vụ trực tuyến dành cho tạo tự động ví dụ như các tấm sprite, Spritegen, Máy phát điện RetinaSprite và những người khác. Bạn đang tải hình ảnh cần thiết trong các tệp riêng biệt vào trang web và một sprite sẽ được tạo cho bạn, bạn có thể tải ngay xuống máy tính của mình.

Cách sử dụng các họa tiết CSS

Bây giờ là lúc tìm hiểu cách sử dụng CSS sprite trong thực tế. Chúng tôi sẽ cho bạn thấy ví dụ nhỏ sử dụng một sprite chứa các biểu tượng mạng xã hội(chúng tôi đã trình bày ở trên). Ở trạng thái liên kết bình thường, biểu tượng mạng xã hội sẽ có màu ( hàng đầu sprite) và khi bạn di con trỏ nó sẽ chuyển sang màu xám (như ở hàng dưới cùng).

Đánh dấu HTML trông như thế này:

Chúng tôi đã tạo lớp riêng của mình để liên kết với từng mạng xã hội. Vì đây là ví dụ thử nghiệm nên chúng tôi không lãng phí thời gian điền vào các thuộc tính href - thay vì liên kết đến các trang web thực, chúng tôi đặt phần giữ chỗ. Bên trong thẻ chúng tôi không đăng bất cứ điều gì bởi vì vẻ bề ngoài các liên kết sẽ phản hồi bằng hình nền của chúng cùng với các biểu tượng mạng xã hội.

Hãy chuyển sang CSS. Trước hết chúng ta hãy viết ra phong cách chung cho tất cả các liên kết:

A ( hình nền: url(https://goo.gl/1t18Rz); lặp lại nền: không lặp lại; chiều cao: 98px; chiều rộng: 100px; hiển thị: khối nội tuyến; lề phải: 10px; )

Hai dòng tiếp theo là chiều cao và chiều rộng của mỗi phần tử . Những giá trị này được xác định như thế nào? Ở đây chúng ta bắt đầu từ kích thước của các biểu tượng trong sprite. Chiều cao của mỗi biểu tượng là 98 pixel và chiều rộng là 100 pixel. Tiếp theo, chúng ta sẽ định vị hình nền cho từng link, điều chỉnh nền sao cho icon vừa khít với “cửa sổ” của link có kích thước 98x100 pixel.

A.facebook ( vị trí nền: trên cùng bên trái; )

Hãy đi xa hơn: định vị nền cho liên kết Twitter. Biểu tượng Twitter được đặt ở bên phải Facebook và ở hai bên mà không tạo ra bất kỳ khoảng trống nào. Chúng ta cần di chuyển sprite sang bên trái đủ pixel để ẩn biểu tượng Facebook và lấp đầy hoàn toàn khu vực liên kết bằng biểu tượng Twitter. Vì chiều rộng của mỗi biểu tượng là 100 pixel nên chúng tôi dịch chuyển nền sang trái 100 pixel. Chúng tôi chưa thay đổi vị trí dọc ở bất kỳ đâu mà để nguyên giá trị trên cùng:

A.twitter ( vị trí nền: -100px trên cùng; )

Chúng ta sẽ thực hiện thao tác tương tự cho các liên kết còn lại, thêm vào từng liên kết tiếp theo định vị ngang 100 pixel khác, do đó di chuyển hình ảnh ngày càng nhiều về bên trái. Bạn sẽ nhận được hình ảnh này:

A.youtube ( vị trí nền: -200px trên cùng; ) a.instagram ( vị trí nền: -300px trên cùng; ) a.linkedin ( vị trí nền: -400px trên cùng; ) a.tumblr ( vị trí nền: -500px trên cùng ; ) a.google ( vị trí nền: -600px trên cùng; )

Kết quả của mã này được hiển thị trong ảnh chụp màn hình bên dưới:

Bây giờ chúng ta hãy xem hành vi hình nền khi bạn di chuột qua một liên kết. Chúng ta cần dịch chuyển sprite theo chiều dọc lên trên để biểu tượng từ hàng dưới cùng của sprite rơi vào vùng xem. Mọi thứ ở đây khá đơn giản và có thể được giải quyết bằng một quy tắc CSS, cụ thể là bằng cách gán giá trị đáy cho thuộc tính nền-vị trí-y:

A: di chuột ( nền-vị trí-y: dưới cùng; )

Trong trường hợp của chúng tôi, kiểu này có thể được viết một kiểu cho tất cả các liên kết và nó sẽ hoạt động chính xác. Tuy nhiên, trong những tình huống khác khi các phần tử trong sprite có thứ tự khác, bạn có thể cần phải viết nhiều mã hơn.

Xem các bản demo bên dưới để biết kết quả hoạt động của các họa tiết (để làm cho ví dụ đẹp hơn, chúng tôi đã thực hiện chuyển đổi nền mượt mà hơn khi di con trỏ):

Nếu bạn quan tâm, đây là dòng chịu trách nhiệm cho sự thay đổi trơn tru của các biểu tượng (đừng lo, lát sau chúng ta sẽ nghiên cứu hoạt ảnh CSS và đặc biệt là thuộc tính transition):

A ( chuyển tiếp: tất cả 0,2 giây dễ dàng; )

Vậy là bây giờ bạn đã biết CSS sprite là gì và chúng có thể hữu ích như thế nào. Ngoài việc tránh tình trạng chậm trễ khi tải ảnh nền, việc sử dụng sprite còn giúp giảm tải cho máy chủ. Hơn nữa, điều này Một cách thuận tiện lưu trữ tất cả các thành phần giao diện đồ họa ở một nơi.

Vì vậy, chúng tôi đã xem xét các phương pháp chính của việc tạo kiểu liên kết. Chúng tôi khuyên bạn nên luyện tập thêm để củng cố kiến thức đã học. Và chương tiếp theo trong cuốn sách của chúng tôi sẽ dành cho hoạt ảnh CSS, việc triển khai nó có thể thực hiện được nhờ các thuộc tính xuất hiện trong CSS3. Và trong bài đầu tiên chúng ta sẽ phân tích tính chất biến đổi -