С этого момента и далее в низком темпе можно начинать раскрывать некоторые подробности о Geeknet. Я представляю себе такое раскрытие в виде блоков, кусков, чанков даже информации, которые будут как-никак рассказывать о сути представляемого явления.
Первое явление — это форма входа в сам Geeknet, а точнее — это её стилистическое оформление.
Для начала мы продумаем и создадим структуру формы, используя возможности создания форм, представленных в языке разметки.
<form id="login-box">
<p class="title">#Geeknet</p>
<p>
<label>Имя пользователя:</label>
<input type="text" />
</p>
<p>
<label>Пароль:</label>
<input type="password" />
</p>
<p>
<input class="submit" type="submit" value="Продолжить" />
</p>
</form>
Начнём оформлять нашу форму с оформления всего документа.
body, html
{
padding: 70px 0px 0px 40px; /* небольшие отступы для выравнивания сверху и слева */
margin: 0px;
background: #ffffff; /* не забываем установить цвет фона страницы */
font-family: Verdana;
font-size: 0.9em; /* определяем общий уровень размера шрифта */
}
Теперь можно приступать к оформлению самих элементов формы.
#login-box
{
font-size: 1.5em;
width: 400px; /* устанавливаем ограничение для «скатывания» полей ввода */
margin: auto;
}
#login-box p.title
{
font-size: 2.5em;
color: #aaa;
/* данное свойство не поддерживается в некоторых браузерах,
но в тех, которые поддерживают, выглядеть это будет легче для глаза */
font-weight: lighter;
}
#login-box p label
{
float: left;
width: 220px;
padding: 0px 0px 4px 0px;
color: #444;
font-weight: lighter;
}
#login-box p input
{
border: solid 1px #ddd;
font-size: 1.4em;
font-style: italic;
color: #444;
}
/* Превращаем стилистически кнопку входа в обычный текст-ссылку
(пусть это противоречит некоторым правилам оформления документа,
но в данном случае у нас лишь одно действие и одна кнопка. */
#login-box p input.submit
{
cursor: pointer;
padding: 0px;
background: #fff;
border: none;
border-bottom: dashed 1px #555;
color: #555;
font-variant: small-caps;
}
В итоге у нас получается примерно следующего вида форма:
