Створюємо CSS спрайти. приклади. CSS-спрайти – що це таке, і як їх використовувати Від теорії – до практики! Створюємо анімованого птаха з Angry Birds за допомогою спрайту

Спрайти - це досить цікава та проста технологія. Зараз я розповім про неї трохи докладніше.

Що таке CSS спрайти?

Якщо коротко, то CSS спрайтице кілька картинок у одному файлі. Файл один, а зображень усередині нього кілька. При цьому для відвідувача це цілком непомітно. Тому хтось переглядає сайт здається, що він бачить кілька окремих картинок.

Навіщо це потрібно? Спрайти знижують кількість запитів до сторінки користувача та зменшують загальний розмір зображень. Зрештою відвідувач швидше побачить сайт.

Як це робиться? Звичайна картинка збільшується завширшки та висоту, тобто просто на звичайній картинці розміщуються поруч кілька зображень. Потім кожне окреме зображення з цього набору підставляється в потрібний блок із заданою шириною або висотою таким чином, щоб всі інші зображення не було видно. Весь набір обрізається і залишається лише одна картинка. Один спрайт. Усі інші картинки залишаються поза конкретного блоку.

Щоб було зрозуміліше, наведу аналогію. Уявіть, що ви дивитеся в замкову щілину. Ви бачите тільки якийсь окремий шматок приміщення по той бік дверей. Якщо ви трохи зрушите вбік і будете дивитися в скажину під іншим кутом, то побачите якийсь інший шматок того ж приміщення.

Термінологія

Щоб не плутатися, давайте відразу позначимо терміни:
Спрайт- це одна картинка файлу з декількома зображеннями.
Набір спрайтів- це сам файл із кількома зображеннями.

Особливості використання спрайтів

Коли варто використати спрайти? Відповідь то одна - спрайти потрібно використовувати якщо у вас на сторінці багато дрібних зображень. Неважливо які це зображення. Якщо у вас багато градієнтів з однаковим розташуванням, багато кнопок, багато ікон і т.д. Якщо на якійсь окремій сторінці багато дрібних зображень, то можна подумати над використанням спрайтів.

На сторінці зазвичай бувають три види картинок - jpg, png і gif. Всі ці формати мають два режими завантаження - це звичайний режим і режим поступового завантаження.

Формат jpg може бути звичайним (базовим) та прогресивним (progressive). В звичайному режимікартинка починає відображатися по рядках у міру завантаження і відразу в хорошій якості. У прогресивному режимі картинка jpg завантажується відразу повністю, але в поганій якостіі в міру завантаження якість збільшується.

Така ж поведінка є у gif і png. GIF може бути звичайним та черезрядковим (interlaced). PNG то, можливо простим і черезрядковим (interlaced). Поведінка через рядкових gif і png аналогічно до поведінки прогресивного jpg. Така поведінка збільшує розмір файлу.

Разом.Зображення може з'явитися на сторінці одразу, а може з'явитися із затримкою. Щодо спрайтів це важливо знати. Спрайти бажано робити через рядкові або прогресивні. Користувач повинен якнайшвидше побачити картинки нехай і в поганій якості.

Але!Якщо фінальний файл з усіма спрайтами буде занадто великий, то незважаючи на всю прогресивність та черезрядковість відвідувачу доведеться чекати навіть часткове завантаження файлу. Тому я не рекомендую використовувати великі набори спрайтів. Якщо файл великий, то повністю втрачається весь сенс спрайтів - прискорювати роботу сайту. З великими наборами спрайтів користувачеві доведеться чекати стільки ж, якщо не більше, як при використанні звичайних роздільних зображень.

Велики мені здаються файли понад 30 кілобайт. Це суб'єктивно. У вас можуть бути якісь свої уявлення про величину файлу. Файл розміром 30 кілобайт завантажуватиметься близько 7 секунд при швидкості інтернету 56,6 кбіт/с.

Приклади використання спрайтів

Спрайти з іконками

В одному спрайте у мене будуть іконки для:

