Темная Форма входа

@GimaS · Регистрация: 11.05.2011

Студворк — интернет-сервис помощи студентам

Помогите, мне хотелось бы увидеть такую форму входа как на скриншоте, но так как я не понимаю css, то не могу сделать темные поля ввода. Как можно сделать точно такие же поля?

мой сайт

http://g-c-k.net.ru/

На моем сайте форма входа справа сделана.

Вот код самой формы:

Code
1
2
3
4
5
6
7
8
9
10
11
<?if($PAGE_ID$="login")?><div style="width:180px;"><?endif?>
<table border="0" cellspacing="1" cellpadding="0" width="100%">
<?if($ERROR$)?><td colspan="2" style="color:red;text-align:center;">$ERROR$</td><?endif?>
<tr><td width="20%" nowrap="nowrap">Логин:</td><td><input class="loginField" type="text" name="user" value="" size="20" style="width:100%;" maxlength="50"/></td></tr>
<tr><td>Пароль:</td><td><input class="loginField" type="password" name="password" size="20" style="width:100%" maxlength="15"/>
</td></tr>
</table>
<table border="0" cellspacing="1" cellpadding="0" width="100%">
<tr><td nowrap style='font-size:11px;'><a href="$REMINDER_LINK$">Забыл пароль</a> | <a href="$REGISTER_LINK$">Регистрация</a><?if($PAGE_ID$="login" && $HIDDEN_ALLOWED$)?><br/><input id="hid$PAGE_ID$" type="checkbox" name="hidden" value="1" /><label for="hid$PAGE_ID$">скрытый</label><?endif?></td><td align="right" valign="top"><input class="loginButton" name="sbm" type="image" src="/images/vxod/vxod.png" value="Вход"/></td></tr>
</table>
<?if($PAGE_ID$="login")?></div><?endif?>

@acupation · 11.05.2011, 13:15

HTML5
1
2
3
4
5
  <style type="text/css">
   .loginField{
    background: #000000; /* Цвет фона */
   }
  </style>

@GimaS · 11.05.2011, 13:50 **[ТС]**

Спасибо хоть и на этом, но получается далеко не так(На скрине показано). Мне бы хотелось точно такие же поля как на придедущем скриншоте. Ну или просто похожие

@acupation · 11.05.2011, 14:28

Добавь в css

CSS
1
2
border: none; /* нет бордюра */
  border-color: transparent;

забыл еще

CSS
1
text: #FFFFFF; /* цвет текста */

Добавлено через 35 минут
Попробуй так, должно быть похоже:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
.loginField {
color: #B9BDBF;
font-size: 14px;
width: 200px;
height: 32px;
line-height: 24px;
padding: 4px 5px 4px 8px;
background: url(/images/search_bg.png) no-repeat;
margin-right: 5px;
border: none;
}
</style>

@GimaS · 11.05.2011, 14:36 **[ТС]**

Можешь поподробней написать, как в css написать твой код? HTML код вставил,но там баги появляются

@acupation · 11.05.2011, 14:37

подожди 5 минут, я щас сделаю как на картинке)

@GimaS · 11.05.2011, 14:37 **[ТС]**

Ок, жду=)

@acupation · 11.05.2011, 14:42

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
.loginField {
color: #B9BDBF;
font-size: 14px;
height: 26px;
line-height: 24px;
padding: 4px 5px 4px 8px;
background: #202328;
margin-right: 5px;
border: none;
}
</style>

попробуй. Я гляну на сайте.

@GimaS · 11.05.2011, 14:45 **[ТС]**

О спс, так как я хотел.

Добавлено через 1 минуту
Правда, поля немного за дизайн залазят. Но я думаю отступом их поправить можно

@acupation · 11.05.2011, 14:46

у тебя немного вылезают края инпута за рамку. Нужно немного уменьшить. Добавь в этот код

HTML5
1
width: 150px;

