http://wm-monitoring.ru/ ')) {alert('Спасибо за то что установили нашу кнопку! =)');} else {alert('Очень жаль! =(');}"> http://wm-monitoring.ru/

CSS спрайт увеличение, изменение изображения при наведении курсора

Опубликовано: 23.08.2018

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

Приветствую Вас на блоге  history-of-blog.ru . Эта статья посвящена теме CSS спрайтов , благодаря которым можно добиться классных эффектов в дизайне, при этом не перегружая блог. Наверняка многие блоггеры, когда что-то правили в шаблоне задавались вопросом: а как сделать так, чтобы изображение увеличивалось или менялось при наведении курсора? В этой статье мы ответим на этот вопрос.

Что такое css спрайт?

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

Пример спрайтов:

Кнопка Rss  в сайдбаре. Кнопки “Отправить письмо”, “Я в контакте”, “Я в Twitter” в футере.

Вот пример изображения которое я использовал для спрайта в сайдбаре:

Для наглядности именно на примере этой картинки и будет написана данная статья.

Основным плюсом спрайта является то, что мы создаем одно изображение вместо двух, трех, четырех и так далее. Можно хоть все используемые графические элементы шаблона разместить на одной картинке, а благодаря css задать то, что нужно выводить в конкретном месте. В результате это, большое изображение, получается меньше, чем много маленьких, но это не главное. Главное в том, что браузер кэширует только один url адрес картинки, то есть происходит меньше запросов, соответственно повышается скорость загрузки сайта и не наблюдается различных мелких ляпов.

Вот еще один пример картинки спрайта для facebook:

В качестве визуальных задач, которые выполняет этот эффект являются:

Изменение изображения при наведении курсора мыши. Увеличение изображения при наведении.

В моем случае картинка становится более темнее (контрастнее).

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

Создаем картинку для спрайта в фотошопе

Скачиваем изображение.

Мне нужно было создать кнопку, которая ведет на Rss ленту блога:  http://feeds.feedburner.com/history-of-blog . Так как иконок Rss довольно много в интернете и можно выбрать такую, которая точно понравится, я решил просто скачать ее. Выбрал вот такую (разрешение 100×100 пикселей):

Обратите внимание: фон картинки должен быть прозрачным!

Подготавливаем фотошоп.

Открываем картинку в фотошопе:

Если у вас нет линеек по бокам изображения, то включите их:  Просмотр -> Линейки.

Увеличиваем изображение в два раза по вертикали.

Вся инструкция на картинке:

Завершаем изображение:

Сохраняем картинку:

Файл -> Сохранить для Web устройств… Сверху выбираем формат PNG-24 и сохраняем.

Картинка готова!

Создаем картинку, которая меняется при наведении курсора

Выбираем то место место, куда хотим вставить картинку и вставляем туда следующую конструкцию:

<a href="http://feeds.feedburner.com/history-of-blog" target="_blank"> <div class="rss"> </div> </a>

Ссылку вставлять необязательно, если этого не требуется.

Затем открываем файл style.css и в самом конце добавляем:

.rss { width:100px; height:100px; background:url(images/rss.png) no-repeat bottom center; float:left; margin-top:5px; } .rss:hover { background:url(images/rss.png) no-repeat top center; float:left; }

Данные стили используются мной, не факт что именно Вам они подойдут. Все частные случаи разобрать, увы, невозможно.

Дам некоторые пояснения:

width – ширина картинки. height – половина высоты картинки. background – фон (url – адрес до картинки), no-repeat – без повторений, bottom center и top center – какую часть изображения выводить – нижнюю или верхнюю (именно в этом фишка спрайта). :hover – стиль при наведении.

Вот в принципе и все! Благодаря css спрайту мы сделали так, что изображение меняется при наведении курсора  как это сделано здесь в сайдбаре.

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

Комментировать через ВКонтакте :

Карта
rss