Списка – одна іконка
Посилань – три іконки
Форми пошуку – одна іконка

Тобто перший набір спрайтів у мене міститиме п'ять картинок. Всі картинки у мене будуть однакового розміру- 16 на 16 пікселів. Спрайтами можна робити зображення з різними дозволами, не обов'язково щоб роздільна здатність всіх картинок співпала. При різному дозволі картинок трохи ускладнюється об'єднання цих картинок на один файл.

У результаті перший приклад виглядатиме так:

Я знайшов п'ять ікон. Після чого просто об'єднав їх у одному файлі. Ось такий файл у мене вийшов у результаті:

Звертаю вашу увагу. У разі іконки розташовані не впритул, з-поміж них є невеликі відступи. Як підібрати ці відступи? Можна звичайно розрахувати все за пікселями, але наш випадок досить простий, тому найкраще підібрати ці відступи на картинці експериментальним шляхом. Спочатку об'єднуємо зображення просто на око, потім беремо найвищу картинку, ставимо її на потрібне місце. Якщо картинка знаходиться на своєму місці, але при цьому звідки стирчить шматок іншого зображення, то значить відступ потрібно збільшити.

Ще один момент. Останньою у списку йде іконка для списку – зелена стрілка. Чому вона саме остання? Розташування інших іконок на картинці нам байдуже, але у списку будь-який пункт може займати кілька рядків і якщо зелена стрілка буде десь посередині, то на наступних рядках будуть стирчати інші картинки. Подивіться на картинку списку вище, щоб зрозуміти, про що я говорю.

І так. Я знайшов п'ять іконок, поєднав їх в один файл. Що робимо далі? Зрозуміло пишемо код:

Пункт списку
Ще один пункт списку
Пункт списку
Ще один пункт списку,
але у два рядки
Пункт списку
Ще один пункт списку

Це html кодсписку. Тепер застосуємо до нього наш спрайт:

Ul li( padding:0 0 0 21px; background:url("sprites.png") 0 -94px no-repeat; )

Що ми тут зробили? Зробили відступ у кожному

від лівого краю до 21 пікселя, щоб текст не затуляв картинку. Потім як фоновий малюнок ставимо sprites.png. Висота всієї картинки зі спрайтами в даному випадку 110 пікселів та зелена стрілка знаходиться в самому кінці. Висота зеленої стрілки 16 пікселів, тобто стрілка починається після 94 пікселя від верху картинки. Це означає, що фон ми повинні зрушити на 94 пікселі вгору. У css коді це написано так "0 -94px", тобто зрушили на 0 пікселів праворуч і 94px пікселя вгору.

Закінчимо зі списком. Тепер зробимо приблизно таке ж посилання:

