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 спрайту мы сделали так, что изображение меняется при наведении курсора как это сделано здесь в сайдбаре.
Похожие статьи:
Комментировать через ВКонтакте :
Сегодня | Завтра | ||
USD | 32.62 | 32.50 | |
EUR | 39.90 | 39.92 |
Обменник | Переходов |
Wmchanger | 6 |
E-Market | 5 |
WMtoCash.com | 4 |
Str-Money | 3 |
Hot-Change | 3 |
Вы можете получить WMR-бонус в размере 0,01-0,10 WMR на свой кошелек 1 раз в сутки | |
Кошелек
|
|
Код
|
|
Обмен Webmoney |