rss

Спрайты. Только средствами css.

(1 оценили, 5 баллов, средний: 5,00 из 5)
{lang: 'ru'}

В этой небольшой заметке, хотелось бы рассказать про создание спрайта исключительно средствами css-стилей. Это действительно и легче, и проще.
Для начала, нам нужно двойное изображение, при наведении на которое, оно будет меняться. Меняться может, например, как цвет картинки, так и позиция объекта.

lisa-ray-2

 

Теперь в .html  вставим код:

<a id="logo-link" href="http://link.com"> </a>

А в файл стилей прописываем:

 

#logo-link
    {
	width:201.9px;
	height:201px;
	text-decoration:none;
	display:block;
	background-image:url(lisa-ray-2.png);
	background-position:201.9px 0;
    }
    #logo-link:hover,#logo-link:active	{ background-position:0 0; }

 

Не стала делать демо, есть готовые файлы, в которых реализовано сие дело

Нет меток к этой записи

Получайте уроки по почте:

2 Comment , источник - wordpress-f1.ru

Comments (2)

  1. Приветствую! На мой взгляд, немного не правильное название статьи. Нельзя сделать спрайты средствами CSS, спрайт это сборная картинка, из которой уже средствами CSS можно создавать разные эффекты. В описанном вами случае используется спрайт в виде двойной картинки создается ховер эффект.

    • wordpress-f1:

      Артем, вы правы, не совсем точно выразилась в запарке, имелось ввиду создание хавера без css3 и java script

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: