Стылізаваныя віджэты формаў

“З вялікай уладай прыходзіць вялікая адказнасць.” Так сказаў Бог W3C, калі яны перадаюцца чалавеку дарунак CSS 1. Шмат добрага было зроблена з гэтым выгодай з нябёсаў. Утрыманне і стыль – адзін раз заблыталіся, як карані мангравых – былі расколаты напалову. Кодэкс асвятлялі, CSS файлы кэшуюцца і свету спусціліся на зямлю. Але некаторыя, дурное мала, здзекаваліся і скляў за свае вэб-старонкі, крычучы: “Хай нашы бланкі здзіўлена і агідна!”

Я не паказваючы пальцамі тут, але нават формы, звычайна не самая прыгожая частка вэб-сайта часам трэба паддавацца спакусе для іх стыль, для выгоды дзеля ў.

Форма элементаў прыйшоў з глыбіні вашай аперацыйнай сістэмы, яны першаснага рэчыва вэб-старонак, і ёсць чыннік, чаму яны выглядаюць, як яны. Кнопкі і тэкставыя палі класічна глядзець 3D, таму што яны прызначаны для ўзаемадзейнічалі з. Тактыльных лічаць, што канічныя дадае элемент дае карыстачу намёкі на іх функцыянальнасці. Калі форма кнопка выглядае як яна можа быць націснута, то яна павінна быць націснута. Гэта тое, што Дональд Норман было б назваць “успрыманую даступнасць“. Калі вы прымаеце, што affordance прочкі, карыстачы не змогуць усвядоміць, як яны ўзаемадзейнічаюць з элемента ці заняць больш часу для гэтага.

Так навошта даваць элемент формы адзінай адзін піксель мяжу і зрабіць гэта проста выглядае скрынка са слова ў ёй, я не думаю, што мінімальныя эстэтычныя паляпшэнні, зробленыя дызайн элементаў формы, такім чынам перавешвае той факт, што такія змены прымяншае выгода формы – выраб карыстачам, не знаёмым з тым, што рабіць і як узаемадзейнічаць з вэб-старонкі. Нават калі гэта здымае суму выбару з дызайнерам, я думаю, што рашэнне OSX / Safari дызайнераў ігнараваць амаль усё стыль CSS формы кнопкі з’яўляецца абгрунтаванай. Карыстач сканчаецца паслядоўнай, прыгожы інтэрфейс, – і хто будзе рабіць Aqua кнопкі выглядаць лепш у любым выпадку?

Я бачыў толькі адзін асобнік дызайн элементаў формы, дзе я падумаў: “Так, гэта сапраўды крок наперад у параўнанні змаўчанню вонкавы выгляд”. Сайт Macromedia функцыі формы з добра стылі кнопкі [ Скрыншот ], хоць я не ўпэўнены, пра іх беднымі тэкставых палёў. Кнопкі захаваць іх “клікабельності” з 3D лічаць, што выкарыстоўвае розныя межы CSS-тыпу і просты градыент GIF. Не вар’ят афарбоўкі, проста тонкія сігналы, каб яго affordance. Стыляў выглядае наступным чынам:

input.submit

{

border: 3px double #999999;

border-top-color: #CCCCCC;

border-left-color: #CCCCCC;

padding: 0.25em;

background-color: #FFFFFF;

background-image: url(http://www.macromedia.com/ …

background-repeat: repeat-x;

color: #333333;

font-size: 75%;

font-weight: bold;

font-family: Verdana, Helvetica, Arial, sans-serif;

}

Прыклад:

Ён нават выглядае звычайна, калі вы не жадаеце выкарыстоўваць малюнак:

… ці калі вы жадаеце, каб колер яго:

Выпрабавана ў Win 98: IE 6, Firefox 0.8, Опера 7,23.

Афарбоўванне лепш за ўсё працуе, калі вы выкарыстоўваеце светлы колер базы, таму што няма ніякага спосабу пазбавіцца ад белай прасторы паміж імі вонкавыя і ўнутраныя лініі падвойнай мяжы (у IE і опера). Верхняй і левай меж, павінны быць святлей, чым ніжняй і правай меж у мэтах стварэння тактыльнай, 3D эфект.

Паказваючы стыль для кнопкі элемента, вы можаце выдаліць кнопку зваротнай сувязі па змаўчанні ў некаторых браўзарах (у прыватнасці, Firefox, а не IE). Каб аднавіць з’яўленне націску кнопкі, вызначыць стылі, выкарыстоўваючы псеўда-клас CSS: актыўным. Лепш за ўсё гэтага можна зрабіць толькі шляхам звароту назад межы кветак, хоць вы маглі б зрабіць які-небудзь іншы эфект, CSS, што вы жадаеце:

input.submit:active

{

border: 3px double #CCCCCC;

border-top-color: #999999;

border-left-color: #999999;

}

Прыклад:

Ці выкарыстоўваеце вы Macromedia стыляў ці няма, зрабіць яго лёгкім для карыстача, каб вырашыць, што яны могуць націснуць на, і ў напрамілы бог, не выкарыстоўвайце чырвоны тэкставых палёў!