Sprite css: Как использовать CSS-спрайты для увеличения скорости загрузки веб-страниц

16.06.2023 Facebook Twitter LinkedIn Google+ Разное

Sprites CSS уроки для начинающих академия

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯

Спрайты изображений

Спрайт изображений представляет собой набор изображений, помещенных в одно изображение.

Веб-страницы с большим количеством изображений может занять много времени для загрузки и генерирует несколько запросов сервера.

Использование спрайтов изображений уменьшит количество запросов сервера и сохранит пропускную способность.

Спрайты изображений-простой пример

Вместо того, чтобы использовать три отдельных изображения, мы используем это одиночное изображение («img_navsprites.gif»):

С помощью CSS мы можем показать только ту часть изображения, которая нам нужна.

В следующем примере CSS указывает, какая часть изображения «img_navsprites.gif», чтобы показать:

Пример

#home {
    width: 46px;
    height: 44px;
    background: url(img_navsprites. gif) 0 0;
}

Пример объяснил:

  • <img src="img_trans.gif"> — Только определяет небольшое прозрачное изображение, так как атрибут src не может быть пустым. Отображаемое изображение будет фоновым изображением, которое мы указываем в CSS
  • width: 46px; height: 44px; — Определяет часть изображения, которое мы хотим использовать
  • background: url(img_navsprites.gif) 0 0; — Определяет фоновое изображение и его положение (левый 0px, верхний 0px)

Это самый простой способ использования изображений спрайтов, теперь мы хотим, чтобы развернуть его с помощью ссылок и наведении эффектов.

Спрайты изображений-создание списка переходов

Мы хотим использовать изображение спрайта («img_navsprites.gif») для создания списка переходов.

Мы будем использовать HTML список, потому что это может быть ссылка, а также поддерживает фоновое изображение:

Пример

#navlist {

    position: relative;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navlist li, #navlist a {
    height: 44px;
    display: block;
}

#home {
    left: 0px;
    width: 46px;
    background: url(‘img_navsprites. gif’) 0 0;
}

#prev {
    left: 63px;
    width: 43px;
    background: url(‘img_navsprites.gif’) -47px 0;
}

#next {
    left: 129px;
    width: 43px;
    background: url(‘img_navsprites.gif’) -91px 0;
}

Пример объяснил:

  • #navlist {position:relative;} — положение имеет значение относительно, чтобы разрешить абсолютное позиционирование внутри него
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} — поля и отступы имеют значение 0, list-style удаляется, и все элементы списка имеют абсолютную позицию
  • #navlist li, #navlist a {height:44px;display:block;} — Высота всех изображений 44пкс

Теперь начните позиционировать и стиль для каждой конкретной части:

  • #home {left:0px;width:46px;} — Расположен на всем пути влево, и ширина изображения 46пкс
  • #home {background:url(img_navsprites.gif) 0 0;} — Определяет фоновое изображение и его положение (левый 0px, верхний 0px)
  • #prev {left:63px;width:43px;} — Позиционируется 63пкс вправо (#home ширину 46пкс + некоторое дополнительное пространство между элементами), а ширина 43пкс.
  • #prev {background:url(‘img_navsprites.gif’) -47px 0;} — Определяет фоновое изображение, 47пкс вправо (#home ширина 46пкс + 1px разделитель линии)
  • #next {left:129px;width:43px;}- Позиционируется 129пкс вправо (начало #prev 63пкс + #prev ширина 43пкс + дополнительное пространство), а ширина 43пкс.
  • #next {background:url(‘img_navsprites.gif’) -91px 0;} — Определяет фоновое изображение, 91пкс вправо (#home ширина 46пкс + 1px разделитель линии + #prev ширина 43пкс + 1px разделитель линий)

Спрайты изображений-эффект Hover

Теперь мы хотим добавить эффект Hover в наш список навигации.

Совет: Селектор :hover может использоваться для всех элементов, а не только для ссылок.

