Как создать красивые ajax окна uCoz
Опубликовано 22-02-2013, 15:49 в разделе Ajax для Юкоз
На примере нижеописанных вариантах кода, рассмотрим как создать красивые окна ajax для сайтов на uCoz, с различной стильной обводкой. Подобные окна смотрятся на сайте просто шикарно. Установка достаточно проста и не займет много времени.
За счет эталона можно взять любой из пяти вариантов стилей представленных ниже. Если нужной цветовой гаммы, наиболее подходящей для Вашего проекта, среди них не оказалось, аналогично примерам можно задать любой цветовой код. Все достаточно просто даже при самых начальных знаниях в веб-дизайне.
1. Зеленая рамка ajax окна:
/* AJAX ОКНО v.2.0============================================================================*/.x-sh .xstl{padding-top:6px; background:none!important;}.x-sh .xsml{background:none!important;}.x-sh .xstr{padding-top:6px; background:none!important;}.x-sh .xsmr{background:none!important;}.x-sh .xsbl{padding-left:6px;background:none!important;}.x-sh .xsbc{background:none!important;}.x-sh .xsbr{padding-right:6px;background:none!important;}.xt {background:transparent url(http://www.center-dm.ru/ucoz/ajax/v2/tool-sprites.png) no-repeat!important; margin-left:5px!important; margin-top:2px!important;}.xt-close{background-position:0 0!important;}.xt-close-over{background-position:-15px 0!important;}.xt-mini{background-position:0 -15px!important;}.xt-mini-over{background-position:-15px -15px!important;}.xt-maxi{background-position:0 -30px!important;}.xt-maxi-over{background-position:-15px -30px!important;}.xt-rest{background-position:0 -45px!important;}.xt-rest-over{background-position:-15px -45px!important;}.xw-tl {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border.png) repeat-y 0 0!important; padding-left:5px!important; -webkit-border-radius: 5px 0px 0px 0px; -moz-border-radius: 5px 0px 0px 0px; border-radius: 5px 0px 0px 0px;}.xw-tc {background:url(http://www.center-dm.ru/ucoz/ajax/v2/top.gif) repeat-x 0 0!important; padding: 11px 10px 0px 10px!important;}.xw-tr {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border.png) repeat-y 100% 0!important; padding-right:5px!important; -webkit-border-radius: 0px 5px 0px 0px; -moz-border-radius: 0px 5px 0px 0px; border-radius: 0px 5px 0px 0px;}.xw-ml {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border.png) repeat-y 0 0!important; padding-left:5px!important;}.xw-mr {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border.png) repeat-y 100% 0!important; padding-right:5px!important;}.xw-bl {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border.png) no-repeat 0 100%!important; padding-left:5px!important; -webkit-border-radius: 0px 0px 0px 5px; -moz-border-radius: 0px 0px 0px 5px; border-radius: 0px 0px 0px 5px;}.xw-br {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border.png) no-repeat 100% 100%!important;padding-right:5px!important; -webkit-border-radius: 0px 0px 5px 0px; -moz-border-radius: 0px 0px 5px 0px; border-radius: 0px 0px 5px 0px;}.xw-bc {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border.png) repeat-x 0 100%!important; height:5px!important;}.xw-hdr-text {padding:0px!important;}.xw-hdr-text {font: 12px Verdana,Arial,Helvetica, sans-serif!important; color: #bcbcbc!important; text-shadow: 1px 1px 1px #000!important; line-height: 15px!important; vertical-align:2px!important;}.xw-plain .xw-mc {border: none!important; padding:0!important; margin:0!important; font: 11px Verdana,Arial,Helvetica, sans-serif!important; color:#444!important; background:#f9f9f9!important;}.xw-body {padding:0!important; margin:0!important; box-shadow:inset 0px 1px 3px #666; -webkit-box-shadow:inset 0px 1px 3px #666; -moz-box-shadow:inset 0px 1px 3px #666;}.xw-plain .xw-body{padding: 10px!important; border: none!important;}.xw-blank {background:#fff!important;}.myWinTD1 {background:none!important;}2. Синяя рамка ajax окна:
/* AJAX ОКНО v.2.0============================================================================*/.x-sh .xstl{padding-top:6px; background:none!important;}.x-sh .xsml{background:none!important;}.x-sh .xstr{padding-top:6px; background:none!important;}.x-sh .xsmr{background:none!important;}.x-sh .xsbl{padding-left:6px;background:none!important;}.x-sh .xsbc{background:none!important;}.x-sh .xsbr{padding-right:6px;background:none!important;}.xt {background:transparent url(http://www.center-dm.ru/ucoz/ajax/v2/tool-sprites.png) no-repeat!important; margin-left:5px!important; margin-top:2px!important;}.xt-close{background-position:0 0!important;}.xt-close-over{background-position:-15px 0!important;}.xt-mini{background-position:0 -15px!important;}.xt-mini-over{background-position:-15px -15px!important;}.xt-maxi{background-position:0 -30px!important;}.xt-maxi-over{background-position:-15px -30px!important;}.xt-rest{background-position:0 -45px!important;}.xt-rest-over{background-position:-15px -45px!important;}.xw-tl {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border1.png) repeat-y 0 0!important; padding-left:5px!important; -webkit-border-radius: 5px 0px 0px 0px; -moz-border-radius: 5px 0px 0px 0px; border-radius: 5px 0px 0px 0px;}.xw-tc {background:url(http://www.center-dm.ru/ucoz/ajax/v2/top1.gif) repeat-x 0 0!important; padding: 11px 10px 0px 10px!important;}.xw-tr {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border1.png) repeat-y 100% 0!important; padding-right:5px!important; -webkit-border-radius: 0px 5px 0px 0px; -moz-border-radius: 0px 5px 0px 0px; border-radius: 0px 5px 0px 0px;}.xw-ml {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border1.png) repeat-y 0 0!important; padding-left:5px!important;}.xw-mr {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border1.png) repeat-y 100% 0!important; padding-right:5px!important;}.xw-bl {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border1.png) no-repeat 0 100%!important; padding-left:5px!important; -webkit-border-radius: 0px 0px 0px 5px; -moz-border-radius: 0px 0px 0px 5px; border-radius: 0px 0px 0px 5px;}.xw-br {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border1.png) no-repeat 100% 100%!important;padding-right:5px!important; -webkit-border-radius: 0px 0px 5px 0px; -moz-border-radius: 0px 0px 5px 0px; border-radius: 0px 0px 5px 0px;}.xw-bc {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border1.png) repeat-x 0 100%!important; height:5px!important;}.xw-hdr-text {padding:0px!important;}.xw-hdr-text {font: 12px Verdana,Arial,Helvetica, sans-serif!important; color: #bcbcbc!important; text-shadow: 1px 1px 1px #000!important; line-height: 15px!important; vertical-align:2px!important;}.xw-plain .xw-mc {border: none!important; padding:0!important; margin:0!important; font: 11px Verdana,Arial,Helvetica, sans-serif!important; color:#444!important; background:#f9f9f9!important;}.xw-body {padding:0!important; margin:0!important; box-shadow:inset 0px 1px 3px #666; -webkit-box-shadow:inset 0px 1px 3px #666; -moz-box-shadow:inset 0px 1px 3px #666;}.xw-plain .xw-body{padding: 10px!important; border: none!important;}.xw-blank {background:#fff!important;}.myWinTD1 {background:none!important;}3. Красная рамка ajax окна:
/* AJAX ОКНО v.2.0============================================================================*/.x-sh .xstl{padding-top:6px; background:none!important;}.x-sh .xsml{background:none!important;}.x-sh .xstr{padding-top:6px; background:none!important;}.x-sh .xsmr{background:none!important;}.x-sh .xsbl{padding-left:6px;background:none!important;}.x-sh .xsbc{background:none!important;}.x-sh .xsbr{padding-right:6px;background:none!important;}.xt {background:transparent url(http://www.center-dm.ru/ucoz/ajax/v2/tool-sprites.png) no-repeat!important; margin-left:5px!important; margin-top:2px!important;}.xt-close{background-position:0 0!important;}.xt-close-over{background-position:-15px 0!important;}.xt-mini{background-position:0 -15px!important;}.xt-mini-over{background-position:-15px -15px!important;}.xt-maxi{background-position:0 -30px!important;}.xt-maxi-over{background-position:-15px -30px!important;}.xt-rest{background-position:0 -45px!important;}.xt-rest-over{background-position:-15px -45px!important;}.xw-tl {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border2.png) repeat-y 0 0!important; padding-left:5px!important; -webkit-border-radius: 5px 0px 0px 0px; -moz-border-radius: 5px 0px 0px 0px; border-radius: 5px 0px 0px 0px;}.xw-tc {background:url(http://www.center-dm.ru/ucoz/ajax/v2/top2.gif) repeat-x 0 0!important; padding: 11px 10px 0px 10px!important;}.xw-tr {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border2.png) repeat-y 100% 0!important; padding-right:5px!important; -webkit-border-radius: 0px 5px 0px 0px; -moz-border-radius: 0px 5px 0px 0px; border-radius: 0px 5px 0px 0px;}.xw-ml {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border2.png) repeat-y 0 0!important; padding-left:5px!important;}.xw-mr {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border2.png) repeat-y 100% 0!important; padding-right:5px!important;}.xw-bl {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border2.png) no-repeat 0 100%!important; padding-left:5px!important; -webkit-border-radius: 0px 0px 0px 5px; -moz-border-radius: 0px 0px 0px 5px; border-radius: 0px 0px 0px 5px;}.xw-br {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border2.png) no-repeat 100% 100%!important;padding-right:5px!important; -webkit-border-radius: 0px 0px 5px 0px; -moz-border-radius: 0px 0px 5px 0px; border-radius: 0px 0px 5px 0px;}.xw-bc {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border2.png) repeat-x 0 100%!important; height:5px!important;}.xw-hdr-text {padding:0px!important;}.xw-hdr-text {font: 12px Verdana,Arial,Helvetica, sans-serif!important; color: #bcbcbc!important; text-shadow: 1px 1px 1px #000!important; line-height: 15px!important; vertical-align:2px!important;}.xw-plain .xw-mc {border: none!important; padding:0!important; margin:0!important; font: 11px Verdana,Arial,Helvetica, sans-serif!important; color:#444!important; background:#f9f9f9!important;}.xw-body {padding:0!important; margin:0!important; box-shadow:inset 0px 1px 3px #666; -webkit-box-shadow:inset 0px 1px 3px #666; -moz-box-shadow:inset 0px 1px 3px #666;}.xw-plain .xw-body{padding: 10px!important; border: none!important;}.xw-blank {background:#fff!important;}.myWinTD1 {background:none!important;}4. Темная рамка ajax окна:
/* AJAX ОКНО v.2.0============================================================================*/.x-sh .xstl{padding-top:6px; background:none!important;}.x-sh .xsml{background:none!important;}.x-sh .xstr{padding-top:6px; background:none!important;}.x-sh .xsmr{background:none!important;}.x-sh .xsbl{padding-left:6px;background:none!important;}.x-sh .xsbc{background:none!important;}.x-sh .xsbr{padding-right:6px;background:none!important;}.xt {background:transparent url(http://www.center-dm.ru/ucoz/ajax/v2/tool-sprites.png) no-repeat!important; margin-left:5px!important; margin-top:2px!important;}.xt-close{background-position:0 0!important;}.xt-close-over{background-position:-15px 0!important;}.xt-mini{background-position:0 -15px!important;}.xt-mini-over{background-position:-15px -15px!important;}.xt-maxi{background-position:0 -30px!important;}.xt-maxi-over{background-position:-15px -30px!important;}.xt-rest{background-position:0 -45px!important;}.xt-rest-over{background-position:-15px -45px!important;}.xw-tl {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border3.png) repeat-y 0 0!important; padding-left:5px!important; -webkit-border-radius: 5px 0px 0px 0px; -moz-border-radius: 5px 0px 0px 0px; border-radius: 5px 0px 0px 0px;}.xw-tc {background:url(http://www.center-dm.ru/ucoz/ajax/v2/top3.gif) repeat-x 0 0!important; padding: 11px 10px 0px 10px!important;}.xw-tr {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border3.png) repeat-y 100% 0!important; padding-right:5px!important; -webkit-border-radius: 0px 5px 0px 0px; -moz-border-radius: 0px 5px 0px 0px; border-radius: 0px 5px 0px 0px;}.xw-ml {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border3.png) repeat-y 0 0!important; padding-left:5px!important;}.xw-mr {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border3.png) repeat-y 100% 0!important; padding-right:5px!important;}.xw-bl {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border3.png) no-repeat 0 100%!important; padding-left:5px!important; -webkit-border-radius: 0px 0px 0px 5px; -moz-border-radius: 0px 0px 0px 5px; border-radius: 0px 0px 0px 5px;}.xw-br {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border3.png) no-repeat 100% 100%!important;padding-right:5px!important; -webkit-border-radius: 0px 0px 5px 0px; -moz-border-radius: 0px 0px 5px 0px; border-radius: 0px 0px 5px 0px;}.xw-bc {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border3.png) repeat-x 0 100%!important; height:5px!important;}.xw-hdr-text {padding:0px!important;}.xw-hdr-text {font: 12px Verdana,Arial,Helvetica, sans-serif!important; color: #bcbcbc!important; text-shadow: 1px 1px 1px #000!important; line-height: 15px!important; vertical-align:2px!important;}.xw-plain .xw-mc {border: none!important; padding:0!important; margin:0!important; font: 11px Verdana,Arial,Helvetica, sans-serif!important; color:#444!important; background:#f9f9f9!important;}.xw-body {padding:0!important; margin:0!important; box-shadow:inset 0px 1px 3px #666; -webkit-box-shadow:inset 0px 1px 3px #666; -moz-box-shadow:inset 0px 1px 3px #666;}.xw-plain .xw-body{padding: 10px!important; border: none!important;}.xw-blank {background:#fff!important;}.myWinTD1 {background:none!important;}5. Серая рамка ajax окна:
/* AJAX ОКНО v.2.0============================================================================*/.x-sh .xstl{padding-top:6px; background:none!important;}.x-sh .xsml{background:none!important;}.x-sh .xstr{padding-top:6px; background:none!important;}.x-sh .xsmr{background:none!important;}.x-sh .xsbl{padding-left:6px;background:none!important;}.x-sh .xsbc{background:none!important;}.x-sh .xsbr{padding-right:6px;background:none!important;}.xt {background:transparent url(http://www.center-dm.ru/ucoz/ajax/v2/tool-sprites.png) no-repeat!important; margin-left:5px!important; margin-top:2px!important;}.xt-close{background-position:0 0!important;}.xt-close-over{background-position:-15px 0!important;}.xt-mini{background-position:0 -15px!important;}.xt-mini-over{background-position:-15px -15px!important;}.xt-maxi{background-position:0 -30px!important;}.xt-maxi-over{background-position:-15px -30px!important;}.xt-rest{background-position:0 -45px!important;}.xt-rest-over{background-position:-15px -45px!important;}.xw-tl {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border4.png) repeat-y 0 0!important; padding-left:5px!important; -webkit-border-radius: 5px 0px 0px 0px; -moz-border-radius: 5px 0px 0px 0px; border-radius: 5px 0px 0px 0px;}.xw-tc {background:url(http://www.center-dm.ru/ucoz/ajax/v2/top4.gif) repeat-x 0 0!important; padding: 11px 10px 0px 10px!important;}.xw-tr {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border4.png) repeat-y 100% 0!important; padding-right:5px!important; -webkit-border-radius: 0px 5px 0px 0px; -moz-border-radius: 0px 5px 0px 0px; border-radius: 0px 5px 0px 0px;}.xw-ml {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border4.png) repeat-y 0 0!important; padding-left:5px!important;}.xw-mr {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border4.png) repeat-y 100% 0!important; padding-right:5px!important;}.xw-bl {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border4.png) no-repeat 0 100%!important; padding-left:5px!important; -webkit-border-radius: 0px 0px 0px 5px; -moz-border-radius: 0px 0px 0px 5px; border-radius: 0px 0px 0px 5px;}.xw-br {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border4.png) no-repeat 100% 100%!important;padding-right:5px!important; -webkit-border-radius: 0px 0px 5px 0px; -moz-border-radius: 0px 0px 5px 0px; border-radius: 0px 0px 5px 0px;}.xw-bc {background:url(http://www.center-dm.ru/ucoz/ajax/v2/border4.png) repeat-x 0 100%!important; height:5px!important;}.xw-hdr-text {padding:0px!important;}.xw-hdr-text {font: 12px Verdana,Arial,Helvetica, sans-serif!important; color: #bcbcbc!important; text-shadow: 1px 1px 1px #000!important; line-height: 15px!important; vertical-align:2px!important;}.xw-plain .xw-mc {border: none!important; padding:0!important; margin:0!important; font: 11px Verdana,Arial,Helvetica, sans-serif!important; color:#444!important; background:#f9f9f9!important;}.xw-body {padding:0!important; margin:0!important; box-shadow:inset 0px 1px 3px #666; -webkit-box-shadow:inset 0px 1px 3px #666; -moz-box-shadow:inset 0px 1px 3px #666;}.xw-plain .xw-body{padding: 10px!important; border: none!important;}.xw-blank {background:#fff!important;}.myWinTD1 {background:none!important;}Вы можете скачать изображения и заменить ссылки в кодах на свои.
Доступно после регистрации на сайте.
{speedbar}
Читать другие статьи и новости по теме:
Информация
Комментировать статьи на нашем сайте возможно только в течении 31 дней со дня публикации.
2012—2013 © bns-od.com - портал для начинающих Web-мастеров и Web-дизайнеров.
На нашем сайте Вы можете скачать шаблоны, модули, плагины, интересные скрипты для различных CMS, SEO-софт и другое тематическое программное обеспечение.
Веб-дизайнеров заинтересуют PSD исходники, подборки PNG иконок, кнопки, фоны и другие всегда нужные графические элементы.
Все файлы в архивах проверены нашим программистом на наличие вирусов и шпионов. Большинство файлов доступны для скачивания с нашего сервера.
Разработка дизайна WEBstudio17, поддержка: программист Семён Миткевич.
На нашем сайте Вы можете скачать шаблоны, модули, плагины, интересные скрипты для различных CMS, SEO-софт и другое тематическое программное обеспечение.
Веб-дизайнеров заинтересуют PSD исходники, подборки PNG иконок, кнопки, фоны и другие всегда нужные графические элементы.
Все файлы в архивах проверены нашим программистом на наличие вирусов и шпионов. Большинство файлов доступны для скачивания с нашего сервера.
Разработка дизайна WEBstudio17, поддержка: программист Семён Миткевич.