css — Блог Валерия Леонтьева https://valera.ws Место публикации личных заметок. Технологии, управление, бизнес, жизнь Sun, 25 Oct 2009 15:53:11 +0000 ru-RU hourly 1 https://wordpress.org/?v=5.6.2 https://valera.ws/wp-content/uploads/2020/02/favicon.png css — Блог Валерия Леонтьева https://valera.ws 32 32 CSS-кнопка с реакцией на наведение https://valera.ws/2009.10.25~css-button-sprite/ https://valera.ws/2009.10.25~css-button-sprite/#respond Sun, 25 Oct 2009 15:35:10 +0000 http://valera.ws/?p=366 Читать далее CSS-кнопка с реакцией на наведение →]]> Верстка кнопки для HTML-страницы, которая работает через тег <a> (т.е. с нее можно, например, скопировать адресс ссылки по правому клику в браузере), собранной из CSS-спрайта. Все картинки: края, фон, края и те же элементы при наведении собраны в один CSS-спрайт.

Итак, HTML-код кнопки такой:

CSS-спрайт для нее выглядит так:

Кратко суть верстки: внешний элемент a поставляет картинку начала кнопки (левая часть) и делать отступ слева на ширину это картинки, первый вложенный span добавляет конец кнопки и отступ справа, второй вложенный span заливает фон кнопки и объявляет ее высоту.  Последний вложенный span нужен для размещения текста кнопки по-середине.

Т.к. элементы спрайта прозрачные, необходимо избегать наложения одного элемента на другой. Именно поэтому нижний элемент обрезан слева.

Тестировалась и работает правильно в IE 7, Opera 10, Firefox 3.5, Safari 3.1.2, Chrome 3.0.195.27.

Демонстрация…

 
]]> https://valera.ws/2009.10.25~css-button-sprite/feed/ 0