Делаем простое меню с использованием sprites и border-radius
Как-то давно меня просили показать пример использования спрайтов на практике. Вот и решил быстренько сделать несложную менюшку с использованием sprites и border-radius.
Что это значит?
- все картинки в одном файле (sprites)
- закругленные края меню (border-radius)
Чтобы Вам было понятнее, что я хочу сделать, вот пример того, что получится на финише:
Итак, приступим.
Для начала, нарисуем будущую картинку фона меню и фона за ссылкой при наведении на нее (:hover)
Я нарисовал такую, для меню вполне приемлема. Размер: 10x30, Формат: .gif
Далее пишем СSS стиль:
И вставляем в нужное место (где нам нужно вывести меню) следующий код:
Вот и все
Примечание:
border-radius в IE не работает, т.к. это CSS3.
Но дело это поправимое:
- скачиваем с Google Code
- помещаем его в папку с нашим CSS
- добавляем в стили, везде, где есть border-radius строчку:
Спрашивайте обо всем, что не понятно, постараюсь объяснить как можно подробнее. Удачи.
P.S. Статья из моего Блога, учитывая, что стали в новости выкладывать даже подобные мелочи, решил тоже зазвездиться. Кому понравился этот мини-урок, ставьте + в репу
Что это значит?
- все картинки в одном файле (sprites)
- закругленные края меню (border-radius)
Чтобы Вам было понятнее, что я хочу сделать, вот пример того, что получится на финише:
Итак, приступим.
Для начала, нарисуем будущую картинку фона меню и фона за ссылкой при наведении на нее (:hover)
Я нарисовал такую, для меню вполне приемлема. Размер: 10x30, Формат: .gif
Далее пишем СSS стиль:
#menu {
width: 100%;
padding: 5px 0 5px 0;
height: 20px
border: 0px;
color: #FFF;
font-family: Arial,Helvetica,Garuda,sans-serif;
font-size: 13px;
background: url(bg_menu.gif) 0 0 repeat-x;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu a{
padding: 5px;
height: 20px;
font-weight: bold;
color: #FFF;
text-decoration: none;
}
#menu #first {
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#menu a:hover{
background: url(bg_menu.gif) 0 30 repeat-x;
}
width: 100%;
padding: 5px 0 5px 0;
height: 20px
border: 0px;
color: #FFF;
font-family: Arial,Helvetica,Garuda,sans-serif;
font-size: 13px;
background: url(bg_menu.gif) 0 0 repeat-x;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu a{
padding: 5px;
height: 20px;
font-weight: bold;
color: #FFF;
text-decoration: none;
}
#menu #first {
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#menu a:hover{
background: url(bg_menu.gif) 0 30 repeat-x;
}
И вставляем в нужное место (где нам нужно вывести меню) следующий код:
Вот и все
Примечание:
border-radius в IE не работает, т.к. это CSS3.
Но дело это поправимое:
- скачиваем с Google Code
- помещаем его в папку с нашим CSS
- добавляем в стили, везде, где есть border-radius строчку:
behavior: url(border-radius.htc);
Спрашивайте обо всем, что не понятно, постараюсь объяснить как можно подробнее. Удачи.
P.S. Статья из моего Блога, учитывая, что стали в новости выкладывать даже подобные мелочи, решил тоже зазвездиться. Кому понравился этот мини-урок, ставьте + в репу
Теги
6 комментарии
- Всего товаров 10
- Рейтинг (0)
- Регистрация 05 апр 2011
- Уровень 0
- Пользователь подтверждён Да
- Телефон подтверждён Нет
- Email подтверждён Нет
bizze
- 30 июн 2011Мой код короче твоего!
(если без закруглений краев, а у тебя их как рази нет)
ZICKFREED
- 30 июн 2011так их не проблема и в один соединить, я не говорю что твой код плохой, я всего-то сказал что от кучи текста и вес файла увеличивается, вот собсно что я хотел сказать
bizze
- 30 июн 2011Эмм... и чего ты этим добился?
У меня одна картинка:
- Загружается разу
- вот весь код background: url(bg_menu.gif) 0 0; и background: url(bg_menu.gif) 0 30;
Извини, конечно, за выражение, на кой хрен их 2 делать?! Если урок об рациональном использовании, sprite наверняка не просто так придумали? м?
Покажи мне хоть одно усложнение?
Меня просто спрашивали про закругления в CSS, вот я и написал!
Ребят, я в ауте. Можно действительно прокомментировать, а не блистать своими псевдо-"знаниями"?
Дельные советы выслушаю, и прикреплю к новости, обещаю! Но, ничего более чем CSS и HTML не предлагать. Урок именно об этой связке.
ZICKFREED
- 30 июн 2011используем 2 картинки что бы не засорять и не увеличивать цсс-файл
ul#nav2 {font:12px Arial; float: left;
margin: 0;
padding: 0;
position: relative;}
ul#nav2 li a{ background:url(../img/nav.png) repeat-x; padding: 5px 10px;
padding-bottom:12px;
color: #ffffff;
display: block;
text-decoration: none;
float: left;
font-weight:bold;
}
ul#nav2 li a:hover{background:url(../img/navh.png) repeat-x;}
так я сделал свой кабинет рекламодателя
Green-wm
- 30 июн 2011Так сделайте!