где 150px - это ширина, изменяй ее до тех пор пока не понравица)
так же:
font-size: 14px - размер шрифта.
height: 26px - высота инпута.

Можешь сам подрегулировать.

@GimaS · 11.05.2011, 14:54 **[ТС]**

Спасибо за помощь!

@RosenR@t · 11.05.2011, 15:12

GimaS, а как вы меню такое верхнее сделали не расскажете?! Или это cms-ка какая то?!

@GimaS · 11.05.2011, 15:27 **[ТС]**

Это не мой шаблон, его рипали с сайта

сайт

http://themeforest.net/item/chromegt-business-portfolio-html-theme/full_screen_preview/147740

Автор рипа тут

сайт

http://mvcreative.ru/

@Alorian · 11.05.2011, 16:00

Сообщение от RosenR@t

GimaS, а как вы меню такое верхнее сделали не расскажете?! Или это cms-ка какая то?!

Если очень интересно, то можно исходный код посмотреть.
Глянул несколько минут, в целом технология понятна:
1. После загрузки страницы создается еще один <li> у меню.
2. Отменяется синий фон у активного пункта меню
3. Синий фон присваивается добавленному <li>
4. Добавленный <li> перемещается поверх активного пункта меню, ширина его становится такая же как у активного пункта меню.
5. На событие "наведение мыши" добавленный ли перемещается поверх того пункта меню на который навели мышь.

И т.д. Детально не вникал, так что алгоритм может отличаться.
Подробнее можно посмотреть в файле /js/js.js начало на строке 196
Написано с помощью jquery

15.10.2011, 09:49

привет. вот ты ему делал шаблон, можешь кинуть готовое все, а то чет у меня за поля выходит и все и место ввода ни че не отоброжается !! (( плиииз

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@GimaS 1 / 1 / 0 Регистрация: 11.05.2011 Сообщений: 13
	11.05.2011, 13:50 [ТС]
	Спасибо хоть и на этом, но получается далеко не так(На скрине показано). Мне бы хотелось точно такие же поля как на придедущем скриншоте. Ну или просто похожие Изображения 0

@GimaS 1 / 1 / 0 Регистрация: 11.05.2011 Сообщений: 13
	11.05.2011, 14:36 [ТС]
	Можешь поподробней написать, как в css написать твой код? HTML код вставил,но там баги появляются 0

@acupation 67 / 67 / 6 Регистрация: 26.03.2010 Сообщений: 546
	11.05.2011, 14:37
	подожди 5 минут, я щас сделаю как на картинке) 1

@GimaS 1 / 1 / 0 Регистрация: 11.05.2011 Сообщений: 13
	11.05.2011, 14:37 [ТС]
	Ок, жду=) 0

@GimaS 1 / 1 / 0 Регистрация: 11.05.2011 Сообщений: 13
	11.05.2011, 14:45 [ТС]
	О спс, так как я хотел. Добавлено через 1 минуту Правда, поля немного за дизайн залазят. Но я думаю отступом их поправить можно 0

@GimaS 1 / 1 / 0 Регистрация: 11.05.2011 Сообщений: 13
	11.05.2011, 14:54 [ТС]
	Спасибо за помощь! 0

@RosenR@t 136 / 136 / 7 Регистрация: 07.07.2010 Сообщений: 774
	11.05.2011, 15:12
	GimaS, а как вы меню такое верхнее сделали не расскажете?! Или это cms-ка какая то?! 0

@GimaS 1 / 1 / 0 Регистрация: 11.05.2011 Сообщений: 13
	11.05.2011, 15:27 [ТС]
	Это не мой шаблон, его рипали с сайта сайт http://themeforest.net/item/chromegt-business-portfolio-html-theme/full_screen_preview/147740 Автор рипа тут сайт http://mvcreative.ru/ 0

Resorr
	15.10.2011, 09:49
	привет. вот ты ему делал шаблон, можешь кинуть готовое все, а то чет у меня за поля выходит и все и место ввода ни че не отоброжается !! (( плиииз