A( padding:0 0 0 20px; background:url("sprites.png") 0 -42px no-repeat; ) a( padding:0 0 0 20px; no-repeat;

Що означають селектори? Очевидно цей селектор змушує браузер застосувати даний стильдо всіх посилань, які мають атрибут href, значення якого починається з рядка http://сайт/. Сам спрайт застосовується приблизно так, як і у випадку зі списком. Я розгляну лише одне посилання – посилання на мій блог.

Визначаємо потрібне посилання по href. Або ідентифікувати потрібне посилання будь-яким іншим способом.
Робимо відсуп від лівого краю біля конкретного посилання в 20 пікселів
Вказуємо як фонове зображеннязображення sprites.png
Картинка, яку я підібрав для свого блогу, знаходиться на відстані 21 піксель від верхнього краю, це означає, що фон ми повинні зрушити на 21 піксель вниз. У css я це прописав так "0 -21px"

Домашнє завдання

Спрайти з градієнтами

Тепер подивимося на другий приклад.

На цій картинці зображено віконце. У вікна є заголовок, тіло та підвал. У кожного з цих елементів на фоні встановлено градієнт. Придивіться, якщо цього відразу не видно, там є перехід кольору від блідого до насиченого.

Я покажу як граденти у цьому вікні можна зробити спрайтами. Заголовок та підвал вікна будуть фіксованою висоти – 30 пікселів. Тіло вікна триватиме залежно від довжини тексту.

Тепер напишемо html код вікна:

Починаємо застосовувати спрайти. Почнемо із заголовка вікна:

#window-header( height:30px; background:#C0C0FF url("gradients.png") 0 0 repeat-x; )

У файлі gradients.png спочатку йде градент для заголовка, потім для тіла і потім для нижнього рядка. Тобто градент для заголовка починається з самого верху. Тому ми просто ставимо як тло сам файл і позицію вказуємо як «0 0», тобто нікуди не відступати. Щоб градієнт розтягнувся по горизонталі, прописуємо «repeat-x».

Щоб градент повністю вліз у заголовок, вказуємо висоту 30 пікселів.

Так само як і заголовок поставимо градієнт для підвалу:

#window-footer( height:30px; background: #C0FFC0 url("gradients.png") 0 -60px repeat-x; )

Тільки цього разу ми посунемо картинку вниз на 60 пікселів.

З тілом віконця ситуація складніша. Тіло у нас буде розтягуватися, на відміну від заголовка та підвалу. Тобто, якщо ми просто зробимо один div для тіла вікна і поставимо туди градент, то в цьому диві з'являться відразу всі градієнти. Як варіант можна поставити градієнт для тіла останнім по вертикалі, але якщо у нас кілька градієнтів для блоків, які тягнуться? Все одразу не зробиш останніми. Ми зробимо трохи хитрішими.

CSS код буде наступний:

#window-body( position:relative; ) #window-body-gradient( position:absolute; left:0; top:0; width:100%; height:30px; background:url("gradients.png") 0 - 30px repeat-x;) #window-body-text( position:relative; )

Тепер розповім докладніше, що ми тут зробили. Ось html код тіла вікна окремо:

Як бачите в тіло, у нас вкладено ще два дива. Перший "window-body-gradient" буде відповідати за градієнт. Другий window-body-text потрібен для тексту. Крім того, як це зрозуміло з CSS коду, ми застосували position:relative; для всього тіла вікна повністю.

Для градієнтного дива ми вказуємо position:absolute. Таким чином ми вибили градієнт див з загального потоку. Тепер цей див ні на що не впливає. Так як для всього тіла цілком у нас вказано position:relative, то градієнтний див нікуди далі за батька не спливає. Прикріплюємо його до лівого та верхнього краю тіла вікна за допомогою «left:0; top:0;». Вказуємо висоту градієнтного дива – 30 пікселів. Тобто тут вказуємо висоту градієнта, який ми будемо прикріплювати, якщо висота дива буде більшою за висоту градієнта, то в діві будуть стирчати інші спрайти. І, нарешті, прикріплюємо до градієнтного дива наш файл gradients.png. Як зазвичай зсуваємо фон на потрібну відстань, в даному випадку зсуваємо фон на 30 пікселів вгору.

Тепер у тілі вікна ми маємо градієнт. Але він затуляє текст. Щоб текст не заслонявся обернемо весь текст у див і привласним йому position:relative. Після присвоєння текст буде поверх градієнта.

Ось загалом і все. Тепер ми розставили всі градієнти у наше вікно. І в заголовок, і в тіло, і до підвалу.

Такі довгі пояснення я роблю, щоби все було зрозуміло. Але насправді якщо ви трохи знаєтеся на верстці, то вам напевно буде достатньо подивитися самі приклади:

Вкотре продублював посилання.

Насправді можна вигадати багато прикладів з використання спрайтів. Я показав лише два приклади, але цих прикладів має вистачити для розуміння принципів роботи спрайтів. Якщо залишилися якісь питання, то ставте в коментарях.

На сучасних сайтах можна зустріти велике числонайрізноманітнішої на кшталт графіки: зображення товарів, аватарки користувачів, картинки, формують дизайн сторінок, кнопки, іконки, логотипи тощо. І чим більший проект, тим більше графічних файлів там використовується. При відкритті окремої сторінки сайту в браузері відбувається завантаження її елементів. Тому коли на ній розміщено занадто багато графіки, швидкість завантаження, як правило, значно знижується. Що, в свою чергу, загрожує незручностями для відвідувачів вашого проекту.

CSS Sprites

На головній сторінцірозміщено форму завантаження графічних файлів (кожного файлу – окрема кнопка). Спочатку видно лише три кнопки для завантаження. Якщо вам потрібно більше, то натисніть на "Need More".

Після того, як усі файли для майбутнього CSS спрайту вибрані, натисніть кнопку «Options». Перед вами відкриється невелика панель із налаштуваннями. Тут можна задати відступи між елементами в пікселях, додати рамку для зображень, вирівняти всі картинки в готовому спрайте по лівому або верхньому краю, задати фоновий колір у форматі RGB.

Після натискання на кнопку "Generate" відбудеться безпосереднє створення CSS спрайту. Також ви побачите невелику інструкцію для його використання, а саме CSS-код, який потрібно буде розмістити на своєму сайті. Є навіть приклад у HTML. Розібратися, гадаю, не проблема.

Візуально Dan's Tools CSS Sprite Generator – досить симпатичний генератор спрайтів CSS з багатьма налаштуваннями. Наприклад, можна вибрати вертикальний або горизонтальний тип вставки іконок у загальне зображення.

CSS Sprites

У сервісі CSS Sprites все дуже просто як по дизайну, так і по налаштуванням. Існує вибір формату результуючого зображення: PNG, JPEG, GIF. На сторінці є лінк на адаптивну версію генерації спрайтів Responsive CSS Sprites (хоча я її не пробував).

Разом. В принципі, всі нюанси, як зробити CSS спрайти і їх використовувати ми розглянули. Генератори допоможуть прискорити процес створення елементів, але можна обійтися фотошопом. Якщо будуть якісь питання, пишіть у коментарях.

Сподобалось:
27

Не сподобалось: 4

Недоступний жодний переклад.

спрайт

доабо після"до""після""після"

angry_bird angry.png. index.html

});

