Зачастую стандартный вид кнопочек не может сочетаться с концепцией дизайна, которую придумал дизайнер, поэтому он рисует свои кнопочки.
Что обычно делает верстальщик при виде такой кнопки? Правильно, просто напросто, вырезает ее как есть, и вставляет ее в верстку как картинку.
Например:
Вроде бы все просто, но тогда верстальщику придется под каждую форму или ссылку вырезать новую картинку, тем самым плодя кучу картинок и тратя драгоценное время.
Я предлагаю следующий подход к этому делу (может кто-то уже придумал такой способ, но я сразу отмажусь, сказав, что я его еще не видел).
Для этого нам потребуется:
Собственно вот HTML:
CSS:
Посмотреть в деле можно тут.
Все это дело тестировалось под IE6/7/8, Opera 9.62, Firefox 3.0.8, Chrome 1.0.154.53
Однако под IE8 возникает баг при нажатии на
P.S. Прошу сжалится надо мной и не ругать сильно, этой мой первый пост.
P.P.S. Перенес в тематический блог
Что обычно делает верстальщик при виде такой кнопки? Правильно, просто напросто, вырезает ее как есть, и вставляет ее в верстку как картинку.
Например:
<a href="some_page.html"><img src="button.gif" alt="Button"></a>
<input type="image" src="button.gif" alt="Button">
* This source code was highlighted with Source Code Highlighter.
Вроде бы все просто, но тогда верстальщику придется под каждую форму или ссылку вырезать новую картинку, тем самым плодя кучу картинок и тратя драгоценное время.
Я предлагаю следующий подход к этому делу (может кто-то уже придумал такой способ, но я сразу отмажусь, сказав, что я его еще не видел).
Для этого нам потребуется:
- csshover2.htc и conditional comments, чтобы научить IE6 понимать CSS-конструкции типа: div.button:hover
- Две картинки(1, 2) для CSS Sprites
- HTML + CSS
- Пара минут
Собственно вот HTML:
<span class="button"><a href="#">Button</a></span>
<!--или-->
<span class="button" onClick="alert(1);"><b>Button</b></span>
<!--или-->
<p><span class="button"><input type="button" value="Button"></span></p>
<!--или-->
<span class="button"><a href="#"><img src="i-article.gif" alt="">Button</a></span>
* This source code was highlighted with Source Code Highlighter.
CSS:
<!--[if lte IE 6]>
<style type="text/css">
body {
behavior:url("csshover2.htc");
font-size:16px;
}
</style>
<![endif]-->
<style type="text/css">
.button {
display:inline-block;
line-height:22px;
padding:0 11px 0 0;
background:url(bg-button-r.gif) right 0 no-repeat;
cursor:pointer;
}
.button a, .button b, .button input {
display:inline-block;
padding:0 0 0 11px;
font-family:Arial;
font-size:13px;
font-weight:normal;
color:#000;
text-decoration:none;
outline:none;
background:url(bg-button-l.gif) 0 0 no-repeat;
border:none;
cursor:pointer;
}
.button input {
height:22px;
}
.button img {
vertical-align:middle;
border:none;
}
.button:hover {
background-position:100% -22px;
}
.button:hover a, .button:hover b, .button:hover input {
background-position:0 -22px;
margin:0;
padding:0 0 0 11px;
}
.button:active {
background-position:100% -44px;
}
.button:active a, .button:active b, .button:active input {
background-position:0 -44px;
}
</style>
* This source code was highlighted with Source Code Highlighter.
Посмотреть в деле можно тут.
Все это дело тестировалось под IE6/7/8, Opera 9.62, Firefox 3.0.8, Chrome 1.0.154.53
Однако под IE8 возникает баг при нажатии на
<span class="button"><input type="button" value="button"></span>, пока что я его не победил.
P.S. Прошу сжалится надо мной и не ругать сильно, этой мой первый пост.
P.P.S. Перенес в тематический блог