• Страница 1 из 1
  • 1
Стилизация кнопок
Aleko
Дата: Вторник, 10.11.2009, 22:23 | Сообщение # 1
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Проблема универсализации элементов интерфейса в браузерах достаточно стара. Предлогаю вам воспользоваться моей небольшой поделкой - универсальной (почти) системной кнопкой. Единственное ограничение - она может быть не шири 300 пикселей, хотя с фотошопом это можно будет исправить моментально.

На кнопку можно посмотреть в этом примере.

Скрин:

Используется одно изображение. При этом высота кнопки может быть любой, а ширина - в пределах 300 пикселей. Кнопка имеет 2 состояния - пассивное и активное. Края имеют однопиксельное сглаживание. Кнопка полность кроссбраузерна вплоть до каждого пикселя.

За эталон вида кнопки я взял кнопку из интерфейса gmail.

Полный код примера:

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Кнопка</title>
<style type="text/css">
.button {margin:0 1px;display:inline-block;border-top:1px solid #ccc;border-bottom:1px solid #ccc;text-decoration:none;outline:0;}
.button div {text-align:center;background:url(http://studioad.ru/_fr/4/4461357.gif) repeat-x;background-position:bottom left;padding:3px 6px 4px 6px;margin-right:-2px;left:-1px;position:relative;z-index:999999;font:11px 'Arial';color:#666;border-left:1px solid #ccc;border-right:1px solid #ccc;}
.button:hover {border-top:1px solid #8ac;border-bottom:1px solid #8ac;text-decoration:none;}
.button:hover div {background-position:bottom right;color:#568;border-left:1px solid #8ac;border-right:1px solid #8ac;}
</style>
</head>
<body>
<a href='#' class='button'><div>Кнопка</div></a>
</body>
</html>

Спасибо - в карму)

Прикрепления: 4461357.gif (1.1 Kb) · test.html (1.0 Kb) · 5411520.gif (0.5 Kb)


Бесплатные обои.
  
DSC
Дата: Вторник, 10.11.2009, 22:59 | Сообщение # 2
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
Aleko, эм..., я об это если честно и раньше знал...)

aka Latro
  
Aleko
Дата: Вторник, 10.11.2009, 23:05 | Сообщение # 3
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
DSC, просто это унифицированное решение, вот и всё. Ничего сложного.

Бесплатные обои.
  
DSC
Дата: Вторник, 10.11.2009, 23:13 | Сообщение # 4
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
Aleko, да, согласен с тобой!)

aka Latro
  
vladko95
Дата: Вторник, 10.11.2009, 23:22 | Сообщение # 5
говорун
Группа: Проверенные
Пользователь №: 51
Сообщений: 121
Получено оценок: 6
извените за нубский вопрос, но я не понял в чём кайф :( тут типо рассказывается о hovere или что? :D
  
DSC
Дата: Вторник, 10.11.2009, 23:43 | Сообщение # 6
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
vladko95, тут рассказывается, что можно сделать меню, в кототом текст не выделяется, ну оно короче как системные кнопки выглядит, ну типо того короче...

aka Latro
  
Aleko
Дата: Среда, 11.11.2009, 00:07 | Сообщение # 7
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
кайф в том, что можно сделать системную кнопку одинаковой во всех браузерах. И я описываю как просто это сделать. С обычной кнопокой работать гораздо сложнее.

Бесплатные обои.
  
vladko95
Дата: Среда, 11.11.2009, 00:39 | Сообщение # 8
говорун
Группа: Проверенные
Пользователь №: 51
Сообщений: 121
Получено оценок: 6
Quote (DSC)
в кототом текст не выделяется,

у меня вобщето выделяется ^_^
  
mallkt
Дата: Среда, 11.11.2009, 09:14 | Сообщение # 9
молчун
Группа: Пользователи
Пользователь №: 334
Сообщений: 4
спасибо полезно,себе кнопку рсс седалал ^_^
  
DSC
Дата: Среда, 11.11.2009, 12:18 | Сообщение # 10
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
vladko95, ну да, я ступил, написал не проверив... ^_^

aka Latro
  
Aleko
Дата: Воскресенье, 15.11.2009, 22:22 | Сообщение # 11
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Унификация однострочных текстовых полей:

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Поле</title>
<style type="text/css">
.textfield {margin:0 1px;display:inline-block;border-top:1px solid #ccc;border-bottom:1px solid #ccc;font-size:0;}
.textfield * {padding:3px 4px 4px 4px;border:0;margin-right:-2px;left:-1px;position:relative;z-index:999999;outline:0;font:11px 'Arial';color:#888;border-left:1px solid #ccc;border-right:1px solid #ccc;}
.textfield *:focus{color:#666;}
</style>
</head>
<body>
<div class='textfield'><input/></div>
</body>
</html>


Бесплатные обои.
  
chu4___x
Дата: Воскресенье, 15.11.2009, 23:49 | Сообщение # 12
говорун
Группа: Проверенные
Пользователь №: 13
Сообщений: 211
Получено оценок: 19
Aleko, о, и мне делать не надо, а то я на webcodes хотел сделать кнопки одинаковые под всеми браузерами, а тут готовый вариант, спасибо :D

«POST данные для модулей системы»
  
Aleko
Дата: Воскресенье, 15.11.2009, 23:56 | Сообщение # 13
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
chu4___x, ты первый кто понял мой замысел)

Бесплатные обои.
  
DSC
Дата: Понедельник, 16.11.2009, 10:37 | Сообщение # 14
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
почему-же он первый, саму суть я понял и знал уже давно! ^_^

aka Latro
  
WeLord
Дата: Понедельник, 30.11.2009, 08:27 | Сообщение # 15
шептун
Группа: Проверенные
Пользователь №: 457
Сообщений: 91
Получено оценок: 8
Aleko, Хм, а как перевести эти кнопки для uCoz сайта, ну например заменить кнопку Искать например, или войти но никасая вида кнопки форума и коментариев O_o
P.S. Сколько раз пытался неполучается что-то... :(


Сообщение отредактировал WeLord - Понедельник, 30.11.2009, 08:28
  
chu4___x
Дата: Понедельник, 30.11.2009, 18:46 | Сообщение # 16
говорун
Группа: Проверенные
Пользователь №: 13
Сообщений: 211
Получено оценок: 19
WeLord, replaceWith. + form.submit();

«POST данные для модулей системы»
  
UnderShot
Дата: Понедельник, 30.11.2009, 19:17 | Сообщение # 17
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
chu4___x, жди море ответных вопросов)

Очень важная тема!
Filmzona — онлайн фильмы.
  
ColdFire
Дата: Среда, 02.12.2009, 22:18 | Сообщение # 18
говорун
Группа: Проверенные
Пользователь №: 85
Сообщений: 123
Получено оценок: 7
А как сделать кроссбраузерную стилизацию обычных кнопок?
Или chu4___x, поясни плиз как обычную кнопку в uCoz заменить на кнопку Aleko. А то я не совсем втыкаю что это - eplaceWith. + form.submit(); :)
  
WRC
Дата: Воскресенье, 06.12.2009, 05:57 | Сообщение # 19
говорун
Группа: Проверенные
Пользователь №: 223
Сообщений: 149
Получено оценок: 11
Не хочется засорять форум создавая тему по одному глупому вопросу вопросу...решил написать здесь...
есть тэг:
<input type="file">
получается так:

вопрос...
как стилизовать поле и кнопку?
пробовал input[type=file] {...} не выходит...
пробовал класс присоединить тоже как не бывало...
как?

или подскажите как сделать форму чтоб выполняла туже функцию...
типо:
<input type="text"> (поле)
<a>Кнопка</a> (кнопка)
и при нажатии на кнопку открывалось окошко для выбора файла...
и при нажатии ок в "поле" появлялся путь к файлу...
O_o

Прикрепления: 8684462.jpg (3.3 Kb)


Устраняем баг при просмотре материала

Сообщение отредактировал WRC - Воскресенье, 06.12.2009, 06:07
  
Carbon_fiber
Дата: Четверг, 10.12.2009, 10:39 | Сообщение # 20
шептун
Группа: Проверенные
Пользователь №: 545
Сообщений: 94
Получено оценок: 4
WRC,
Code
<input type="file" style="border:1px dashed black;">

например так
а еще лучше поискать в гугле:
http://sdelaisait.com.ua/styling-input-type-file/
http://absolvo.ru/2009-04....hyu-css


мне пофиг что думают обо мне, мне важно что думаю я.
  
WildChild
Дата: Понедельник, 21.12.2009, 18:00 | Сообщение # 21
молчун
Группа: Проверенные
Пользователь №: 676
Сообщений: 31
Получено оценок: 2
Aleko, пасиб! ^_^

Чаке одобряэ!111
  
Nigelist
Дата: Среда, 20.01.2010, 12:15 | Сообщение # 22
говорун
Группа: Проверенные
Пользователь №: 192
Сообщений: 141
Получено оценок: 17
Aleko, а есть подобное унифицированное оформление для селектов?

Бороться и искать, найти и перепрятать...
  
Aleko
Дата: Среда, 20.01.2010, 12:27 | Сообщение # 23
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Nigelist, для селектов пока нет, а надо бы.

Бесплатные обои.
  
WRC
Дата: Четверг, 18.03.2010, 09:46 | Сообщение # 24
говорун
Группа: Проверенные
Пользователь №: 223
Сообщений: 149
Получено оценок: 11
Quote (Aleko)
<a href='#' class='button'><div>Кнопка</div></a>

"div" в "a" это получается ошибка по валидности...
думаю лучше использовать "b" или "i"...


Устраняем баг при просмотре материала
  
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.