» »

Форма входа ucoz темно прозрачна


Сейчас очень редко встретишь мини профили на сайте, все больше становиться оригинальная по своим стилям формы, что хочется вам и представить. Думаю она вам знакома, как пользователям, там идет Avarat, потом выход с тесурса и персональная страница с личными сообщениями. Вообщем то, что нужно для интернет ресурса. Но когда вы гость или просто не зашли под своим логином, то вы видите совершенно другую картину. При наведение, то начинается светиться, что на темном фоне красиво, слили я подогнал светлые, чтоб как то можно было лучше видеть.

В низ сайта:

Код
<style type="text/css">  
  .uPanel{background:rgba(0,0,0,0.8);color:#fff;float:left;box-shadow: 0 2px 7px ;  
  rgba(0, 0, 0, 0.7);-moz-box-shadow: 0 2px 7px rgba(255, 255, 255, 0.78);-webkit-box-shadow: 0 2px 7px rgba(255, 255, 255, 0.7);padding: 4px 5px 4px 5px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;position:fixed;bottom:7px;left:7px;}  
  .uPanel a.url,.uPanel a.url:visited{display:block;float:left;color:#fff;font-  
  weight:bold;height:26px;line-height:26px;-moz-transition:all 0.4s ease;-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease;opacity:0.4;padding:0px 7px 0px 7px;position:relative;}  
  .uPanel a.url img{vertical-align:-8px;}  
  .uPanel a.url:hover{text-shadow:0px 0px 5px #fff;color:#fff;opacity:1.0;}  
  .uPanel a.url.highlighted{opacity:1.0;}  
  a.button{display:block;float:left;padding:6px 9px 6px 9px;margin:2px;color:#fff;font-weight:bold;background:url('http://zornet.ru/CSS-ZORNET/gerav/avtorizachii_dli_ucoz.png') #4E4E4E;background-position:100% 0px;border:1px solid #2D2D2D;border-radius:3px;-moz-border-radius:3px;box-shadow:0px 0px 1px #fff inset;-moz-box-shadow:0px 0px 1px #fff inset;text-shadow:0px -1px 0px #000}  
  a.button:hover{border:1px solid #815500;color:#fff;background-position:100% -28px;text-shadow:0px -1px 0px #815500}  
  a.button:active{border:1px solid #815500;color:#fff;background-position:100% -28px;box-shadow:0px 0px 5px #000 inset;-moz-box-shadow:0px 0px 5px #000 inset;text-shadow:0px -1px 0px #815500}  
  .uPanel a.url span  
  {display:block;position:absolute;bottom:0px;left:20px;color:#fff;background:red;padding:0px 3px 0px 3px;height:14px;line-height:14px;font-size:7pt;font-weight:bold;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;}  
  </style>  

  <?if($USER_LOGGED_IN$)?><div class="uPanel" id="uPanel" style="display:none">  
  <?if($USER_AVATAR_URL$)?> <a href="$PROFILE_URL$" title="Вошли как $USERNAME$" class="url"><img src="$USER_AVATAR_URL$" style="width:24px; height:24px;" alt="" /></a> <?else?><a href="$PROFILE_URL$" title="Вошли как $USERNAME$" class="url"><img src="http://zornet.ru/CSS-ZORNET/gerav/no-ava-cs.png" style="width:24px; height:24px;" alt="" /> </a><?endif?>  
  <a href="/index/14" title="Личные сообщения" class="url"><img src="http://zornet.ru/CSS-ZORNET/gerav/pm.png" alt="" /></a>  
  <a href="/index/8" target="_blank" title="Персональная страница" class="url"><img  
src="http://zornet.ru/CSS-ZORNET/gerav/wind-color.png" alt="" /></a>  
  <a href="/index/10" title="Выход" class="url"><img src="http://zornet.ru/CSS-ZORNET/gerav/exit.png" alt="" /></a>  
  </div><?else?> <div class="uPanel">  
  <a href="javascript://" rel="nofollow" onclick="new _uWnd('LF',' ',-250,-110,{autosize:0,closeonesc:1,resize:1},{url:'/index/40'});return false;" onclick="showLogForm(); return false;" class="url" style="margin-top:-2px;"><img align="absmiddle" title="Авторизация" src="http://zornet.ru/CSS-ZORNET/gerav/283522690.png"> <b>Войти на сайт</b></a>  
  </div> <?endif?>  
   
  <script>$("#uPanel").fadeIn('normal');$("#uPanel a.url").tipsy({gravity: 'sw',  
  html: true});</script>


19.03.2015 Просмотров: 740 Комментарий: (19)

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

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

Комментарий: 19
First
First 20.03.2015 00:191
0
Прикольная панелька. Могу предложить ешё оду красивую с сайта diz-cs. Не знаю, может она и есть в инет, я не встречал ( но это не значит что нет)))), по этому рипал сам. Не много подправил её. вот скрин :
А на панельке на сайте diz-cs просматривается ещё одна кнопка в верх ( не понимаю зачем их две, да и не красиво как при прокрутке вторая проглядывается) присмотревшись можно увидеть на скрине
в панельке кнопки: профиль, сообщения, к-во не прочитанных, выход и кнопка в верх. Сайт в хедере панельки не видно, появляется при прокрутки.
Kosten
Kosten 20.03.2015 00:262
0
First, так ты ее рипнул? Если да, то залей плиз, описание напишу сам.
Kosten
Kosten 20.03.2015 00:273
0
Как понимаю функций одни и те же, дизайн оригинален.
Kosten
Kosten 20.03.2015 00:284
0
А кнопка вверх, тоже можно по пути захватить)
First
First 20.03.2015 00:305
0
Kosten, я её рипнул и она полностью рабочая. Но я скину код с ссылками на картинки и скрипт на diz-cs, а ты думаю от туда их сам заберешь. Я её для теста ставил с теми ссылками.
First
First 20.03.2015 00:356
0
Kosten, так кнопка вверх там есть самой панельке, и до авторизации с пальцем. Или ты с пальцем хочешь отдельно?
Kosten
Kosten 20.03.2015 00:367
0
First, дай плиз ссылку, где забрать.
First
First 20.03.2015 00:448
0
Kosten, в архиве код и скрипт, в стилях ссылки на картинки, заберешь их с diz-cs
My WebPage
First
First 20.03.2015 00:469
0
Kosten, отличается стилем и тем что показывает количество не прочитаных сообщений, что спокойно может заменить оповещения о личных сообщениях
Kosten
Kosten 20.03.2015 01:1410
0
First, шикарно, думаю многие поблагодарят, но кроме админа diz-cs )
1 2 »
avatar