Введення в css спрайт, блог про веб-дизайн onjee
Існує безліч методів щодо оптимізації веб-сторінок. Якісь із них працюють, якісь уже немає. Проте є деякі методи, обов'язкові для виконання на будь-якому сайті і блозі. Про один з них я і хотів з вами поговорити.
CSS спрайт - один з основних методів оптимізації сторінок сайту. Тому сьогодні ми поговоримо про те, як об'єднати в CSS спрайт зображення на сайті, збільшивши тим самим швидкість їх завантаження.
Трохи історії
У далекому-далекому минулому, коли в квартирах пілікали модеми, а швидкість з'єднання не перевищувала 5 Кбіт / сек. люди сиділи над нелегким завданням, як змусити сайти завантажуватися швидше і при цьому не платити нечувані суми за вхідний трафік. Думали вони, значить, думали, і придумали компонувати зображення, використовувані на сторінці в спрайт.
Об'єднуємо зображення в спрайт
І так, як ми раніше з'ясували, спрайт - це кілька зображень, скомпонованих в одне ціле на прозорому тлі, доступ до яких здійснюється за допомогою CSS властивості background-position. Але будь ласка, не переплутайте його з колажем. Спрайт ≠ колаж.
Для того щоб отримати спрайт, потрібно все кнопки, іконки, буліти та іншу хрень скачала з безкоштовних фотобанків. максимально компактно вмістити в одному PNG файлі. Не забудьте, фон повинен бути прозорим. А тепер давайте розберемо на прикладі.
Припустимо, ми маємо в своєму розпорядженні PSD файлом ось з такою распрекрасной кнопкою в 3х станах.
Що робить середньостатистичний блогер-верстальник-самоучка? Він вирізає кнопку в кожному стані і зберігає її в окремих файлах. Тобто, одна кнопка займає у цього славного людини 3 картинки. А якщо ви напружиться, то згадайте, що кожна картинка на сайті, це додатковий HTTP запит, який навантажує сервер і ваш блог працює все повільніше і повільніше і повільніше і повільніше і повільніше і повільніше і повільніше ...
Щоб цього не відбувалося, набагато логічніше зберегти кнопку в одному файлі. Для цього ми, відкриваємо все той же PSD файл, видаляємо з нього непотрібні стрілки, написи, фон і компонуємо їхні капітали кнопки якомога ближче один до одного без нахлеста.
Ось що у нас в підсумку вийшло. Ні в якому разі кнопки не повинні між собою перетинатися.
Відмінно, графічний файл ми з вами підготували, тепер давайте я покажу вам як його зверстати.
Верстка спрайтів
Верстка CSS спрайтів нічим не відрізняється від верстки звичайних картинок, за винятком одного АЛЕ. Вам потрібно знати не тільки точний розмір того зображення, яке ви хочете відобразити, але і його координати. Наприклад, весь спрайт у нас займає 330 px в ширину і 150 px у висоту.
Створюємо файл index.html і прописуємо в нього необхідні рядки коду, доктайпів і все таке.
Після того, як всі стандартні дії виконані, давайте спробуємо відобразити нашу кнопку.
Після тега body створюємо контейнер div з класом button - це і буде наша кнопка.
На цьому наш html закінчується і тепер необхідно прописати для кнопки CSS стилі.
Код нижче показує. що спочатку ми оголошуємо клас button. Потім за допомогою властивостей height і width задаємо розміри нашої кнопки. Властивість background дозволяє вибрати файл, який ми будемо використовувати в якості спрайту, а background-position задати координати, що вимагається нам картинки в цьому спрайт. Все просто.
Давайте докладніше розберемося з властивістю background-position.
З викладеного вище коду вище, воно має два значення. Перше значення дозволяє задати координати зображення по осі X, а друге, отже, по осі Y.По осі X наша кнопка нікуди не скаче, так-як їхні капітали знаходяться один під одним. Отже, для того, щоб при наведенні з'явилася другий стан кнопки, нам потрібно змінити значення, яке відповідає за вісь Y.
Як відомо, а якщо немає то вже так, кожна кнопка має кілька станів.
- Normal - нормальний або звичайний стан
- Hover - стан кнопки при наведенні курсору
- Active - стан кнопки під ча натискання
Цими властивостями ми і скористалися.
рекомендую
Якщо лінь вручну робити спрайт і взагалі морочитися з фотошопом, вам допоможе чудовий безкоштовний сервіс: spritepad.wearekiss.com. Просто закидаєте в робочу область необхідні картинки і він складе для вас спрайт.
В ув'язненні
CSS спрайт - дуже важливий етап на шляху прискорення роботи сайту. Поставтеся до нього з належною повагою і намагайтеся використовувати повсюдно.
Спрайт - це хороше рішення проблеми бекграунду.
Але цей випадок - всього лише приклад.
У подібних ситуаціях, коли потрібно змінити колір / градієнт / обведення / тінь елемента, краще обмежитися стилями. CSS3 - це потужний інструмент, який краще використовувати по максимуму. Тобто в даному прикладі можна скоротити кількість зображень для дизайну кнопки не з 3 до 1, а з 3 до 0.
Спасибі, я це врахую)
Навіщо писати так: background: url (img / sprite.png); background-position: 0px -12px;> якщо можна все в одну властивість записати. background: url (img / sprite.png) 0px -12px; результат той же.
Аааа ... створювати кнопку через div?
Чому не button? Ну хоч трошки ж семантики.