Спрайты для сайта — скачать бесплатный набор картинок.

Приветствую вас дорогие друзья! Сегодня я поделюсь с вами небольшой коллекцией элементов для веб дизайна.

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

Давайте лучше приведу пример спрайта и все сразу станем понятно, вот пример:

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

Чтобы совсем стало понятно, давайте рассмотрим применение спрайтов.

Зачем нужны спрайты и как ими пользоваться?

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

Давайте вернемся к вышеупомянутому примеру про птичку и попробуем сделать так, чтобы у нас показывалась верхняя птичка (верхняя половина картинки), а при наведении мышью, показывалась бы другая птичка (нижняя часть картинки).

Это делает с помощью css правил.

Итак, у нас имеется спрайт картинка:

Её размеры: 90 на 174 пикселя, верхняя половина – это 90 на 87 пикселей.

Давайте рассмотрим код:

        <div id="primer"></div>

При наведении мыши, мы просто меняет позицию фона и благодаря этому создается интересный эффект без использования языка javascript.

А вот пример вышеизложенного кода в действии:

То есть при наведении мы показываем другую часть картинки.

Теперь, я думаю, у вас не возникнет вопросов как и где применять такие элементы дизайна на своем сайте.

Вот небольшая коллекция css спрайтов, собранная на просторах интернета.

На этом все, до новых публикаций, удачи!

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