Создание сайта
Регистрация
Продвижение
Монетизация
Облако тегов

Требуется для просмотраFlash Player 9 или выше.

Показать все теги

Главная » Создание сайта » CSS » Создание «резиновой» кнопки из 3 изображений с помощью CSS

Создание «резиновой» кнопки из 3 изображений с помощью CSS
Раздел: Создание сайта » CSS  
14 августа 2009   |   автор: admin Оставить комментарий



С помощью фоновых изображений, можно создать "резиновую" кнопку, которая будет адаптироваться по ширине в зависимости от содержимого текста. 

Этот метод полезен для создания кнопок, которые имеют разные размеры, как показано в следующем примере.

 

 

alt

 

 

 

 

alt

 

 

 

 

Основная идея заключается в том, чтобы добавить к нашему HTML элементу «а»:

1. пустой элемент с фоновым изображением для левой части: в этом примере – «em».
2. элементы, содержащие текст и изображения фона для центральной части: «span» в этом примере.
3. пустой элемент с фоновым изображением для правой части: в этом примере – «b».

Изображения, используемые здесь:

alt   (35×35px) для элемента em

 

alt   (10×35px) для элемента span

 

alt   (35×35px) для элемента b

 

 

 

Код html:

 

<a href="#nogo">
<em></em>
<span>Our text content</span>
<b></b>
</a>

 

 

Правила css: 

 

a em{
display: block;
float: left;
background: url(em_bg.jpg) no-repeat;
width: 35px;
height: 35px;
}
a span{
display: block;
float: left;
background: url(span_bg.jpg) repeat-x;
height: 35px;
}
a b{
display: block;
float: left;
background: url(b_bg.jpg) no-repeat;
width: 35px;
height: 35px;
}

 

 

Что касается базового CSS горизонтальное меню, мы используем:

CSS свойство display со значением block преобразует встроенный элемент в блочный

CSS свойство float со значением left используется для выравнивания элементов по горизонтали

CSS свойство background со значением no-repeat для пустых элементов «em» и «b», и значением repeat-x для элемента «span» для добавления фоновых изображений

CSS свойства width и height для определения размеров элементов. При этом у элемента «span» не указывается ширина, так как она зависит от размера текста, который в нем содержится.


Материал подготовлен: www.web-lesson.ru


Ключевые теги: CSS, кнопка
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
web-lesson.ru
Добавление комментария
Ваше Имя:
Ваш E-Mail:
Код:
Введите код