Cách tạo các sprite css. Giới thiệu về CSS Sprites dành cho người mới bắt đầu

Hãy kết thúc với danh sách. Bây giờ hãy tạo liên kết theo cách tương tự:

A( đệm:0 0 0 20px; nền:url("sprites.png") 0 -42px không lặp lại; ) a( đệm:0 0 0 20px; nền:url("sprites..png") 0 -21px không lặp lại)

Bộ chọn a có nghĩa là gì? Rõ ràng bộ chọn này buộc trình duyệt áp dụng kiểu này cho tất cả các liên kết có thuộc tính href có giá trị bắt đầu bằng chuỗi http://site/. Bản thân sprite được sử dụng theo cách tương tự như trong trường hợp danh sách. Tôi sẽ chỉ xem xét một liên kết - một liên kết tới blog của tôi.

1. Chúng tôi xác định liên kết mong muốn bằng href.. Bạn có thể chỉ cần gán một lớp cho liên kết mong muốn hoặc thêm kiểu cho thuộc tính style trực tiếp trong mã html. Hoặc xác định liên kết mong muốn bằng bất kỳ phương pháp nào khác.
2. Chúng tôi tạo lề 20 pixel từ cạnh trái của một liên kết cụ thể
3. Chỉ định hình ảnh sprites.png làm hình nền
4. Hình ảnh tôi chọn cho blog của mình cách cạnh trên 21 pixel, nghĩa là chúng ta cần di chuyển nền xuống 21 pixel. Trong css tôi viết nó như thế này: “0 -21px”

Bài tập về nhà

Sprites với độ dốc

Bây giờ hãy xem ví dụ thứ hai.


Hình ảnh này cho thấy một cửa sổ. Một cửa sổ có đầu trang, nội dung và chân trang. Mỗi phần tử này có một gradient nền được đặt cho nó. Nhìn kỹ hơn, nếu không nhìn thấy ngay thì có sự chuyển màu từ nhạt sang bão hòa.

Tôi sẽ chỉ cho bạn cách tạo các gradient trong cửa sổ này thành các họa tiết. Đầu trang và chân trang của cửa sổ sẽ có chiều cao cố định - 30 pixel. Phần thân cửa sổ sẽ giãn ra tùy theo độ dài của văn bản.

Bây giờ hãy viết mã html cho cửa sổ:

Hãy bắt đầu sử dụng sprite. Hãy bắt đầu với tiêu đề cửa sổ:

#window-header( chiều cao:30px; nền:#C0C0FF url("gradients.png") 0 0 lặp lại-x; )

Trong tệp gradients.png, đầu tiên có độ dốc cho tiêu đề, sau đó là phần thân và cuối cùng là dòng dưới cùng. Nghĩa là, độ dốc cho tiêu đề bắt đầu từ trên cùng. Do đó, chúng tôi chỉ cần đặt chính tệp đó làm nền và chỉ ra vị trí là “0 0”, nghĩa là không rút lui ở bất cứ đâu. Để làm cho gradient kéo dài theo chiều ngang, hãy viết “repeat-x”.

Để đảm bảo rằng toàn bộ dải màu vừa với tiêu đề, hãy đặt chiều cao thành 30 pixel.

Hãy đặt độ dốc cho phần chân trang giống như phần đầu trang:

#window-footer( chiều cao: 30px; nền: #C0FFC0 url("gradients.png") 0 -60px lặp lại-x; )

Chỉ lần này chúng ta sẽ di chuyển hình ảnh xuống 60 pixel.

Tình hình với phần thân cửa sổ phức tạp hơn. Phần thân của chúng ta sẽ giãn ra, không giống như phần đầu trang và chân trang. Nghĩa là, nếu chúng ta chỉ tạo một div cho thân cửa sổ và đặt một gradient ở đó thì tất cả các gradient sẽ xuất hiện trong div này cùng một lúc. Ngoài ra, chúng ta có thể đặt gradient cho phần thân cuối cùng theo chiều dọc, nhưng nếu chúng ta có nhiều gradient cho các khối kéo dài thì sao? Bạn không thể làm mọi thứ cùng một lúc. Chúng ta sẽ làm điều đó thông minh hơn một chút.

