Въведение в CSS Image Sprites: те са лесни за научаване и страхотни за познаване

Спрайтовете на изображения са тук от 70-те години на миналия век. Те бяха използвани за първите компютърни анимации на Atari и други конзоли. С течение на времето те бяха използвани все по-рядко от разработчици от предния край, които искаха по-усъвършенствана (прочети: реалистична) графика за 3D и виртуална реалност.

През последните години обаче те се завърнаха.

Sprite е термин за компютърна графика за двумерно растрово изображение, което е интегрирано в по-голяма сцена.

През последните няколко години Facebook, Twitter, Instagram и много други социални медийни платформи нараснаха като луди. С нарастването дойде нуждата им да оптимизират навсякъде, където е възможно, и да намалят размера на сървърните заявки. Тогава спрайтовете на CSS изображения се върнаха в масовия поток.

За платформа като Facebook - която има над 1 милиард потребители - показването на икони, изображения и подобно съдържание изисква множество сървърни заявки. Заявките излишно претоварват трафика.

И така, какво правите, за да намалите сървърните заявки и честотната лента? Обърнете се към CSS спрайтове на изображения.

Вместо да отправите заявка за вашето изображение на профила, изображението на профила на вашия приятел, миниатюрите на албума ви и т.н., спрайтовете ви позволяват да използвате едно изображение, което означава само една заявка. Можете да манипулирате това изображение, за да ги покажете като части от едно по-голямо изображение.

Нека да видим пример, включващ флагове:

Сега нека видим как работи:

Както можете да видите в горния код, ние създадохме основата, която се състои от три div, където всеки div ще бъде носител на спрайт.

Първо избрахме div с идентификатора на first. Нашият div ще има размер на височина и ширина, които ще бъдат показани на нашата страница. Като фон ще заредим изображение с URL („//i.postimg.cc/R0N7nkH9/flags.png") .

Следващото нещо е да намалим / намалим фоновото изображение с размер на фона: 1400px. (Можем да използваме действителен размер на пиксела, процент, em или rem.) Този параметър ще ни позволи да „увеличим“ изображение до точката, в която ще се покаже само определена част от изображението.

И накрая, двата параметъра, които идват след фона:

URL („// i.postimg.cc/R0N7nkH9/flags.png"), ще премести частта от основното изображение, която ще се вижда по оста X и Y. Което означава, че в този случай фон:

URL („// i.postimg.cc/R0N7nkH9/flags.png") -86px -87px; ще покажем частта, която е изместена от горната част на изображението с 87 пиксела отгоре и 86 пиксела отляво .

Първото число ( -86px ) означава оста X, където отрицателно означава движение отляво надясно, а положителното означава преминаване отдясно наляво. Вторите числа (-87px) се използват за компенсиране отгоре надолу, където важат обърнати правила, положително число означава преминаване отдолу нагоре, а отрицателно, разбира се, преминаване отгоре надолу.

Както можете да видите на оригиналното изображение, знамето, което получихме (Босна), наистина е второ отгоре и второ отляво.

Достатъчно добър? Добре, нека продължим.

Сега нека попълним div с идентификатор на секундата. Ще се прилагат същите правила за настройка и единствената промяна ще бъде, че в този случай ще останем на оригиналната ос X (0px), а посоката Y ще премине от долната част към горната (89px). Отново, ако проверите оригиналното изображение, може да видите, че (Узбекистан) е първо отдолу и първо отляво.

И последно, но не на последно място ...

Да, накрая попълваме последния div с идентификатор на трети. Правилата са едни и същи и ако се досещате, че сме се придвижили отдолу към върха, добре, това е вярно.

Сега моментът на истината ...

В горния случай се движехме по оста X и Y, за да покажем определени части от изображението с флагове. Отивайки надясно наляво и надолу, получихме Босна (ос X), отивайки отдолу и наляво (ос Y) Тайланд и Узбекистан. Както видяхте, използваме само едно изображение и това означава само една заявка за изображение.

Важно е да знаете, че когато изграждате спрайтовете, това основно изображение трябва да съдържа същите части от изображения за ваше удобство. Както в този случай, когато се движим към ляво и дясно, отгоре и отдолу, според размера на порцията плюс празното пространство. Узбекистан (89px) и Тайланд (178px) имат разлика от 89px, което е действителният им размер (87px) плюс празно пространство (1px + 1px).

Да, можете да правите и анимации.

За да направим този стил на сладки, страхотни анимации от старото училище, ние се нуждаем само от CSS свойства за анимация. В този случай премествахме оригиналното изображение по оста X и получаваме тази анимация в стар стил. Повярвайте ми със спрайтове, няма ограничения.

Толкова е лесно :)

Надявам се, че ви е харесало да четете тази статия.

Следете за още ...