UTF-8 index.html windows-1251 style.css angry_bird

http://spritecow.com

angry.png,

angry_birdфайл стилів style.css imgs/.У мене вийшло так:

Недоступний жодний переклад.

CSS спрайти - це графіка для Вашого Web-сайту, об'єднана в один графічний файл. "Чому один файл?" - Запитайте Ви. Справа в тому, що такий підхід до зберігання зображень дозволяє підвищити продуктивність веб-сторінок, а також зберігати графічні зображеннянайбільш організовано. Давайте поглянемо на деякі з найкращих практик застосування спрайтів. Сама назва спрайтів може нагадати Вам про ігрові спрайти, ретро ігрову консоль і навіть браузерні ігри, які так популярні сьогодні:

Отже, застосовно до Веб-дизайну, спрайт- це лише один великий файл, що містить кілька зображень для Вашого сайту, що заощаджує час завантаження та передачі файлу по мережі. Коли спрайт, наприклад, містить 20-30 зображень, це істотно може полегшити навантаження на сервер, оскільки, якби ці зображення зберігалися окремо - серверу довелося б робити відповідно 20-30 окремих запитів отримання кожного такого зображення. Завдяки спрайту на сервер йде лише один HTTP-запит – для отримання одного-єдиного зображення. Спрайт візуально може виглядати не зовсім "читаємо" для ока, оскільки його основне завдання - лише зібрати різні "шматки" Вашого дизайну воєдино. Наприклад, спрайт може бути таким:

Спрайти використовують більшість сучасних сайтів, і всім відомий ВКонтакте – не виняток. Наприклад, так він зберігає в одному файлі "шматочки" інтерфейсу - а саме всім знайомі іконки:

Істотним моментом використання CSS-спрайтів є те, що серверу треба відправити тільки один графічний файл, що містить усі Ваші зображення, а не безліч окремих зображень - і через CSS можна відобразити будь-який маленький сегмент цього графічного файлу як фон для елемента. Деякі думають, що окремо картинки швидше завантажуються, але це не так. Завантажуючи один графічний файл з безліччю картинок, ми надсилаємо лише один запит на сервер, а при завантаженні великої кількості картинок ми надсилаємо більше запитів на сервер. Об'єднання зображень в один файл дозволяє не тільки значно знизити кількість HTTP-запитів, алета зменшити загальний розмір файлу зображення.

Наведу ще один приклад спрайту. Так зберігає елементи графіки один відомий західний сайт, присвячений дизайну:

Ви можете запитати - коли найкраще готувати спрайт? Для цього є два різні підходи.

Різні підходи – створюємо спрайт до та після створення сайту

Є два поширені підходи при створенні спрайту листа - зробити йогодоабо післястворення Вашого сайту. Ви можете помістити всі зображення в спрайт лист перед створенням сайту. Це те, що ми називаємо підхід"до". Крім того, Ви можете створити всі зображення у вигляді окремих файлів, що робить їх редагування більш простим. Як тільки сайт буде побудований, і всі зображення підготовлені, Ви можете швидко та легко створити спрайт лист, або вручну, або, використовуючи один із декількох інструментів. Це ми називатимемо підхід"після". Якщо спрайт листи для Вас у новинку або Ви новачок у Веб-дизайні, то Вам більше підійде підхід"після". Існує безліч утиліт, сервісів та програм для допомоги при створенні спрайтів, більшість з яких поширюються та доступні безкоштовно.

Розташовуємо картинки у спрайте організовано

При створенні спрайту Photoshop, бажано відразу всі зображення розміщувати організовано і в якійсь певній, вибраній Вами послідовності, щоб потім працювати з ними було легко і просто. Намагайтеся завжди округляти місце під кожне зображення спрайту до найближчих 10 пікселів, або залишати більше простору навколо них, якщо вони однакові. Коли справа дійде до написання CSS-стилю, Вам не доведеться записувати вимірювання координат, і Ви будете менш схильні забувати числа з координатами потрібних зображень. Ось приклад вдалого розміщення різних зображень в одному спрайте:

Від теорії – до практики! Створюємо анімованого птаха з Angry Birds за допомогою спрайту

Отже, ми познайомилися з поняттям спрайту у Веб-дизайні, але теорія без практики – ніщо. Тому зараз ми з Вами створимо наш перший спрайт та навчимося робити просту анімацію на HTML-сторінці. Наш приклад буде заснований на персонажі з гри Angry Birds – це забавна червона пташка. Для початку підготуємо зображення-спрайт у форматі.PNG, що містить 4 фази анімації птиці:

Створимо десь на диску каталог angry_bird- туди ми поміщатимемо файли нашого прикладу. Зберігаємо спрайт з пташками у цей каталог і називаємо файл angry.png.Наступним кроком – створюємо в цьому ж каталозі файл з ім'ям index.html- Це буде наша тестова сторінка з анімацією. Далі відкриємо цей файл у редакторі та помістимо туди наступний код:

Урок сайт - Демонстрація роботи зі спрайтами

$(document).ready(function() (

// тут буде код на jQuery, що створює анімацію

});

Небагато поясню, що ми зараз зробили. По-перше, ми задали нашому HTML-документу кодування UTF-8, а значить, повинні зберегти наш index.htmlу цьому кодуванні. Можна поставити й іншу, наприклад, windows-1251, - Наше завдання це не принципово. Далі ми підключили до документа файл стилю style.css(його поки що немає в нашому каталозі angry_bird, його створимо трохи згодом). Також ми задали посилання на зовнішній скрипт і підключили бібліотеку jQuery - за допомогою jQuery ми будемо здійснювати динамічну зміну картинок нашого птаха та змінювати його "фази" зі спрайту. Також ми підготували внутрішній JavaScript-блок, куди далі помістимо код, який робить анімацію птиці. Ну, і нарешті, - основне тіло документа містить єдине гіперпосилання, всередині якої DIV-блок, і у нього ID заданий як birdImage, а клас за замовчуванням - bird-sleeping. Це означає, що наш птах при відкритті сторінки "спатиме" - це відповідає лівому нижньому зображенню всередині спрайту - де у неї заплющені очі. Тепер час "нарізати" наш спрайт, тобто. виділити із нього окремі зображення.