Mã CSS sẽ như sau:

#window-body( vị trí:tương đối; ) #window-body-gradient( vị trí:tuyệt đối; trái:0; top:0; chiều rộng:100%; chiều cao:30px; nền:url("gradients.png") 0 - 30px lặp lại-x ) #window-body-text( vị trí: tương đối; )

Bây giờ tôi sẽ kể cho bạn chi tiết hơn những gì chúng tôi đã làm ở đây. Đây là mã html của phần thân cửa sổ riêng biệt:

Như bạn có thể thấy, chúng ta có thêm hai diva nữa được nhúng vào cơ thể. "window-body-gradient" đầu tiên sẽ chịu trách nhiệm về độ dốc. “window-body-text” thứ hai dành cho văn bản. Ngoài ra, như đã thấy rõ trong mã CSS, chúng tôi đã áp dụng vị trí: tương đối; cho toàn bộ thân cửa sổ.

Đối với div gradient, chúng tôi chỉ định vị trí: tuyệt đối. Vì vậy, chúng tôi đã loại bỏ gradient div ra khỏi luồng chung. Bây giờ div này không có tác dụng gì cả. Vì chúng ta đã chỉ định vị trí: tương đối cho toàn bộ phần thân nên gradient div không nổi ở bất kỳ đâu xa hơn phần tử cha. Gắn nó vào cạnh trái và trên cùng của thân cửa sổ bằng cách sử dụng “left:0; trên cùng: 0;". Đặt chiều cao của gradient div thành 30 pixel. Nghĩa là, ở đây chúng tôi chỉ ra chiều cao của gradient mà chúng tôi sẽ đính kèm; nếu chiều cao của div lớn hơn chiều cao của gradient thì các họa tiết khác sẽ nhô ra trong div. Và cuối cùng, chúng ta đính kèm tệp gradients.png vào gradient div. Như thường lệ, chúng tôi di chuyển nền lên theo khoảng cách cần thiết; trong trường hợp này, chúng tôi di chuyển nền lên 30 pixel.

Bây giờ chúng ta có một gradient trong phần thân của cửa sổ. Nhưng nó che khuất văn bản. Để tránh văn bản bị che khuất, chúng tôi sẽ gói toàn bộ văn bản trong div và gán cho nó vị trí: tương đối. Sau khi được chỉ định, văn bản sẽ nằm trên cùng của dải màu.

Về cơ bản đó là tất cả. Bây giờ chúng ta đã đặt tất cả các gradient trong cửa sổ của mình. Và trong phần đầu, trong phần thân và ở tầng hầm.

Tôi giải thích dài dòng như vậy để mọi thứ hoàn toàn rõ ràng. Nhưng trên thực tế, nếu bạn biết một chút về bố cục thì có lẽ bạn chỉ cần xem các ví dụ là đủ:

Một lần nữa tôi nhân đôi liên kết.

Trên thực tế, bạn có thể đưa ra nhiều ví dụ về cách sử dụng sprite. Tôi chỉ đưa ra hai ví dụ, nhưng những ví dụ này đủ để hiểu cách hoạt động của các họa tiết. Nếu bạn có bất kỳ câu hỏi nào, hãy hỏi trong phần bình luận.

Đầu tiên, giới thiệu ngắn gọn. Khi tải một trang, trình duyệt chỉ được phép có 2 yêu cầu tới máy chủ (trong các trình duyệt hiện đại, con số này đã tăng lên 6). Mỗi thành phần của trang web, có thể là một tệp có biểu định kiểu, tệp javascript, hình ảnh, đều là các bản tải xuống độc lập yêu cầu một yêu cầu riêng tới máy chủ.

