Създаване на Web 2.0 бутони

CSS и HTML » HTML

acidmartin   трудност:    видян: 16766

В този урок ще се опитам да обясня принципа за създаване на семантични кросбраузър бутончета с валиден xhtml, произволна ширина и заоблени краища.

Страницата, откъдето можете да изтеглите кода е: http://acidmartin.wemakesites.net/?pageId=Web20Buttons
Демо: http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=45

В папката Web20Button/Skins/[SkinName]/Button.css се намират дефинициите за всеки скин, и както ще забележите, в архива, който сте изтеглили има 4 готови скина. Бих се радвал, ако ми изпратите и ваши дизайни.

За да можем да направим бутончетата едновременно разтегателни и със заоблени краища, използваме следния html код - <a> с два вложени <span>-a, като най-вътрешния <span> съдържа и текста на бутона:

<a href="http://uroci.net/#" class="Web20Button default" title="Web 2.0 Button">
<span class="OuterSpan">
<span class="InnerSpan">Web 2.0 Button</span>
</span>
</a>

Ето и по-важните CSS сетинги на нашия бутон:


a.Web20Button.default {
background: url('Button/LeftNormal.gif') no-repeat left top;
font: bold 14px "Trebuchet MS", Verdana, Arial, Sans-serif;
padding-left: 7px;
text-decoration: none;
color: #677788;
display: block;
width: auto;
float: left;
outline: none; /* remove the link focus in Gecko browsers */
}


a.Web20Button.default span.OuterSpan {
background: url('Button/RightNormal.gif') no-repeat top right;
display: block;
}

a.Web20Button.default span.InnerSpan {
background: url('Button/CenterNormal.gif') repeat-x top;
line-height: 26px;
display: block;
margin-right: 7px;
padding: 0 10px;
}

Двата <span> елемента са с display: block;, за да могат да обхванат 100% от техния родител - <a>, което освен display: block има и float: left; width: auto - с цел да се разтегне според съдържанието в него.

В момента се сещам за няколко въпроса, които биха възникнали, а именно:

1. Защо ползваме двойни класове за <a>-тага?
Отговор: За да можем при желание на една страница да имаме повече от един дизайн на бутончетата. Web20Button дефинира един основен клас, а втория носи името на скина, който искаме да ползваме.

2. Мога ли да ползвам този тип бутон като submit или reset бутон?
Отговор: Да, може с JavaScript:

"submit" бутон:

<a href="javascript: document.forms[0].submit();" class="Web20Button default" title="Web 2.0 Button">
<span class="OuterSpan">
<span class="InnerSpan">Submit Form</span>
</span>
</a>

"reset" бутон:

<a href="javascript: document.forms[0].reset();" class="Web20Button default" title="Web 2.0 Button">
<span class="OuterSpan">
<span class="InnerSpan">Reset Form</span>
</span>
</a>

бутон с JavaScript функция:

<a href="javascript: functionName();" class="Web20Button default" title="Fire Some JavaScript Code">
<span class="OuterSpan">
<span class="InnerSpan">Fire Some JavaScript Code</span>
</span>
</a>


3. Защо не ползваш блоков <div>-елемент вместо инлайн <span>, който сетваш на display: block;
Отговор: Защото родителския елемент, т.е. <a>-тага е инлайн, а е забранено влагането на блокови в инлайн елементи.

Надявам се урока да е бил полезен!

Мартин Иванов
http://acidmartin.wemakesites.net/