• Теория
  • Теория

Позиционирование спрайтов

Наверное, вы задаётесь вопросами, как создавать спрайт и почему именно псевдоэлементы?

Создать спрайт можно как вручную в Фотошопе, так и воспользовавшись специальным сервисом. Например, сервис CSS Sprite Generator позволяет легко загрузить и объединить в спрайт несколько изображений, а также получить CSS-код с их координатами в спрайте.

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

А сейчас разместим псевдоэлементы поверх текущих иконок, и зададим им одну и ту же фоновую картинку — спрайт.


Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует 20 мая 2024. Всего от 5520 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Кексби. Четвертьфинал» тренажёра «Великий Кексби, этап 2» можно после регистрации и оформления подписки.