Có thể có nhiều hình thu nhỏ trên trang web. Ví dụ: biểu tượng cảm xúc, mũi tên, tất cả các loại yếu tố thiết kế nhỏ. Mỗi hình ảnh như vậy có trọng lượng không đáng kể, nhưng do số lượng yêu cầu quá lớn nên có vấn đề về tốc độ tải của trang web.

Cách đây rất lâu (2003-2004), một giải pháp cho tình trạng này đã được đề xuất với mục tiêu chính là tăng tốc độ tải trang bằng cách giảm số lượng yêu cầu đến máy chủ. Công nghệ này được gọi là "Sprites".

CSS sprite là gì

CSS Sprite- công nghệ kết hợp các hình ảnh nhỏ thành một. Sử dụng các dịch chuyển thông qua CSS, việc cắt bỏ phần hình ảnh mong muốn sẽ đạt được

Ví dụ: thay vì 10 hình ảnh, một hình ảnh sẽ được tải nhưng lớn hơn. Với sự phân phối hợp lý, điều này sẽ tăng tốc trang web. Tuy nhiên, điều chính ở đây là không lạm dụng nó. Việc kết hợp các hình ảnh không phải lúc nào cũng mang lại lợi thế khi tải một trang web.

Ví dụ CSS sprite

Hãy xem một ví dụ nhỏ về triển khai CSS sprite. Giả sử chúng ta đã tạo ra bức ảnh sau đây từ ba mũi tên riêng biệt.

Để truy cập vào mũi tên mong muốn trong CSS, bạn cần viết

Đây là những gì nó trông giống như trên trang:

Trong ví dụ được xem xét, chúng tôi đã sử dụng thụt lề âm. Điều này được thực hiện để nâng cao hình ảnh. Ví dụ: có sprite sau:

Để cắt biểu tượng RSS chúng ta phải viết những dòng thụt lề sau

vị trí nền: -90px -40px;

Trong ví dụ này, chúng tôi đã di chuyển hình ảnh lên trên 40 pixel và sang trái 90 pixel.

Ưu điểm của việc sử dụng sprite

• Giảm số lượng cuộc gọi máy chủ
• Nếu sử dụng các thay đổi động đối với hình ảnh (ví dụ: khi di chuột qua một thành phần menu), thì hình ảnh sẽ có trong bộ đệm và do đó sẽ không có độ trễ khi tải vào đúng thời điểm
• Nếu nền của các ảnh ghép giống nhau thì điều này cũng sẽ làm giảm tổng “sức nặng” của ảnh

Trong số những nhược điểm của sprite: sự phức tạp của công việc trong trường hợp lao động chân tay. Nhưng may mắn thay, có những dịch vụ miễn phí sẵn sàng đơn giản hóa công việc của bạn và làm mọi thứ cho bạn.

Trong bài viết hôm nay tôi muốn nói một chút về CSS sprite và đưa ra một số liên kết nơi bạn có thể tạo các sprite tương tự. Kỹ thuật sử dụng sprite hoàn toàn không mới và đã được sử dụng từ lâu, nhưng sự phức tạp trong việc tạo ra chúng khiến các quản trị viên web sợ hãi. Chúng ta hãy cố gắng giúp đỡ họ...

CSS sprite là gì?

Hãy tưởng tượng một bức tranh lớn hiển thị tất cả các biểu tượng, dải phân cách, nút, mũi tên và các thành phần thiết kế khác của bạn. Nó tải cùng với trang web, mọi thứ vẫn như bình thường. Nó chỉ không tạo ra một loạt yêu cầu cho tất cả các tệp mà được thực thi với một yêu cầu. Mát mẻ? Không nghi ngờ gì. Sau khi tải, phần mong muốn của bức ảnh lớn sẽ được hiển thị ở đúng vị trí.

