Создаем кнопку с помощью CSS: Часть вторая
10 февраля 2010 года, Размещено в категории: HTML / CSS
И так это второй мой урок из серии "Создаем кнопку с помощью CSS. Где мы будем знакомиться с такой технологией как CSS спрайты. Это один из самых простых и распространенных способов, при помощи которого создают динамические кнопки и меню.
Вот список предыдущих уроков:
Создаем кнопку с помощью CSS: Часть первая
Создаем кнопку с помощью CSS: Часть вторая
Делаем кнопки с помощью CSS, техника раздвижные двери
Бонус:
Красивые CSS кнопки с иконками
Шаг 1:
В чем суть техники CSS Sprite, а в том что у нас есть одно изображение на котором уже нарисовано несколько состояний нашей кнопки. Кто не знает в ссылки есть 4 состояния в котором она находится:
1. Активная (active)
2. Не посещенная (link)
3. Уже посещенная (visited)
4. Когда над ссылкой курсор (hover)
Как видите на картинке у меня только два состояния кнопки. Нижняя кнопка у нас будет под загружаться когда мы будем наводить курсор на кнопку, а верхняя будет отвечать за все другие состояния ссылки.
Шаг 2:
Теперь оформляем нашу кнопку при помощи CSS (смотрите комменты к каждому свойству CSS в низу). Кто не знает, как создать и прикрепить CSS файл к HTML файлу, тогда смотрите в первом уроке.
Download
a.btn3 { display:block; /*отображаться блоком*/ width:228px; /*Ширина кнопки*/ height:49px; /*Высота кнопки*/ background:url(btn_sprite_blue.gif) 0 0 no-repeat; /*подключаем изображения ссылки*/ text-align:center; /*Текст по центру*/ font-size:24px; /*Размер шрифта*/ font-weight:700; /*задаем жирность шрифта*/ text-decoration:none; /*убераем черту снизу ссылки*/ color:#fff; /*цвет ссылки в состоянии покоя*/ font-family:arial; /*шрифт ссылки*/ line-height:35px; /*расстояние между строками текста*/ border-width: 0px; /*убераем рамку с ссылки изображ.*/ } a.btn3:hover { background:url(btn_sprite_blue.gif) 0 -51px no-repeat; /*подключаем изображения ссылки*/ color:#666; /*цвет ссылки ккогда над ней курсор */ }
Теперь разложу по полочкам, самый важный кусок CSS, с помощь которого происходит анимация нашей кнопки:
/*Сжатый код*/ {background:url(btn_sprite_blue.gif) 0 -51px no-repeat;} {background:url(btn_sprite_blue.gif); /*подключаем изображения*/ background-position-x:0; /*задает горизонтальную координату фонового рисунка*/ background-position-y:-51px; /* задает вертикальную координату фонового рисунка*/ background-repeat: no-repeat; /*запрещает фоновому изображению повторяться;*/ }
Для тех кто не понял, когда мы наводим курсор на кнопку изображение опускается по вертикали на -51px и меняем цвет текста, так и выходит анимационная и динамичная кнопка. Таким образом мы можем каждом из состояний кнопки, предоставить разные варианты оформление.
Для этого нам нужно их нарисовать и прописать в CSS файл.
Ну вот и вся технология CSS спрайтов, ничего тяжелого здесь нет, нужно только понять как оно работает.
Мой блог находят по следующим фразам
• бесплатный плеер для сайта
• плавное перемещение по странице css
• фотогалерея для сайт
• div скролл css галерея
• фотогалерея для сайта на jquery
• миниатюры автоматом wordpress
10 лет назад
border-width: 0; забыл добавить, а то рамка в некоторых брауз. появляется из-за ссылки
10 лет назад
Спасибо что сказал, а то не увидел. Урок ночью писал просто:)
9 лет назад
еще можно outline добавить, чтоб небыло видно выделения при клике в мозиле
Артём
9 лет назад
Подскажите пожалуйста очень надо,как сделать, чтобы менялся бэкграунд кнопки при наведении(старый исчезал, а новый появлялся)
Артём
9 лет назад
точнее, почему-то первая кнопка в блоке работает, а вторая нет(нету перехода от одной картинки к другой):(
8 лет назад
А как прописать эту кнопку в боковой виджет — на WP — прямо в виджет писать или этого сделать невозможно???
8 лет назад
Можно в виджет, а можно через файл темы вставить.
8 лет назад
Суппер! Спасибо разобрался! Я уже давно облизывался на кнопки такого рода…
Незнал как их делают! Я думал что это флеш… Но когда научился делать аматорский флеш, то понял что это не то… Понял из за того, что в некоторых браузерах мне предлагалось сначало запустить флеш… Да и флеш по кругу ходит — а тут по активности!!! Суппер короче.
А по предидущему сообщению я прогнал. Вызов из виджета делаем так же как и с файла «хедер» или «футтер». У меня немного по свойму там получилось — но инфа от вас помогла на 97,9% ? (точно как у алкоголика 🙂