Спрайты для дизайна вашего сайта!



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

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

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

Птичка - спрайт для сайта

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

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

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

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



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

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

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

Птичка - спрайт для сайта

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

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

<style type="text/css">
	#primer{
		width: 90px;
		height: 87px;
		background:url("http://sergey-oganesyan.ru/wp-content/uploads/2014/02/sprite.jpg");
		cursor: pointer;
	}
	
	#primer:hover{
		background-position:0 87px;
	}
</style>

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

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

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

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

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

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


Скачать набор

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



Похожие статьи

  1. Марина пишет:

    С спрайтами лучше работать, и весят меньше и запросов меньше и количество рисунков меньше, как то виде плагин, которые спрайты делает сайт, но что то коряво, глючил

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>