» »

Светлое ajax окно с эффектом кнопки на uCuz


Светлое ajax окно с эффектом кнопки на uCuz

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

Но и обвод, который не стал закруглять, так как так стильно все выглядит и как можно заметить он еще в придачу идет прозрачный. Чтоб вам было понятно, то основные стили идут первые и через небольшой пробел идет уже самостоятельные. Которые убирают все полосы и остается чистое окно с кнопками. Вы можете их убрать по одному и смотреть как будет изменятся, если поставить как все идет, то получится такой вид, как представлен в материале. А так очень приятное по своей стилистике сделано и под светлый ресурс отлично проявляет себя, а точнее визуально стильно себя показывает.

PS - Нажимаем кнопку скачать и потом копируем стили и прописываем в CSS сайта.

ajax окно для сайта

Так будет открываться, что на главной картинке, там показано с кнопкой на закрытие, что можно сравнить.
Здесь нужно добавить, что самый первый стиль идет на кнопки, если их убрать, то просто останутся светлые, но и также можно их по гамме цвета редактировать.
27.10.2016 Загрузок: 10 Просмотров: 435 Комментарий: (9)

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

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

Комментарий: 9
Сопрано
Сопрано 27.10.2016 02:001
0
Это окно что то в первые вижу, хотя выбирал и искал, здесь как раз также светлое. Но главное чтоб всяких косяков не было, то ставишь на чистый шаблон и еще даже окно не поставил, а системное, которое идет, не темное, там тоже не все гладко. И вот уже идет с изъянами, какие то стили нужно добавлять, мне на U вопросе дали стиль и все нормально. Только на форум вышел, подарок подарить, так сразу скролл не откуда появился. Теперь понятно. что не у одного у меня такое, а это системное, и и от окна тоже думаю не мало будет зависеть его внешность видимости.
Kosten
Kosten 27.10.2016 02:082
0
У меня 2 тестовых сайта, но не чего на них не ставлю, проверяю и опять шаблон выставляю. И что, вот кнопка "Отправить" на одном все корректно показывает, на втором просто по сторонам как будто срезало. А это системный код и нужно какие то стили прописывать, так не настроишь. И здесь как раз кнопка своя будет как нужно.
Сопрано
Сопрано 27.10.2016 02:133
0
Здесь понятно, что нужно самому доводить, сейчас поставил, хорошо когда в одном файле находиться и не чего искать не нужно, показывает нормально. и главное интересно, нет такой широкой синей полосы при написание, а здесь все аккуратно сделано.
tsakonter
tsakonter 27.10.2016 02:364
0
Нормально, то что сказать нужно было, так как всяким таким небольшим ошибкам уделяю много времени. И этот подойдет как не когда на светлый дизайн, думаю можно сделать его немного темнее, чтоб где само окно для прописи, было ясно видно, и чтоб светлым было.
ucozmental
ucozmental 27.10.2016 03:065
0
Вот ему бы углы на 3 - 5 пикселей закруглить, как самому светлому оттенку, это корпус и что идет прозрачным. И кнопку круглую убрать, интересно, здесь и эффект нужно будет менять, а он только круглый возможно идет. Хотя на стилях разным можно выставить.
Kosten
Kosten 27.10.2016 16:096
0
Надпись, добавить комментарий в жирном шрифте, возможно кому то это важно, то этот эе стиль, только немного изменен по шрифту.



Код
/*--- Ajax окна V.1.0. ---*/  
  .xw-plain, .xw-resize, .xw-active {color: #D0D0D0;padding:0;position:absolute;background-color:none;border-radius:0.5px;box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.19);border-radius: 1px;}  
  .xw-hdr {text-align: left !important;white-space: nowrap !important;padding: 1px 0 0 0 !important;white-space: nowrap !important;zoom: 1 !important;height: 35px !important;}  
  .xw-hdr-text {vertical-align: 3px!important;cursor: default!important;color: #565656 !important;line-height: 30px!important;font: bold 12px/35px Verdana, Geneva, sans-serif !important;}  
  .xw-sps, .xw-tc, .xw-tr{border-bottom:1px solid #eee;color:#000 !important;font-size:1.2em !important}  
  .xt-close {background-position: 0 0 !important;}  
  .xt-close {position:absolute;right: 5px !important;top: 4px !important;margin:0 !important;padding:0 !important;width:26px !important;height:26px !important;background-color:none!important;background-image:url('http://zornet.ru/Ajaxoskrip/Aster/86231504.png') !important;background-repeat:no-repeat !important;border:none !important;border-radius:20px !important;transition:all 0.5s ease !important;-moz-transition:all 0.5s ease !important;-webkit-transition:all 0.5s ease !important}  
  .xt-close-over{box-shadow:0px 0px 2px 5px rgba(0,0,0,0.20) !important;-moz-box-shadow:0px 0px 2px 5px rgba(0,0,0,0.20) !important;-webkit-box-shadow:0px 0px 2px 5px rgba(0,0,0,0.20)!important}  
  .xw-bc, .xw-mr, .xw-bl, .xw-br, .xw-ml, .xw-mc{background:#fff !important;border:0 !important;border-radius:0px;moz-border-radius:0px;webkit-border-radius:3px;}  
  .xw-body{border:0 !important;padding-left:7px !important;padding-right:1px !important;}  
  .xw-tc {border-bottom: 1px solid #EEE !important;}  
  .xw-tl, .xw-tr, .xw-tc {background: white !important;}  
  .xw-sps {display:none !important;}
Сопрано
Сопрано 27.10.2016 17:127
0
Главное чтоб показывало нормально, но это все можно настроить, хотя не какой важности надпись не несет.
Сопрано
Сопрано 27.10.2016 17:138
0
У меня на всех почти функциях показывает все отлично, кроме форума, там скрол нижний идет.
Kosten
Kosten 27.10.2016 18:359
0
Вот как раз здесь и нужны стили, чтоб выставить и запретить показывать.
avatar