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


Спрайт Приветствую вас дорогие друзья! Сегодня я поделюсь с вами небольшой коллекцией элементов для веб дизайна. Элементами веб дизайна, представленными в этом небольшое наборе, являются спрайты. Спрайты (css спрайты), проще говоря, - это одна картинка, которая разбита на несколько, так скажем, сегментов - каждый сегмент - это отдельная картинка.. Давайте лучше приведу пример спрайта и все сразу станем понятно, вот пример: Птичка - спрайт для сайта То есть смотрите, это одна картинка, но на ней изображено две птички, так скажем, в двух разных состояниях и от определенного условия, будет показываться то одна, то другая область одной и той же картинки. Чтобы совсем стало понятно, давайте рассмотрим применение спрайтов.

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

Спрайты используются в качестве украшения, создания какого-либо эффекта на сайте, например, кнопки, у которые меняют свой фон (оттенок) при наведении или нажатии на них мышью. Давайте вернемся к вышеупомянутому примеру про птичку и попробуем сделать так, чтобы у нас показывалась верхняя птичка (верхняя половина картинки), а при наведении мышью, показывалась бы другая птичка (нижняя часть картинки). Это делает с помощью css правил. Итак, у нас имеется спрайт картинка: Птичка - спрайт для сайта Её размеры: 90 на 174 пикселя, верхняя половина - это 90 на 87 пикселей. Давайте рассмотрим код:
<style type="text/css">
	#primer{
		width: 90px;
		height: 87px;
		background:url("https://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 спрайтов, собранная на просторах интернета.
Скачать набор
На этом все, до новых публикаций, удачи!


Раздел: Дизайн/верстка

Дата последнего изменения: 2014-02-11 00:37:55

Просмотров: 11276

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

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*