Делаем простое меню с использованием sprites и border-radius
Делаем простое меню с использованием sprites и border-radius
Как-то давно меня просили показать пример использования спрайтов на практике. Вот и решил быстренько сделать несложную менюшку с использованием sprites и border-radius.

Что это значит?
- все картинки в одном файле (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;
}

И вставляем в нужное место (где нам нужно вывести меню) следующий код:
<div id="menu">
<a href="" id="first">Ссылка 1</a>  
<a href="">Ссылка 2</a>  
<a href="">Ссылка 3</a>  
<a href="">Ссылка 4</a>  
<a href="">Ссылка 5</a>  
</div>

Вот и все smile

Примечание:
border-radius в IE не работает, т.к. это CSS3.

Но дело это поправимое:
- скачиваем с Google Code htc-файл
- помещаем его в папку с нашим CSS
- добавляем в стили, везде, где есть border-radius строчку:
behavior: url(border-radius.htc);

Спрашивайте обо всем, что не понятно, постараюсь объяснить как можно подробнее. Удачи.

P.S. Статья из моего Блога, учитывая, что стали в новости выкладывать даже подобные мелочи, решил тоже зазвездиться. Кому понравился этот мини-урок, ставьте + в репу fellow


Рубрика: Бесплатное » Дополнения   |   Автор: bizze   |   Просмотры: 5309
Комментариев: 738
Публикаций: 50
ICQ: --
- 4 +
  Автор: Green-wm   |   Группа: Пользователи   |   Дата: 30 июня 2011  
border-radius - не пашет в IE fellow
Комментариев: 159
Публикаций: 10
ICQ: 407464816
- 174 +
  Автор: bizze   |   Группа: V.I.P.   |   Дата: 30 июня 2011  
Цитата: Green-wm
border-radius - не пашет в IE

Знаю, это CSS3 smile

Green-wm,
Я так понял, после твоего коммента может возникнуть масса негодования среди читателей данного урока, поэтому добавил небольшой "fix" к статье fellow
Комментариев: 738
Публикаций: 50
ICQ: --
- 4 +
  Автор: Green-wm   |   Группа: Пользователи   |   Дата: 30 июня 2011  
Цитата: bizze
поэтому добавил небольшой "fix" к статье

Красавчик! smile
Комментариев: 171
Публикаций: 10
ICQ: 616654741
- 309 +
  Автор: pushok   |   Группа: V.I.P.   |   Дата: 30 июня 2011  
Насчет фикса: раньше(когда надо было) патался его воткнуть, но мой ИЕ так и ненаучился скруглять углы recourse
Комментариев: 159
Публикаций: 10
ICQ: 407464816
- 174 +
  Автор: bizze   |   Группа: V.I.P.   |   Дата: 30 июня 2011  
Цитата: pushok
Насчет фикса: раньше(когда надо было) патался его воткнуть, но мой ИЕ так и ненаучился скруглять углы

Ну этот новый работает. Вплоть до 8 исправляет все проблемы.

Что-то ни одного плюсика не увидел, ех, жадины tongue
Комментариев: 738
Публикаций: 50
ICQ: --
- 4 +
  Автор: Green-wm   |   Группа: Пользователи   |   Дата: 30 июня 2011  
Цитата: bizze
Что-то ни одного плюсика не увидел, ех, жадины

+ дал =)
Комментариев: 107
Публикаций: 2
ICQ: --
- 105 +
  Автор: ZICKFREED   |   Группа: Пользователи   |   Дата: 30 июня 2011  
а зачем так всё усложнять с цсс???
можно ведь всё на много проще и эффекивнее сделать
Комментариев: 52
Публикаций: 1
ICQ: 646864908
- 55 +
  Автор: Совесть   |   Группа: Пользователи   |   Дата: 30 июня 2011  
можно и без закругления в ксс делать =) и в Ие будит пахать)
Комментариев: 171
Публикаций: 10
ICQ: 616654741
- 309 +
  Автор: pushok   |   Группа: V.I.P.   |   Дата: 30 июня 2011  
Цитата: Совесть
можно и без закругления в ксс делать =) и в Ие будит пахать)

ну и как?
Комментариев: 738
Публикаций: 50
ICQ: --
- 4 +
  Автор: Green-wm   |   Группа: Пользователи   |   Дата: 30 июня 2011  
Цитата: Совесть
можно и без закругления в ксс делать =) и в Ие будит пахать)

Цитата: ZICKFREED
а зачем так всё усложнять с цсс???можно ведь всё на много проще и эффекивнее сделать

Так сделайте!
Комментариев: 107
Публикаций: 2
ICQ: --
- 105 +
  Автор: 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;}

так я сделал свой кабинет рекламодателя
Комментариев: 159
Публикаций: 10
ICQ: 407464816
- 174 +
  Автор: bizze   |   Группа: V.I.P.   |   Дата: 30 июня 2011  
Цитата: ZICKFREED
используем 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;}так я сделал свой кабинет рекламодателя

Эмм... и чего ты этим добился?
У меня одна картинка:
- Загружается разу
- вот весь код background: url(bg_menu.gif) 0 0; и background: url(bg_menu.gif) 0 30;

Извини, конечно, за выражение, на кой хрен их 2 делать?! Если урок об рациональном использовании, sprite наверняка не просто так придумали? м?
Цитата: ZICKFREED
а зачем так всё усложнять с цсс???

Покажи мне хоть одно усложнение? facepalm
Цитата: Совесть
можно и без закругления в ксс делать =) и в Ие будит пахать)

Меня просто спрашивали про закругления в CSS, вот я и написал! facepalm

Ребят, я в ауте. Можно действительно прокомментировать, а не блистать своими псевдо-"знаниями"?
Дельные советы выслушаю, и прикреплю к новости, обещаю! Но, ничего более чем CSS и HTML не предлагать. Урок именно об этой связке.
Комментариев: 107
Публикаций: 2
ICQ: --
- 105 +
  Автор: ZICKFREED   |   Группа: Пользователи   |   Дата: 30 июня 2011  
Цитата: bizze
на кой хрен их 2 делать?!

так их не проблема и в один соединить, я не говорю что твой код плохой, я всего-то сказал что от кучи текста и вес файла увеличивается, вот собсно что я хотел сказать
Комментариев: 159
Публикаций: 10
ICQ: 407464816
- 174 +
  Автор: bizze   |   Группа: V.I.P.   |   Дата: 30 июня 2011  
Цитата: ZICKFREED
так их не проблема и в один соединить, я не говорю что твой код плохой, я всего-то сказал что от кучи текста и вес файла увеличивается, вот собсно что я хотел сказать

Мой код короче твоего! facepalm
(если без закруглений краев, а у тебя их как рази нет)
Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.