Нарізаємо спрайт, використовуючи сервіс SpriteCow.Com

Завдання "нарізки" спрайту є досить трудомістким - вона вимагає уважності, щоб не помилитися з координатами, що визначають кожне зображення у спрайте. На щастя, на сьогодні є сервіси, які повністю знімають цей головний біль із дизайнера та верстальника. Я використовую для нарізки та рекомендую Вам сервіс http://spritecow.com. Суть сервісу проста і дуже зручна – ми мишею виділяємо кожну картинку птаха, а SpriteCow видає нам готовий CSS-код із координатами. Все, що нам залишиться зробити, - це просто задати 4 стилі для кожної фази птиці! Зайшовши на сайт, бачимо 2 кнопки - "Open Image" та "Show Example". Нам потрібна перша кнопка, тиснемо на неї:

У діалозі, що відкрився - вибираємо наш файл спрайту angry.png,після чого бачимо, як наш спрайт завантажився на сайт. Далі нам необхідно визначити колір фону, для цього тиснемо на панелі інструментів "Pick Background" і вказуємо на білу область нашого спрайту - це дозволить правильно вирізати кожну фазу птаха:

Виділяємо перше зображення та отримуємо автоматично для нього CSS-код:

Тепер, саме час створити у нашому каталозі angry_birdфайл стилів style.css. Туди послідовно вставляємо 4 згенерованих шматка CSS-коду, тільки замість стандартного класу.sprite, пропонованого нам SpriteCow назвемо наші стилі більш зрозуміло. Також, оскільки зображення спрайту у нас зберігається прямо в корені каталогу, видалимо з властивості background непотрібний елемент шляху - imgs/.У мене вийшло так:

/* "Звичайний" птах. Ліве верхнє зображення в спрайте */ .bird-normal ( background: url("angry.png") no-repeat -12px -16px; width: 97px; height: 94px; ) /* "Щаслива" птиця. Правое верхнє зображення в спрайте */ .bird-happy ( background: url("angry.png") no-repeat -118px -17px; width: 97px; height: 94px; ) /* "Сплячий" птах. Ліве нижнє зображення в спрайте */ .bird-sleeping ( background: url("angry.png") no-repeat -12px -120px; width: 97px; height: 94px; ) /* "Злий" птах. Правое нижнє зображення в спрайте */ .bird-angry ( background: url("angry.png") no-repeat -118px -120px; width: 97px; height: 94px; )

Останній крок – пишемо код на jQuery, що створює анімацію.

Тепер, коли ми успішно нарізали спрайт та помістили 4 стилі для кожного зображення у наш файл style.css, нам залишається написати код на jQuery, який додаватиме анімацію при наведенні на нашу гіперпосилання та при натисканні на посилання. Як пам'ятаємо, за замовчуванням ми заданий клас bird-sleeping, тобто. наша червона пташка "спатиме" при відкритті документа:)

Вся анімація будуватиметься на 3-х методи jQuery:

hover - обробник наведення курсору на посилання та "догляду" курсора з посилання. Коли наводитимемо курсор, птах "прокидатиметься" - тобто. клас станеbird-normal
mousedown - обробник натискання лівої кнопки миші посилання. У цьому птах ставатиме " щасливою " - тобто. DIV-блоку присвоюватиметься клас bird-happy
mouseup – обробник відпускання лівої кнопки миші. При відпусканні птах буде ставати "злим" - тобто. DIV-блоку присвоюється клас bird-angry

Отже, вставляємо наступний код у місце, яке ми підготували у внутрішньому блоці JavaScript, розміщеному на сторінці:

$(document).ready(function() ( // тут буде код на jQuery, що створює анімацію $("#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"); "); )); $("#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"); )); ));