Наш новый образ («img_navsprites_hover.gif») содержит три навигационных изображения и три изображения для использования при наведении эффектов:

Поскольку это одно изображение, а не шесть отдельных файлов, не будет задержка загрузки , когда пользователь наводит курсор на изображение.

Мы добавляем только три строки кода для добавления эффекта Hover:

Пример

#home a:hover {
    background: url(‘img_navsprites_hover.gif’) 0 -45px;
}

#prev a:hover {
    background: url(‘img_navsprites_hover.gif’) -47px -45px;
}

#next a:hover {
    background: url(‘img_navsprites_hover.gif’) -91px -45px;
}

Пример объяснил:

  • #home a:hover {background: transparent url(‘img_navsprites_hover.gif’) 0 -45px;} — Для всех трех наведите изображения мы указываем то же положение фона, только 45пкс дальше вниз

❮ Назад Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css

таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

основные техники и полезные инструменты / Хабр

Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса.

Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно.

Применение на практике

Главным преимуществом использования спрайтов является однократная загрузка сервером сразу всех элементов в одном файле. некоторые могут подумать, что подгрузка маленьких, мало весящих картинок позволяет увеличить производительность сайта, но это не так — случае отдельных изображений увеличивается количество HTTP-запросов. Также, при использование единого спрайта позволяет уменьшить вес графики. Пример спрайта на сайте webdesign tuts:

Пример кода для использования спрайтов на странице (демонстрация):

<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites. gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
</style>
</head>
<body>
<ul>
  <li><a href="default.asp"></a></li>
  <li><a href="css_intro.asp"></a></li>
  <li><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

Также спрайты часто используют для создания простого и кроссбраузерного hover-эффекта (демонстрация):

<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover. gif') -47px -45px;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>
<body>
<ul>
  <li><a href="default.asp"></a></li>
  <li><a href="css_intro.asp"></a></li>
  <li><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

 До или после?

Существует два подхода при подготовке спрайтов: до и после разработки сайта. В первом случае все мелкие картинки интерфейса компилируются в один файл на финальном этапе создания сайта. В этом случае удобно редактировать отдельные изображения, а также использовать их отдельно, если это необходимо. Такой способ подходит больше начинающим веб-дизайнерам.

Более опытные разработчики готовят спрайты на начальном этапе, это позволяет лучше организовать графику будущего дизайна, а также готовить PSD-шаблон к верстке.

 Организация элементов дизайна

При подготовке файла со спрайтами стоит максимально уплотнить изображения, а если они одинакового размера (например иконки) — создать сетку, благодаря которой упростится использование спрайтов на сайте:

Готовить файл следует таким образом, чтобы будущие изменения в нем не влияли на расположение уже существующих элементов, иначе придется править весь CSS. PSD-файл со спрайтами обязательно должен быть хорошо маркирован: необходимо понятно называть все слои и группы, а также стараться не сливать слои, которые в будущем могут быть изменены.

Полезные инструменты

Compass — отличный фреймворк, который умеет создавать спрайты из папки с изображениями. Также использует Sass.

Lemonade — инструмент, позволяющий создавать файлы со спрайтами простым добавлением строчки кода в Sass-файлы.

SpriteMe — букмарклет, который умеет генерировать и просматривать использованные на сайте спрайты.

Вот как выглядит рабочий слой букмарклета:

Fireworks CS6 — последняя версия включает функцию генерации спрайтов.

 Полезные сервисы

Spritepad — drag-and-drop сервис для создания спрайтов

Sprite Cow — сервис для удобной «нарезки» подготовленного вручную файла со спрайтами

Glue — командная строка для генерации спрайтов

CSS Sprites — еще один генератор, с расширенными настройками

SpriteRight — приложение-генератор для Мака

