Можно было бы, конечно, сверстать все используя лишь две иконки: ключа и пользователя. Но так как форма входа в адмику - это элемент не настолько массовый как сам сайт или админка, то я решил не заморачиваться.

Кстати, крестик в правом верхнем углу не закрывает форму, а сбрасывает значение полей.


Инструкция по применению:


1. Скачать архив imgs.zip [2,7 Kb] и его содержимое (2 картинки) загрузить в каталог: /engine/skins/images/

2. Открыть /engine/skins/default.skin.php, найти код: $skin_login = <<<HTML и удалить весь код идущий после, до: HTML;.

3. Вместо удаленного фрагмента вставить: (картинку и тайтл заменить на свои):

<!DOCTYPE html>
<html lang="ru">
<head>
	<title>Firstvector.org backoffice</title>
	<meta charset="{$config['charset']}" />
	<link rel="stylesheet" href="engine/skins/default.css?v=2">
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script>
		jQuery(document).ready(function($){
			if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
				$(window).load(function(){
					$('input:-webkit-autofill').each(function(){
						var text = $(this).val();
						var name = $(this).attr('name');
						$(this).after(this.outerHTML).remove();
						$('input[name=' + name + ']').val(text);
					});
				});
			}
		});
	</script>
</head>
<body>
	<div class="login">
		<div class="avatar">
			<img src="/templates/sbport/dleimages/noavatar.png" alt="Firstvector.org" />
		</div>
		<form name="login" action="" method="post">
			<input type="hidden" name="subaction" value="dologin" />
			<input type="reset" value="" />
			<div class="username">
				<input type="text" name="username" placeholder="Username" />
			</div>
			<div class="password">
				<input type="password" name="password" placeholder="Password" />
			</div>
			<div class="chckbox">
				<div class="slide">	
					<input type="checkbox" value="1" id="login_not_save" name="login_not_save" />
					<label for="login_not_save"></label>
				</div>
				<label for="login_not_save" class="label">Чужой компьютер?</label>
			</div>
			<input type="submit" value="Enter" />
			<div class="error">{result}</div>
		</form>
	</div>
</body>
</html>

4. Открыть /engine/skins/default.css и в конец файла добавить:

