Светлое ajax окно с эффектом кнопки на uCuz
 | |
| Безусловно ajax окно создавали под светлый дизайн с красивым обводом. Но это не все, так как у него красивый эффект кнопки отключить, что видите на изображение. Но и представлено по умолчанию окно, которое уже настроено, так как бывает, поставишь, а там то полосы то кнопка где то не там. Но все зависит от самого шаблона, и что закрыть кнопка, как все привыкли, здесь просто убрал. Просто иногда оно то на половину видна, то по обоим сторонам нет их. А в этом случай просто прописан стиль на синее кнопку, где вы самостоятельно можете сами изменить гамму цвета, и она красиво вписалась в основной дизайн. Но и обвод, который не стал закруглять, так как так стильно все выглядит и как можно заметить он еще в придачу идет прозрачный. Чтоб вам было понятно, то основные стили идут первые и через небольшой пробел идет уже самостоятельные. Которые убирают все полосы и остается чистое окно с кнопками. Вы можете их убрать по одному и смотреть как будет изменятся, если поставить как все идет, то получится такой вид, как представлен в материале. А так очень приятное по своей стилистике сделано и под светлый ресурс отлично проявляет себя, а точнее визуально стильно себя показывает. PS - Нажимаем кнопку скачать и потом копируем стили и прописываем в CSS сайта.  Так будет открываться, что на главной картинке, там показано с кнопкой на закрытие, что можно сравнить. Здесь нужно добавить, что самый первый стиль идет на кнопки, если их убрать, то просто останутся светлые, но и также можно их по гамме цвета редактировать. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 20 | |
Надпись, добавить комментарий в жирном шрифте, возможно кому то это важно, то этот эе стиль, только немного изменен по шрифту.
 Код /*--- 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;} | |