Использованные материалы и полезные ссылки:

  • CSS Sprite Sheets: Best Practices, Tools and Helpful Applications — tutplus.com
  • CSS Image Sprites — w3schools.com
  • CSS Sprites: What They Are, Why They’re Cool, and How To Use Them — css-tricks.com
  • Using CSS Sprites to optimize your website for Retina Displays — Maykel Loomans

спрайтов изображений CSS

❮ Предыдущая Далее ❯

Спрайты изображений

Спрайты изображений представляют собой набор изображений, объединенных в одно изображение.

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

Использование спрайтов изображений уменьшит количество запросов к серверу и сэкономит пропускная способность.

Спрайты изображений — простой пример

Вместо использования трех отдельных изображений мы используем одно изображение («img_navsprites.gif»):

С помощью CSS мы можем показать только ту часть изображения, которая нам нужна.

В следующем примере CSS указывает, какая часть «img_navsprites.gif» изображение для демонстрации:

Пример

#home {
ширина: 46 пикселей;
  высота: 44 пикселя;
фон: url(img_navsprites.gif) 0 0;
}

Попробуйте сами »

Объяснение примера:

  • — определяет только маленькое прозрачное изображение потому что атрибут src не может быть пустым. Отображаемое изображение будет фоновым изображением, которое мы указываем в CSS 9.0042
  • ширина: 46 пикселей; высота: 44 пикселя; — определяет часть изображения, которую мы хотим использовать
  • фон: url(img_navsprites.gif) 0 0; — определяет фоновое изображение и его положение (0 пикселей слева, 0 пикселей сверху)

Это самый простой способ использования спрайтов изображений, теперь мы хотим расширить его на с помощью ссылок и эффектов наведения.

Спрайты изображений — создание списка навигации

Мы хотим использовать изображение спрайта («img_navsprites.gif») для создания списка навигации.

Мы будем использовать список HTML, поскольку он может быть ссылкой, а также поддерживает фоновое изображение:

Пример

#navlist {
  позиция: относительная;
}

#navlist li {
  margin: 0;
  заполнение: 0;
  стиль списка: нет;
  позиция: абсолютная;
  верх: 0;
}

#navlist li, #navlist a {
  height: 44px;
  отображение: блок;
}

#home {
  слева: 0px;
  ширина: 46 пикселей;
  фон: url(‘img_navsprites. gif’) 0 0;
}

#prev {
  слева: 63 пикселя;
  ширина: 43 пикселя;
  фон: url(‘img_navsprites.gif’) -47px 0;
}

#далее {
  слева: 129 пикселей;
  ширина: 43 пикселя;
  фон: url(‘img_navsprites.gif’) -91px 0;
}

Попробуйте сами »

Объяснение примера:

  • #navlist {position:relative;} — позиция установлена ​​относительно, чтобы позволить абсолютное позиционирование внутри него
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} — поля и отступы установлены на 0, стиль списка удален, и все элементы списка абсолютное позиционирование
  • #navlist li, #navlist a {height:44px;display:block;} — высота всего изображения 44px

Теперь начните позиционировать и стилизовать каждую конкретную часть:

  • #home {left:0px;width:46px;} — Позиционируется полностью слева и ширина изображения 46px
  • #home {фон: URL (img_navsprites. gif) 0 0;} — Определяет фоновое изображение и его положение (слева 0px, сверху 0px)
  • #prev {left:63px;width:43px;} — Позиционировано на 63px вправо (#home ширина 46 пикселей + дополнительное пространство между элементами), а ширина 43 пикселя
    • .
  • #prev {background:url('img_navsprites.gif') -47px 0;} — определяет фон изображение на 47 пикселей вправо (#home ширина 46 пикселей + линия 1 пиксель делитель)
  • #next {left:129px;width:43px;}  — позиционировано на расстоянии 129 пикселей от справа (начало #prev 63px + #prev ширина 43px + дополнительный пробел), а ширина 43px
  • #следующий {фон: URL('img_navsprites.gif') -91px 0;} — Определяет фоновое изображение на 91 пиксель вправо (#home ширина 46 пикселей + 1 пиксель разделитель строк + #prev ширина 43px + разделитель строк 1px)

Спрайты изображений — Эффект наведения

Теперь мы хотим добавить эффект наведения в наш список навигации.

Совет: Селектор :hover можно использовать на всех элементах, не только по ссылкам.

Наше новое изображение («img_navsprites_hover.gif») содержит три навигационных изображения и три изображения для эффектов наведения:

Поскольку это одно изображение, а не шесть отдельных файлов, не будет задержка загрузки , когда пользователь наводит курсор на изображение.

Мы добавляем только три строки кода, чтобы добавить эффект наведения:

Пример

#home a:hover {
  background: url(‘img_navsprites_hover.gif’) 0 -45px;
}

#prev a:hover {
  background: url(‘img_navsprites_hover.gif’) -47px -45px;
}

#next a:hover {
  background: url(‘img_navsprites_hover.gif’) -91 пиксель -45px;
}

Попробуйте сами »

Объяснение примера:

  • #home a:hover {background: url('img_navsprites_hover. gif') 0 -45px;} — Для всех трех изображений при наведении мы указываем один и тот же фон позиция, всего на 45 пикселей ниже

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

9 Лучшие примеры6 Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To Примеры
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery2

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

Простое руководство по CSS-спрайтам | Удасити | Tech

Назад Простое руководство по CSS-спрайтам

Изображения являются одним из наиболее важных аспектов визуальной мощи веб-сайта. Спрайты CSS — это набор изображений, объединенных в один файл, к которому может получить доступ HTML-документ. Затем эти изображения используются в HTML-коде для отображения на веб-сайте.

В этом кратком руководстве вы узнаете больше о деталях изображения спрайта и о том, как его можно использовать для улучшения вашего веб-сайта. В этом руководстве вам будут предоставлены примеры кода и выходных данных, которые помогут вам в использовании спрайтов CSS.

Если вам нужно освежить в памяти основы HTML или CSS , ознакомьтесь с HTML для чайников и Основы CSS для начинающих , чтобы наверстать упущенное.

Что такое спрайт CSS?

Спрайт CSS представляет собой набор изображений, помещенных в один файл. Поначалу это может не иметь смысла, так как будет сложно получить несколько изображений из одного файла, поскольку разрешение изображения и наложение изображений могут стать потенциальными ловушками.

К счастью, это не так. Спрайт CSS — это плоское 2D-изображение, на которое ссылаются заданные вами координаты x и y. На многие изображения можно ссылаться из координатной плоскости изображения с помощью одного файла спрайта.

Используя один файл для вызова нескольких изображений, веб-сайту не нужно делать столько исходящих HTML-запросов. Кроме того, сам размер изображения меньше, что приводит к меньшему использованию полосы пропускания сайтом.

На небольших сайтах с низким трафиком вызовы изображений могут быть едва заметны. Однако на крупных сайтах с интенсивным трафиком эта проблема может оказать заметное влияние на инфраструктуру, предназначенную для использования сайтом. Спрайты CSS — отличный вариант для оптимизации производительности сайта.

 

Как использовать спрайт CSS?

 

Теперь, когда вы знаете «почему» использование спрайтов CSS, вам может быть любопытно, как вы можете использовать их в своей работе. Во-первых, вам понадобится изображение спрайта CSS для работы.

 

Создание файла спрайтов CSS

 

Вы можете использовать различные методы для создания собственных файлов спрайтов, например, добавляя несколько изображений с помощью Photoshop, Gimp или других инструментов редактирования изображений. Вы даже можете использовать бесплатные онлайн-сервисы, такие как Генератор спрайтов Topals или Мгновенный спрайт для управления процессом. Когда у вас есть набор изображений, объединенных в один файл, ваш спрайт изображения готов к работе. Обратите внимание, что формат PNG отмечен как общий тип файла для использования для спрайтов CSS.