/* LOGIN */
.login {
	position:relative;
	top:200px;
	width:335px;
	height:250px;
	margin:0 auto;
	padding:10px 10px 0;
	background:url(./images/formbg.png) no-repeat;
}
.login input[type="reset"] {
	position:absolute;
	right:13px;
	top:11px;
	width:13px;
	height:13px;
	background:none;
	cursor:pointer;
}
.avatar {
	position:relative;
	width:65px;
	height:65px;
	margin:5px auto;
	overflow:hidden;
}
.avatar:after,
.avatar:before {
	content:"";
	position:absolute;
	z-index:2;
	top:3px;
	left:3px;
	right:3px;
	bottom:3px;
	-webkit-border-radius:50%;
	border-radius:50%;
	-webkit-box-shadow:0 0 3px 0 #ccc;
	box-shadow:0 0 3px 0 #ccc;
}
.avatar:after {
    z-index:1;
    -webkit-box-shadow:0 0 0 50px #fff;
	box-shadow:0 0 0 50px #fff;
}
.avatar img {
	display:block;
	min-width:65px;
	max-width:65px;
	min-height:65px;
	max-height:65px;
}
.login form {
	clear:both;
	width:218px;
	margin:20px auto 0;
}
.login input {
	border:none;
}
.login input:focus {
	outline:none;
}
.login input::-webkit-input-placeholder {
	color:#999;
}
.login input:-moz-placeholder {
	color:#999;
}
.login input[type="password"],
.login input[type="text"] {
	font-size:12px;
	font-family:Candara;
	color:#999;
	width:168px;
	height:30px;
	padding:0 10px 0 40px;
	background:url(./images/forminput.png) no-repeat;
}
.login input[type="password"]:focus,
.login input[type="text"]:focus {
	-webkit-box-shadow: 0 0 3px rgba(130,211,79,.6) inset, 0 0 2px #82d34f;
	box-shadow: 0 0 3px rgba(130,211,79,.6) inset, 0 0 2px #82d34f;
}
.login input[type="text"] {
	margin-bottom:12px;
}
.login input[type="text"]:focus {
	background-position:0 -60px;
}
.login input[type="password"] {
	background-position:0 -30px;
}
.login input[type="password"]:focus {
	background-position:0 -90px;
}
.chckbox {
	float:left;
	height:24px;
	margin:20px 0 8px 5px;
}
.label {
	float:left;
	height:20px;
	cursor:pointer;
	color:#999;
	margin:-1px 0 0 10px;
	font-size:11px;
	font-family:Candara;
	-moz-user-select:none;
	-khtml-user-select:none;
	user-select:none;
}
.chckbox label:hover {
	color:#222;
}
.slide {
	position:relative;
	float:left;
	width:40px;
	height:14px;
	background:#91bf73;
	-webkit-border-radius:50px;
	border-radius:50px;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.2);
	box-shadow:inset 0 1px 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.2);
}
.slide label {
	position:absolute;
	top:-1px;
	left:25px;
	display:block;
	width:16px;
	height:16px;
	-webkit-border-radius:50px;
	border-radius:50px;
	-webkit-transition:all .4s ease;
	-moz-transition:all .4s ease;
	-o-transition:all .4s ease;
	-ms-transition:all .4s ease;
	transition:all .4s ease;
	cursor:pointer;
	-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.7);
	box-shadow:0 0 2px 0 rgba(0,0,0,.7);
	background:#fcfff4;
	background:-webkit-linear-gradient(top,#fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
	background:-moz-linear-gradient(top,#fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
	background:-o-linear-gradient(top,#fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
	background:-ms-linear-gradient(top,#fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
	background:linear-gradient(top,#fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4',endColorstr='#b3bead',GradientType=0);
}
.slide input[type=checkbox]:checked + label {
	left:0;
}
.login input[type="submit"] {
	position:relative;
	float:right;
	height:20px;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	font-family:Candara;
	cursor:pointer;
	margin-top:15px;
	background:#ccc;
	-webkit-box-shadow:0 2px 0 1px #bcbcbc;
	box-shadow:0 2px 0 1px #bcbcbc;
	-webkit-border-radius:2px;
	border-radius:2px;
}
.login input[type="submit"]:hover {
	background:#8db96f;
	-webkit-box-shadow:0 2px 0 1px #80a269;
	box-shadow:0 2px 0 1px #80a269;
}
.login input[type="submit"]:focus {
	top:1px;
	background:#8db96f;
	-webkit-box-shadow:0 0 0 1px #80a269;
	box-shadow:0 0 0 1px #80a269;
}
.error {
	clear:both;
	font-size:11px;
	font-family:Candara;
	margin-left:3px;
}

Также, ко всему этому, прилагаю PSD макет: login.psd [829,91 Kb]

Пояснения некоторых фрагментов кода и техник:


Первое, что может броситься в глаза, это логотип со скругленными углами. Известно, что не все браузеры скругляют углы изображений, а если и скругляют, то зачастую неправильно. Чтобы сделать любую фотографию округленной можно использовать псевдоэлементы :after и :before.

Схема округления такая: к контейнеру с изображением применяються псевдоклассы :after и :before которые имеют border-radius:50% и box-shadow:0 0 0 50px #fff;. Таким образом у нас выходит квадрат, но с "вырезанной дырой", в которой и виднеется изображение.

Цвет тени - белый, соответственно и фон должен быть такого же цвета. Минус данного способа - градиентный фон.

Второе, о чем бы я хотел написать - это стилизация HTML5 атрибута placeholder. В CSS указан цвет текста плэйсходеров с помощью селекторов -webkit-input-placeholder и -moz-placeholder. Цвет текста один и тот же, а стили описаны дважды. Но ошибки тут нет, - так правильно. Важно помнить, что данные атрибуты нельзя указывать через запятую - браузер просто проигнорирует\не применит указанные стили.

Третье, что важно знать, - это код между тегов <script></script>. Назначение его - убрать желтую подсветку для полей с сохраненными значениями в браузерах на движке Webkit. Можно сделать и проще, полностью отказавшись от jQuery в данной форме. Для этого к полям type="text" и type="password" нужно применить атрибут autocomplete="off", но при этом следует учитывать что в этих полях не будут сохраняться данные и их придется вписывать при каждом использовании формы.

На этом все. Хорошо, если форма кому-то приглянулось. Ежели возникают вопросы - задавайте в комментариях.