Главная Форум Поиск Пользователи Регистрация Добрый день, Гость Вход


Главная


Форум torrenpier который уже живет
это сообщество владельцев форумов на phphBB2, торрент-трекеров на движках torrentpier и SVN всех версий.
Здесь можно найти решение своих проблем на своем сайта.
Здесь можно скачать полезные и нужные моды torrenpier, phpBB2 и svn.
Наш форум - это место для общения и обмена опытом между любителей движков, создателей модов на заказ и владельцев сайтов!
Рисунок на кнопке средствами CSS  
Начать новую тему   Ответить на тему    Главная -> Оформление
Автор Сообщение
Admin
Администратор
Зарегистрирован: 2010-07-27
Сообщ.: 777
russia.gif
Сообщение 21-Май-11 11:17 #1  
Самый простой вариант создания кнопки, содержащей на себе рисунок — это нарисовать ее в каком-нибудь графическом редакторе. Такие кнопки поддерживаются в форме с помощью параметра input type=image.

Пример 1. Рисованные кнопки

Код:
<span style="color:orange"><form>
<input type="image" border="0" src="button.gif" width="50" height="20">
</form></span>


Созданные указанным в примере способом кнопки, в полном смысле таковыми не являются, а скорее похожи на ссылки. При наведении курсора мыши на такую кнопку, курсор меняет свою форму, как и при работе со ссылками, а при нажатии на кнопку происходит отправка формы на сервер.
Стили позволяют на кнопках, созданных с помощью параметра input type=button или input type=submit, размещать любой фон или рисунок.

Пример 2. Создание фона на кнопке

Код:
<form>
<input type=button style="background: url(bgbutton.gif); height:20px; line-height:12px;" value="Кнопка с фоном">
</form>


Параметр url(bgbutton.gif) определяет, какой файл будет использоваться в качестве фона.
Точно таким же образом делается на кнопке и небольшой рисунок. Подготавливается изображение, которое будет использоваться в качестве фона, а на нем размещаете любую иконку.
— Рисунок для фона

Пример 3. Размещение рисунка на кнопках

Код:
<form>
<input type=button style="background: url(imgbutton.gif) no-repeat left; height:20px; line-height:12px;" value="Кнопка с рисунком">
</form>


url(imgbutton.gif) указывает пукть к рисунку, no-repeat left
Так как фоновое изображение, также как и текст, выравнивается по левому краю, чтобы не произошло наложения рисунка и текста друг на друга, текст надо сместить вправо, добавив перед ним несколько пробелов.
Вернуться к началу
    
Заголовок новой темы
Форум для новой темы
 
Страница 1 из 1
Показать сообщения:   
Начать новую тему   Ответить на тему    Главная -> Оформление Часовой пояс: GMT + 4

 

Перейти:  
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Все материалы сайта представлены только для ознакомления. При копировании материала ссылка на torrentpier-download.ru обязательна!

sitemap     карта форума | Статистика визитов поисковых ботов | Выдача в поисковиках



Powered by phpBB © 2001, 2011 phpBB Group
| ©2011-2024 - Воронеж |


Нравится