» »

Форма входа и регистраций для uCoz

Форма входа и регистраций для uCoz

Это красивая кнопка входа для сайта, которая отвечает также за регистрацию.Что выполнена в двух оттенках цвета и подойдет на разную тематику. Вы можете сами в стилях изменить цвет если оттенок не подходит у вашему дизайн на сайте. Первая функция отвечает за вход на ресурс под своим логином, где при клике появится Ajax окно. Вторая функция будет отвечать за регистрацию, где при клике вы перейдете на эту страницу.

Также нужно заметить, что под все клики установлены иконки и есть эффект при наведение клика. Все очень просто сделано и что главное, здесь еще можно сам стиль изменить, так он сделан под 3D, который можно убрать и к примеру закруглить углы, здесь уже сами можете выставить как вы считаете нужным для стилистике. Но и как кто то пройдет регистрацию или зайдет как пользователь, форма просто исчезнет, что можно ее поставить под мини профиль.

Красивая форма входа на сайт

Ставим там где вам нужно:

Код
<?if($LOGIN_FORM$)?><div id="not-logged1">
<a href="javascript://" rel="nofollow" onclick="new _uWnd('LF', ' ', -250, -110, {autosize:1, closeonesc:1, resize:1 }, {url:'/index/40' } ); return false;">Войти</a>
<a href="/register">Зарегистрироваться</a>
</div><?endif?>

Таблица стилей CSS:

Код
#not-logged1 {
border-radius: 2px;
overflow: hidden;
background: #3498db;
line-height: 38px;
width: 272px;
margin-left: 723px;
margin-top: 20PX;
position: absolute;
}

#not-logged1 a {
  display: block;
  float: left;
  color: #fffdfd;
  text-shadow: 0 1px 0 rgba(56, 56, 56, 0.75);
  padding: 0 18px 0 38px;
  transition: background 0.3s;
}

#not-logged1 a:nth-child(1) {
  border-bottom: 3px solid #3584b9;
  background: url(http://zornet.ru/Aben/ABGEA/Rin/retunga/logged.png) no-repeat 9px;
}

#not-logged1 a:nth-child(2) {
  background: #4c4c44 url(http://zornet.ru/Aben/ABGEA/Rin/retunga/reg.png) no-repeat 9px;
  border-bottom: 3px solid #31312f;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
02.09.2017 Просмотров: 403 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 7
avatar
jvrris 09.09.2017 11:081
0
Не работает! Сделал все точно как тут написано, но нечего не вышло. В хроме и файрфоксе нечего не показывает. Мне кажется что то тут не доработатно либо есть ошибки.
ДимДимыч
ДимДимыч 09.09.2017 11:432
0
Что есть то есть. Я тоже установил и криво смотрится кнопочка и очень разочарован стал :(. Но на этом не остановился и исправил эту проблему.

Код
#not-logged1 {border-radius: 2px; overflow: hidden; background: #3498db; line-height: 38px; width: 100%;}  
#not-logged1 a { display: block; color: #fffdfd; text-shadow: 0 1px 0 rgba(56, 56, 56, 0.75); padding: 0 18px 0 38px; transition: background 0.3s; }
#not-logged1 a:nth-child(1) {width: 30%; border-bottom: 3px solid #3584b9; background: url(http://zornet.ru/Aben/ABGEA/Rin/retunga/logged.png) no-repeat 9px; float: left; }
#not-logged1 a:nth-child(2) { width: 70%; float: right; background: #4c4c44 url(http://zornet.ru/Aben/ABGEA/Rin/retunga/reg.png) no-repeat 9px; border-bottom: 3px solid #31312f; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75); border-top-left-radius: 3px; border-bottom-left-radius: 3px; }


Настроил код и теперь он не просто рабочий но и резиновый что отлично будет смотреться под любой размер окна браузера.
ДимДимыч
ДимДимыч 09.09.2017 11:563
0
Вот можно ещё так оформить эту кнопочку и будет смотреться не хуже .



Вот стили которые я немного подправил. Сам код не нужно менять просто стили заменить и всё.

Код
#not-logged1 {overflow: hidden; background: #3498db; line-height: 38px; width: 100%; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); border-bottom: solid #ccc; margin-bottom: 15px; border-radius: 50px;}  
#not-logged1 a {display: block; color: #fffdfd; text-shadow: 0 1px 0 rgba(56, 56, 56, 0.75); padding: 0 18px 0 38px; transition: background 0.3s;}
#not-logged1 a:nth-child(1) {width: 30%; background: url(http://zornet.ru/Aben/ABGEA/Rin/retunga/logged.png) no-repeat 9px; float: left;}
#not-logged1 a:nth-child(2) {width: 70%; float: right; background: #4c4c44 url(http://zornet.ru/Aben/ABGEA/Rin/retunga/reg.png) no-repeat 9px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75); border-radius: 50px 0 0 50px; padding: 0 0 0 37px;}
Kosten
Kosten 09.09.2017 15:464
0
ДимДимыч, такой дизайн кнопки более оригинален. А что криво, то здесь не знаю, так как все скрины с тестового сайта.
ДимДимыч
ДимДимыч 09.09.2017 15:475
0
Утверждать не буду. Я установил у меня криво вот и кинул код а там нужно не нужно можешь удалить.
Kosten
Kosten 09.09.2017 16:157
0
Зачем удалять, я про это, что на одном сайте почему то все корректно показывает, на другом почему то уже не так выводит.
avatar
jvrris 09.09.2017 15:576
0
Спасибо! Теперь все работает! Но было бы лучшее если после входа на сайте, появлялись кнопки типа выход и профиль.
avatar