Икони, затворени в спрайт
Изкопах хубаво нещо. Икони на интерфейса, затворени в един спрайт. Ако някой не знае какво е спрайт, това е една снимка, в която има няколко изображения, които се показват отделно на сайта с помощта на css. Не знам дали съм го обяснил ясно, но можете да разберете какъв спрайт използва този монтаж като пример.
Ползи от спрайтове
Отдавна не съм публикувал икони, вероятно защото всички икони, от които имах нужда, вече бяха на моя сайт:)), но имах нужда от икони в един спрайт и ги намерих и ги споделям с вас. Между другото, отличителната черта и най-значимият плюс на спрайта е, че ако изображението на спрайт се зареди веднъж, тогава всички елементи на този спрайт вече няма да се зареждат и съответно ще намалят скоростта на HTML страницата. Обикновено спрайтовете се използват за бутони, които се променят при задържане. Понякога се случва бутонът в нормалното си състояние и бутонът при задържане да са две различни картинки и може би сте забелязали на някои сайтове, когато задържите курсора на мишката върху изображението, изображението не се появява веднага - зарежда се. При спрайт това няма да е проблем. Друг плюс на спрайтовете е спестяването на пространство. Да предположим, че имате някакъв плъгин, като плъзгач, и няколко десетки изображения отиват към него (ъглите на рамките, самите рамки, стрелки, куршуми, икони в социалните медии и т.н.). Така че, когато всички са затворени в една снимка, изглежда много по-удобно и спретнато, ако са лежали в папка с изображения отделно.
Какво е изобразено на тези икони
Свързването на тези икони е много просто:
1. Свързваме css файла sprite.css по този начин: създаваме css папка в корена на вашия сайт, добавяме този css файл там и на страницата, където иконите ще се показват между маркерите, вмъкваме следния код:
2. След това създайте папка img в основата на вашия сайт и пуснете там изображението sprit.png
3. На мястото, където искате да поставите иконата, поставете кода:
Е, мисля, че да разбера как да вмъкнете тези икони от спрайт не е трудно, особено след като вече обясних всичко:)) Наслаждавайте се!