Приведенные ниже рисунки были созданы для этого процесса.

Затем все три нарисованных изображения были отредактированы в одно изображение PNG для использования в качестве спрайта. Объединенные изображения показаны в примере ниже.

Использование файла CSS-спрайта

 

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

Теги элементов 0035 div размещаются в теле документа. Классы используются, чтобы помочь с кодированием CSS для изображений спрайтов. Если вы не знакомы с использованием классов, прочтите HTML/CSS Class and ID Selectors , чтобы получить отличное пошаговое руководство.

Каждый div имеет класс « spriteContainer ». В div также добавляется второй класс. Эти вторичные классы « doodle1, », « doodle2 » и « doodle3 » помогают выбирать изображения из файла спрайтов. Помните, что вы можете называть классы по своему усмотрению. Соглашения об именах здесь просто для удобства.

На следующем изображении ниже показан базовый код HTML-документа.

После завершения работы с отображением HTML-документа процесс переходит к стилю CSS. В приведенном ниже коде CSS вы можете видеть, что у класса « spriteContainer » установлено свойство фона. Используемое значение представляет собой локально сохраненный файл спрайтов CSS, созданный из объединенных изображений каракулей.

Настройка положения изображения спрайта

 

Затем нужные изображения должны быть выбраны из файла спрайта CSS, чтобы их можно было отобразить на странице. Здесь в игру вступают значения горизонтального и вертикального положения. Если вы создали свой собственный файл спрайтов CSS, чтобы проверить этот процесс, вам может быть интересно, как вы будете находить эти значения.

Вы можете загрузить файл изображения в инструменты редактирования, такие как Photoshop, чтобы отобразить сетку. Существует также возможность просто угадать правильные значения методом проб и ошибок.

На приведенном ниже изображении таблицы стилей CSS каждый класс doodle имеет значения для отображения изображения. Сначала задаются ширина и высота, а также способ отображения. Значение встроенного блока используется для отображения, чтобы все изображения находились на одном уровне блока с изменяемой высотой. фоновая позиция 9Значение 0036 — это место, где устанавливаются целевые координаты для нужного вам изображения.

Первое значение — это горизонтальное положение . Для первого изображения значение остается равным нулю. Если вы ссылаетесь на файл, это первое изображение в левой части файла. В следующих двух классах каракулей значение было перемещено, чтобы вместо этого ссылались на другие изображения.

Второе значение для вертикального положения . Вы могли заметить, что это значение не изменилось ни в одном из классов дудла. Поскольку в файле всего три изображения, и все они находятся на одном уровне x, значение изменять не нужно.

Вы можете увидеть эти шаги в примере таблицы стилей CSS ниже.

Объединив код HTML и CSS, вы получите следующий вывод на странице.

Браузер извлек запрошенные изображения из одного файла спрайтов CSS и поместил их в указанные области HTML-документа. Использование этого метода может показаться странным, так как вы делаете немного больше работы, чтобы подготовить изображения. Отдача — это улучшение общей производительности сайта по мере его роста.


Вы также можете повторно использовать классы изображений после их определения. Подумайте, сделали ли вы сайт для продажи автомобилей. После определения класса изображения вы можете использовать ярко-красную наклейку в любом месте. Вы также можете хранить все изображения типа продажи в одном указанном файле спрайтов CSS. Затем этот единственный файл можно использовать на любом веб-сайте, который вы создаете. Этот модульный подход не только экономит ваше время как дизайнера, но и избавляет от головной боли.

________________________________________________________________________________

Зачем останавливаться только на CSS и работе с изображениями? Добавьте продвинутые навыки программирования, чтобы спроектировать собственное будущее. Креативность программирования позволяет людям делать еще больше со своими идеями. Если вы хотите продвинуться по карьерной лестнице, сделайте первые шаги, научившись программировать.

Наличие этих навыков поможет вам открыть двери для новых профессиональных возможностей.

Comments
Leave Comment