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

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

Элементами веб дизайна, представленными в этом небольшое наборе, являются спрайты. Спрайты (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 спрайтов, собранная на просторах интернета.


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

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


Хостинг, которым я пользуюсь: Good-Host


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

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

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

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

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

*

code

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