Tôi đã thấy số liệu thống kê ở đâu đó (tôi không nhớ ở đâu nên sẽ không đưa liên kết) - từ 5 đến 40% là do chính các trang đó, phần còn lại là quá trình xử lý yêu cầu của máy chủ. Thật hợp lý khi cho rằng nếu số lượng yêu cầu giảm thì tốc độ tải xuống sẽ tăng tương ứng.

Chúng ta hãy xem xét kỹ hơn những ưu và nhược điểm của việc sử dụng sprite:

thuận sử dụng sprite:

Nhược điểmđây là những công nghệ:

• Khi bố trí, không chỉ cần chỉ ra hình ảnh mà còn cả vị trí của mảnh vỡ, điều này không hoàn toàn thuận tiện và quen thuộc.
• tăng tải trên máy chủ. Một bức ảnh lớn sẽ chiếm nhiều RAM hơn, có tính đến khoảng trống giữa các mảnh.
• Để thay đổi một biểu tượng, bạn sẽ phải mày mò toàn bộ tập tin, điều này không thuận tiện lắm. Mặc dù, có lẽ điều đó tốt hơn

Chúng tôi chọn điều gì quan trọng hơn với ai - sự đơn giản hay tốc độ - và tiếp tục. Nếu không thể làm gì được về tải trên máy chủ, thì sẽ có các công cụ để giải quyết các vấn đề về bố cục và thay đổi hình ảnh.

Máy tạo sprite— các dịch vụ trực tuyến về nguyên tắc hoạt động theo cùng một sơ đồ. Bạn tải lên bộ hình ảnh của mình, chọn định dạng sprite và hệ thống sẽ tạo hình ảnh và đánh dấu CSS cho tệp này.

Tạo sprite ở đâu?

Có lẽ là công cụ lâu đời nhất để tạo CSS sprite. Điểm đặc biệt là có phiên bản giao diện tiếng Nga, rất tiện lợi. Nó có khả năng tùy biến cao, không chỉ việc tạo hình ảnh mà còn cả mã CSS. Nhìn chung - một trình tạo xuất sắc, tôi khuyên bạn nên sử dụng nó. Nhân tiện, ngoài ra, dịch vụ này có thể tạo favicon và tính toán quyền truy cập cho các hệ thống Unix.

Trình tạo CSS Sprites

Trình tạo này cũng khá tốt, có tất cả các cài đặt cần thiết và tạo tệp đầu ra có kích thước nhỏ hơn một chút so với dịch vụ trước đó. Một tính năng đặc biệt là đầu ra mã CSS thuận tiện cho mỗi hình ảnh.

Một trình tạo khá chức năng cho phép bạn không chỉ tạo một sprite thông thường mà còn cho phép bạn tự di chuyển các bức ảnh, sắp xếp chúng gọn gàng nhất có thể. Ngoài ra - nó có thể tạo mã CSS nén cũng như mã SASS.

Sass là một ngôn ngữ kim loại dựa trên CSS được thiết kế để tăng mức độ trừu tượng của mã CSS và đơn giản hóa các tệp biểu định kiểu xếp tầng.

Dịch vụ này khác với các dịch vụ khác ở chỗ nó không tạo ra hình ảnh sprite. Bạn có thể tự tạo nó bằng Photoshop hoặc nơi nào khác, tải nó lên đây và dịch vụ sẽ trợ giúp về mã CSS. Giao diện khá rõ ràng và thân thiện với người dùng. Tôi khuyên bạn nên dành cho những người thích tự làm mọi việc mà không cần tin tưởng vào máy móc

Một trình tạo tốt, mọi thứ bạn cần để tạo ra nó đều có sẵn. Điểm trừ duy nhất là mỗi hình ảnh sẽ phải được tải xuống riêng lẻ; bạn không thể tải xuống hàng loạt. Nếu không thì không có gì đáng chú ý, ở mức trung bình.

Dịch vụ này được viết bằng HTML5 và chỉ hoạt động trong Chrome và Firefox, nhưng sự phát triển của các dịch vụ này rất đáng khích lệ. Web không đứng yên và điều đó rất tốt, cài đặt tối thiểu. Nhưng, nếu bạn muốn một giải pháp nhanh chóng và đơn giản thì trình tạo này phù hợp 100%

Trình tạo Sprite cho Jedi thực Cài đặt chương trình, chỉ định đường dẫn đến tệp CSS với bố cục cũ và dịch vụ này sẽ làm mọi thứ cho bạn. Nó có rất nhiều khả năng - tôi khuyên bạn nên đọc tài liệu trên trang web chính thức.

Gần như tương tự hoàn toàn với Spritebox, nó cũng chỉ được sử dụng để lấy mã CSS, với điểm khác biệt là ở đây việc lựa chọn đường viền của phần tử được thực hiện không phải theo cách thủ công mà tự động, độ chính xác của quá trình xử lý cao hơn đáng kể. Chỉ hoạt động trong Chrome và Firefox

Một dịch vụ tuyệt vời hoạt động như thế này - hãy chuyển đến một trang tạo sẵn, được trình bày như bình thường. Nhấp vào biểu tượng dịch vụ (trước tiên bạn cần cài đặt nó bằng bookmarklet) và thế là xong - dịch vụ thu thập tất cả hình ảnh từ trang này và tạo ra một sprite có mã. Nó rất tiện lợi, có những cài đặt chính xác cho những gì cần kết hợp với nhau. Nói chung - một dịch vụ tốt.

Một máy phát điện rất đơn giản nhưng dễ hiểu và tiện lợi. Kéo các hình ảnh bạn muốn kết hợp, sắp xếp chúng theo ý muốn và nhấn nút - sprite và mã đã sẵn sàng. Nhược điểm của dịch vụ này là nó chỉ hoạt động trong Chrome và Ognelis.

Dịch vụ này rất giống với SpriteMe được mô tả ở trên, với điểm khác biệt là ở đây bạn cần tải lên thủ công tất cả các hình ảnh và tệp CSS cần thay đổi. Có những cài đặt tối thiểu nhưng nó hoạt động tốt.

Tôi hy vọng rằng bây giờ bạn không còn ngại làm việc với CSS sprite và các dự án của bạn sẽ còn nhanh hơn nữa.

Trước khi CSS giới thiệu lớp giả :hover, việc tạo rollover—một phần tử thay đổi giao diện khi được di chuột qua nó—đã được triển khai thông qua 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 trang thường được tải.

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ụ: bạn có thể sử dụng JavaScript để đả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. Ví dụ, nó có thể chứa tất cả các thành phần giao diện đồ họa, chẳng hạn như biểu tượng, nút, 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 về sprite:

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

Lợi ích của CSS Sprites

• CSS sprite chứa hình ảnh nền cho các trạng thái khác nhau của phần tử và được tải toàn bộ khi trang web 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. Suy cho cùng, việc tải từng biểu tượng nhỏ sẽ yêu cầu một 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ẽ nhẹ hơn từng ả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. Các bức ảnh 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. Do đó, khi việc sử dụng sprite bắt đầu phát triển, các dịch vụ trực tuyến để tự động tạo sprite sheet đã xuất hiện, chẳng hạn như Spritegen, Máy phát điện RetinaSprite và những người khác. Bạn tải các hình ảnh cần thiết thành các tệp riêng biệt lên 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 CSS Sprites

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ẽ chỉ cho bạn một ví dụ nhỏ về cách 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 bình thường của liên kết, biểu tượng mạng xã hội sẽ có màu (hàng trên cùng của sprite) và khi di con trỏ 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 đặt bất cứ thứ gì vì hình thức của các liên kết sẽ được xác định bởi hình nền của chúng với các biểu tượng mạng xã hội.

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.