استایل جدید برای بک آپ نفس طرح

استایل جدید برای بک آپ نفس طرح

رزرو تبلیغــات

تعرفه تبلیغات
logo
تعرفه تبلیغات تعرفه تبلیغات

شمـا میتوانیــد برای دریافت آخرین مطالب و آگاهی از آخریـن اخبــار گلریـز وبـــ در ایمیـــل خـود در خبــرنامـه ثـبت نـام کنــید

http://s4.picofile.com/file/8171554826/835030143.PNG

http://s4.picofile.com/file/8171554850/428666091.PNG

لینک دانلود:

 فقط استایل پنجره ها و انیمیشن ایکون هاست

خوب برای اعمال این تغییرات کد زیر رو در فایل chat.css موجود در پوشه theme/theme4/css بذارید.

کد:

 

@font-face {
    font-family: b;
    src: url('../fonts/b.eot'); /* IE9 Compatibility Modes */
    src: url('../fonts/b.eot?') format('eot'),  /* IE6-IE8 */
    url('../fonts/b.woff') format('woff'), /* Modern Browsers */
    url('../fonts/b.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('../fonts/b.svg#svgGraublauweb') format('svg'); /* Legacy iOS */
}
@keyframes spaceboots {
0% { transform: translate(2px, 1px) rotate(0deg); }10% { transform: translate(-1px, -2px) rotate(-1deg); }20% { transform: translate(-3px, 0px) rotate(1deg); }30% { transform: translate(0px, 2px) rotate(0deg); }40% { transform: translate(1px, -1px) rotate(1deg); }50% { transform: translate(-1px, 2px) rotate(-1deg); }60% { transform: translate(-3px, 1px) rotate(0deg); }70% { transform: translate(2px, 1px) rotate(-1deg); }80% { transform: translate(-1px, -1px) rotate(1deg); }90% { transform: translate(2px, 2px) rotate(0deg); }100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes spaceboots {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }30% { -moz-transform: translate(0px, 2px) rotate(0deg); }40% { -moz-transform: translate(1px, -1px) rotate(1deg); }50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }90% { -moz-transform: translate(2px, 2px) rotate(0deg); }100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-o-keyframes spaceboots {
0% { -o-transform: translate(2px, 1px) rotate(0deg); }10% { -o-transform: translate(-1px, -2px) rotate(-1deg); }20% { -o-transform: translate(-3px, 0px) rotate(1deg); }30% { -o-transform: translate(0px, 2px) rotate(0deg); }40% { -o-transform: translate(1px, -1px) rotate(1deg); }50% { -o-transform: translate(-1px, 2px) rotate(-1deg); }60% { -o-transform: translate(-3px, 1px) rotate(0deg); }70% { -o-transform: translate(2px, 1px) rotate(-1deg); }80% { -o-transform: translate(-1px, -1px) rotate(1deg); }90% { -o-transform: translate(2px, 2px) rotate(0deg); }100% { -o-transform: translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes spaceboots {
0% { -ms-transform: translate(2px, 1px) rotate(0deg); }10% { -ms-transform: translate(-1px, -2px) rotate(-1deg); }20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }30% { -ms-transform: translate(0px, 2px) rotate(0deg); }40% { -ms-transform: translate(1px, -1px) rotate(1deg); }50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }90% { -ms-transform: translate(2px, 2px) rotate(0deg); }100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }
}
#body{background-color:#eef;background-repeat:repeat-x;text-align:center}
#box{border:1px solid #2C299B;font-size:14px;margin:0 auto;width:200px}
#inhalt{background-color:#f1f1ff;font-size:12px;padding:3px}
#copyright{font-size:9px}
#login{display:inline}
table{font-size:12px}
body{height:100%;margin:0 auto;font-family:tahoma;}
#rahmen_um_alles{margin:10px}
#kopf{color:#000;font-size:14px;font-style:normal;margin-bottom:2px;padding:2px}
#kopf a:hover{color:#fff;font-size:10pt;text-decoration:none}
#onlinelist{float:right;font-size:12px;font-style:normal;height:450px;line-height:190%;padding:5px 5px 16px;width:500px;text-align: center;overflow-y: auto;overflow-x: hidden;color:#8D00C2;border-left:4px dashed #FF0090;border-right:4px dashed #FF0090;}
* html #splitpane{margin-left:-2px}
#splitpane{background-image:url('../images/chat.splitpane.png');background-position:center;background-repeat:no-repeat;color:#FFF;cursor:e-resize;float:right;font-size:8px;font-style:normal;height:450px;margin:1px;overflow:auto;width:8px}
#chatinhalt{height:450px;line-height:190%;overflow:auto;padding:5px 5px 16px;position:relative;direction:rtl;border-left:4px dashed #FF0090;border-right:4px dashed #FF0090}
#form{-moz-border-radius:9px;-webkit-border-radius:9px;border-radius:9px;clear:both;color:#fff;font-size:12px;font-style:normal;height:60px;margin-top:1px;padding:3px 3px 3px 10px}
#form_left{float:left;position:relative}
#form_right{float:left;padding:6px;position:relative;padding-top:13px}
#privat_messages{background-color:#ccc;border:1px solid #000;left:100px;padding:5px;position:absolute;top:100px}
.rooms{cursor:pointer;height:23px;margin-bottom:2px;padding:4px;text-align:center}
.rooms:hover{
animation: spaceboots linear 0.8s infinite;
transform-origin:50% 50%;
-webkit-animation: spaceboots linear 0.8s infinite;
-webkit-transform-origin:50% 50%;
-moz-animation: spaceboots linear 0.8s infinite;
-moz-transform-origin:50% 50%;
-o-animation: spaceboots linear 0.8s infinite;
-o-transform-origin:50% 50%;
-ms-animation: spaceboots linear 0.8s infinite;
-ms-transform-origin:50% 50%;
}
.rooms_not_allowed{background-repeat:repeat-x;border:1px solid #2C299B;color:#777;cursor:pointer;height:27px;margin-bottom:2px;padding:1px}
#message{background-color:#E8FAFF;border-radius:9px 3px;margin-right:4px}
.privat_ausg_an{background-color:rgba(104, 210, 252, 0.29);border-style:dashed;border-color:#006FFF #FFF #006FFF #FFF;border-radius:10%}
.privat_ausg_von{background-color:rgba(104, 210, 252, 0.29);border-style:dashed;border-color:#006FFF #FFF #006FFF #FFF;border-radius:10%}
#close_privat{background-repeat:repeat-x;border:1px solid #000;cursor:pointer;font-size:10px;font-style:normal;padding-left:4px;padding-right:4px}
#privat_anzeige{height:18px;padding-bottom:3px}
#privat_modus{font-size:10px}
.privat_mesages_window{height:165px;overflow:auto;padding:3px}
.privat_win_button{background-repeat:repeat-x;border:1px solid #2C299B;cursor:pointer;font-weight:700;margin-top:3px;text-align:center;width:190px}
.colorpick{cursor:pointer;font-size:11px;width:100%}
.dialog{font-size:8px;font-style:normal}
.img_button{-moz-border-radius:9px;-moz-box-shadow:3px 3px 4px #909090;-webkit-border-radius:9px;-webkit-box-shadow:3px 3px 4px #00FFD2;border-radius:7px;box-shadow:0px 0px 10px #909090 inset;cursor:pointer;border: 0;width: 35px;margin:2px;}
.img_button:hover{
animation: spaceboots linear 0.8s infinite;
transform-origin:50% 50%;
-webkit-animation: spaceboots linear 0.8s infinite;
-webkit-transform-origin:50% 50%;
-moz-animation: spaceboots linear 0.8s infinite;
-moz-transform-origin:50% 50%;
-o-animation: spaceboots linear 0.8s infinite;
-o-transform-origin:50% 50%;
-ms-animation: spaceboots linear 0.8s infinite;
-ms-transform-origin:50% 50%;
}
a:hover{color:red;font-size:10pt;text-decoration:underline}
.kopf{background-repeat:repeat-x}
.gerade{background-color:#d5d5ff}
.ungerade{background-color:#eef}
.privat_von{background-color:#dfd}
.privat_nach{background-color:#fdd}
#adminbereich_body{color:#000;font-size:12px}
.overlay_etchat_white{-moz-opacity:0.6;background-color:#f6f6ff;filter:alpha(opacity=60);opacity:0.6}
.etchat_white_nw{background-color:rgba(148, 98, 245, 0.46);border-left:1px solid #929292;border-top:1px solid #929292;height:18px;width:10px}
.etchat_white_n{background-color:rgba(148, 98, 245, 0.46);border-bottom:1px solid #929292;border-top:1px solid #929292;height:28px}
.etchat_white_ne{background-color:rgba(148, 98, 245, 0.46);border-right:1px solid #929292;border-top:1px solid #929292;height:18px;width:10px}
.etchat_white_w{background-color:rgba(148, 98, 245, 0.46);border-left:1px solid #929292;width:7px}
.etchat_white_e{background-color:rgba(148, 98, 245, 0.46);border-right:1px solid #929292;width:7px}
.etchat_white_sw{background-color:rgba(148, 98, 245, 0.46);border-bottom:1px solid #929292;border-left:1px solid #929292;height:3px;width:10px}
.etchat_white_s{background-color:rgba(148, 98, 245, 0.46);border-bottom:1px solid #929292}

/*ahora-chat.ir*/
.etchat_white_se, .etchat_white_sizer {  border-right: 2px solid #000;border-bottom: 2px solid #000; width:15px; height:10px; background-color:rgba(148, 98, 245, 0.46);}
.etchat_white_sizer {cursor:se-resize;}
/*ahora-chat.ir*/
.etchat_white_close{background:transparent url(../images/button-close-focus.gif) no-repeat 0 0;cursor:pointer;height:23px;position:absolute;right:8px;top:4px;width:23px;z-index:1000}
.etchat_white_minimize{background:transparent url(../images/button-min-focus.gif) no-repeat 0 0;cursor:pointer;height:23px;position:absolute;right:55px;top:0;width:23px;z-index:1000}
.etchat_white_maximize{background:transparent url(../images/button-max-focus.gif) no-repeat 0 0;cursor:pointer;height:23px;position:absolute;right:33px;top:0;width:23px;z-index:1000}
.etchat_white_title{color:#E7FF00;font-size:14px;font-weight:900;height:20px;margin-top:2px;text-align:center;width:100%;text-shadow:0px 0px 5px #000000, 0 0 5px #000000}
.etchat_white_content{color:#000;font-size:12px;overflow:auto;padding-top:5px}
#copyright_paeen{background-color:#000;color:#FFF;font-size:11px;height:20px;margin:0;padding-top:4px;text-align:center}
#copyright_paeen a:link{color:#FFF;font-size:11px;text-decoration:none}
#copyright_paeen a:hover{color:#FF0}
.reciv_pm{
    background: #fff;
    padding:3px 6px;

    color: #3e454c;
    text-align:right;
    direction:rtl;
    text-shadow: rgba(255, 255, 255, .5) 0 1px 0;
    box-shadow:1px 1px 1px rgba(0,0,0,0.1);
    border-radius:2px;
    min-height:23px!important;
    min-width:20px;
    display:inline-block;
}
.send_pm{
    background: none repeat scroll 0% 0% #E7F1FE;
padding: 3px 6px;
color: #3E454C;
text-align: right;
direction: rtl;
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 2px;
min-height: 23px !important;
min-width: 20px;
display: inline-block;
}
.round{-moz-border-radius:9px;-moz-box-shadow:3px 3px 4px #909090;-webkit-border-radius:9px;-webkit-box-shadow:3px 3px 4px #909090;border:0;border-radius:9px;box-shadow:3px 3px 4px #909090}
.msgGrowl-container{position:fixed;width:300px}
.top-right{right:15px;top:10px}
.bottom-right{bottom:10px;right:15px}
.top-left{left:15px;top:10px}
.bottom-left{bottom:10px;left:15px}
.top-center{left:50%;margin-left:-150px;top:10px}
.bottom-center{bottom:10px;left:50%;margin-left:-150px}
.msgGrowl{-moz-border-radius:5px;-moz-box-shadow:0 0 7px rgba(0,0,0,.3);-moz-text-shadow:0 0 1px #FFF;-o-border-radius:5px;-o-box-shadow:0 0 7px rgba(0,0,0,.3);-o-text-shadow:0 0 1px #FFF;-webkit-border-radius:5px;-webkit-box-shadow:0 0 7px rgba(0,0,0,.3);-webkit-text-shadow:0 0 1px #FFF;background:0;border:1px solid #A8A8A8;border-radius:5px;box-shadow:0 0 7px rgba(0,0,0,.3);color:#333;direction:rtl;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9 ',endColorstr='#D5D5D5 ');font-size:11px;margin:0 0 10px;padding:0;position:relative;text-shadow:0 0 1px #FFF;width:300px;z-index:5000}
.msgGrowl h4{-moz-text-shadow:0 0 1px #FFF;-o-text-shadow:0 0 1px #FFF;-webkit-text-shadow:0 0 1px #FFF;color:#333;font-size:13px;margin-bottom:.5em;text-shadow:0 0 1px #FFF}
.msgGrowl-content{padding:10px 20px 10px 10px}
.msgGrowl-close{background:url(../images/msgGrowl/msgGrowl_close.png) no-repeat 50% 50%;height:10px;opacity:.4;position:absolute;right:10px;top:10px;width:11px}
.msgGrowl-close:hover{cursor:pointer;opacity:1}
.msgGrowl.success .msgGrowl-content{background:url(../images/msgGrowl/msgGrowl_success.png) no-repeat 10px 13px;padding-left:50px}
.msgGrowl.success h4{color:#5B7027}
.msgGrowl.error .msgGrowl-content{background:url(../images/msgGrowl/msgGrowl_error.png) no-repeat 10px 13px;padding-left:50px}
.msgGrowl.error h4{color:#AF4434}
.msgGrowl.info .msgGrowl-content{background:url(../images/msgGrowl/msgGrowl_info.png) no-repeat 10px 13px;padding-left:50px}
.msgGrowl.info h4{color:#316AB7}
.msgGrowl.warning .msgGrowl-content{background:url(../images/msgGrowl/msgGrowl_warning.png) no-repeat 10px 13px;padding-left:50px}
.msgGrowl.warning h4{color:#B69201}
#kopf a:link,#kopf a:visited,#kopf a:active{color:#fff;font-size:10pt}
a:link,a:visited,a:active,#adminbereich_body a:hover{color:#009;font-size:10pt;text-decoration:none}
#adminbereich_body a:link,#adminbereich_body a:visited,#adminbereich_body a:active{color:#009;font-size:10pt}
#copyright_paeen a,#copyright_paeen a:visited{color:#FFF;font-size:11px;text-decoration:none}
.user_win,#status_ul,#prop_list{direction:rtl}
#prop_list ul,#status_ul,.user_win ul,.into_admin_win ul{margin-right:3px;padding:0;list-style:none;margin-top:0}
#prop_list ul li,#status_ul li,.user_win li,.into_admin_win ul li{line-height:23px;color:#009;cursor:pointer}
.user_win ul li{line-height:15px}
#prop_list ul li img, ,#status_ul li img{margin-left:5px}
.block_form{display:none;margin-top:2px}
.form_user_block{display:inline}
.into_admin_win p,.into_admin_win{direction:rtl}
.close_room_warning{width:90px;cursor:pointer;border:1px solid black;text-align:center}
.send_room_pw{width:60px;cursor:pointer;border:1px solid black;text-align:center;float:left;margin:2px}
#regbtn{padding:6px 10px 7px;text-align:center;width:150px;cursor:pointer;font:12px Tahoma;border-radius:25%;color:#FFF;background:black url(http://s1.xum.ir/2014/12/11/Arsalan.gif);background-size:cover;border:3px ridge #fff;font-weight:bold;}
.fixedads .closebtn{
    height: 20px;
    line-height: 23px;
    background-color: #FFD8EA;
    cursor: pointer;
    text-align: center;
    font-size:11px;
    display: block;
}

.overlay_dialog{background-color:#666666;filter:alpha(opacity=60);-moz-opacity:0.6;opacity:0.6}
.overlay___invisible__{background-color:#666666;filter:alpha(opacity=0);-moz-opacity:0;opacity:0}
.dialog_nw{width:9px;height:23px;background:transparent 0 0}
.dialog_n{background:transparent 0 0;height:23px}
.dialog_ne{width:9px;height:23px;background:transparent 0 0}
.dialog_e{width:2px;background:transparent 0 0}
.dialog_w{width:2px;background:transparent 0 0}
.dialog_sw{width:9px;height:19px;background:transparent 0 0}
.dialog_s{background:transparent 0 0;height:19px}
.dialog_se{width:9px;height:19px;background:transparent 0 0}
.dialog_sizer{width:9px;height:19px;background:transparent 0 0;cursor:se-resize}
.dialog_close{width:14px;height:14px;background:transparent 0 0;position:absolute;top:5px;left:8px;cursor:pointer;z-index:2000}
.dialog_minimize{width:14px;height:15px;background:transparent 0 0;position:absolute;top:5px;left:28px;cursor:pointer;z-index:2000}
.dialog_maximize{width:14px;height:15px;background:transparent 0 0;position:absolute;top:5px;left:49px;cursor:pointer;z-index:2000}
.dialog_title{float:left;height:14px;font-family:Tahoma,Arial,sans-serif;font-size:12px;text-align:center;width:100%;color:#000}
.dialog_content{overflow:auto;color:#DDD;font-family:Tahoma,Arial,sans-serif;font-size:10px;background-color:#123}
.top_draggable{cursor:move}
.status_bar{font-size:12px}
.status_bar input{font-size:12px}
.wired_frame{display:block;position:absolute;border:1px #000 dashed}
.dialog{display:block;position:absolute}
.dialog table.table_window{border-collapse:collapse;border-spacing:0;width:100%;margin:0px;padding:0px}
.dialog table.table_window td,.dialog table.table_window th{padding:0}
.dialog .title_window{-moz-user-select:none}
.form-control {
    display: block;
    width: 95%;
    height: 34px;
    padding: 2px 2px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    margin: 0px;
}

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}

.form-control::-moz-placeholder {
    color: #999;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: #999
}

.form-control::-webkit-input-placeholder {
    color: #999
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}
.half {
    width: 48%;
    float: right;
    position: relative;
min-height: 1px;
padding-left: 1%;
padding-right: 1%;
}

#registercontiner,#registervalidcontiner{
	direction: rtl;
	font-size:12px;
	padding:5px 15px;
}
#registercontiner >h1,#registervalidcontiner > h1{
	font-family:b;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #E5E5E5;
}
#registercontiner .row,#registervalidcontiner .row{
	overflow:hidden;
	margin-bottom: 20px;
}
#registercontiner .row .btn,#registervalidcontiner .row .btn{
	display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 18px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
    
}
#registercontiner .row .btn,#registervalidcontiner .row .btn{
	color: #FFF;
	background-color: #ED5565;
	border-color: #EB3E50;
	display: block;
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1.33;
	border-radius: 6px;
	font-family:b;	
}
#overcolor{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.56);
	z-index: 4900;
}



.datestamp {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 8px;
  color: #8b91a0;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
}


/** page structure **/
.container {
  padding: 40px 20px;
  margin: 0 auto;
  max-width: 600px;
}


/** ios1-ios6 bubbles **/
.bubble {
  box-sizing: border-box;
  float: left;
  width: auto;
  max-width: 80%;
  position: relative;
  clear: both;
  
  background: #95c2fd;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.15, #bee2ff), color-stop(1, #95c2fd));
  background-image: -webkit-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: -moz-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: -ms-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: -o-linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  background-image: linear-gradient(bottom, #bee2ff 15%, #95c2fd 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#95c2fd', endColorstr='#bee2ff');
 
  border: solid 1px rgba(0,0,0,0.5);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;

  -webkit-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);
  
  margin-bottom: 0px;
  padding: 6px ;
  color: #000;
  text-shadow: 0 1px 1px rgba(255,255,255,0.8);
  word-wrap: break-word;
}

.bubble:before, .bubble:after {
  border-radius: 20px / 5px;
  content: '';
  display: block;
  position: absolute;
}
.bubble:before {
  border: 10px solid transparent;
  border-bottom-color: rgba(0,0,0,0.5);
  bottom: 0px;
  left: -7px;
 /* z-index: -1; */
}
.bubble:after {
  border: 8px solid transparent;
  border-bottom-color: #bee2ff; /* arrow color */
  bottom: 1px;
  left: -5px;
}


.bubble-alt {
  float: right;
}
.bubble-alt:before {
  
  left: auto;
  right: -7px;
}
.bubble-alt:after {
    
  left: auto;
  right: -5px;
}

.bubble p {
  font-size: 1.4em;
}

/* green bubble */
.green {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #ace44b),color-stop(1, #7acd47));
  background-image: -webkit-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: -moz-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: -ms-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: -o-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  background-image: linear-gradient(bottom, #ace44b 15%, #7acd47 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#7acd47', endColorstr='#ace44b');
}
.green:after {
  border-bottom-color: #ace44b;
}

/* white bubble */
.white {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #e5e5e5),color-stop(1, #dbdbdb));
  background-image: -webkit-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -moz-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -ms-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: -o-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  background-image: linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#dbdbdb', endColorstr='#e5e5e5');
}
.white:after {
  border-bottom-color: #e5e5e5;
}

/* yellow bubble */
.yellow {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #fcf3c3),color-stop(1, #f4e371));
  background-image: -webkit-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  background-image: -moz-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  background-image: -ms-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  background-image: -o-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  background-image: linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f4e371', endColorstr='#fcf3c3');
}
.yellow:after {
  border-bottom-color: #fcf3c3;
}

/* red bubble */
.red {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #ea8378),color-stop(1, #e2675a));
  background-image: -webkit-linear-gradient(bottom, #ea8378 15%, #e2675a 100%);
  background-image: -moz-linear-gradient(bottom, #ea8378 15%, #e2675a 100%);
  background-image: -ms-linear-gradient(bottom, #ea8378 15%, #e2675a 100%);
  background-image: -o-linear-gradient(bottom, #ea8378 15%, #e2675a 100%);
  background-image: linear-gradient(bottom, #ea8378 15%, #e2675a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e2675a', endColorstr='#ea8378');
}
.red:after {
  border-bottom-color: #ea8378;
}

/* pink bubble */
.pink {
  background: #7acd47;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #ffbee3),color-stop(1, #f8a5ce));
  background-image: -webkit-linear-gradient(bottom, #ffbee3 15%, #f8a5ce 100%);
  background-image: -moz-linear-gradient(bottom, #ffbee3 15%, #f8a5ce 100%);
  background-image: -ms-linear-gradient(bottom, #ffbee3 15%, #f8a5ce 100%);
  background-image: -o-linear-gradient(bottom, #ffbee3 15%, #f8a5ce 100%);
  background-image: linear-gradient(bottom, #ffbee3 15%, #f8a5ce 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f8a5ce', endColorstr='#ffbee3');
}
.pink:after {
  border-bottom-color: #ffbee3;
}

 

و فایل رو سیو کنید. 


خوب دوستانی گفتن که علامت ضربدر براشون به نمایش در نمیاد برای حل مشکل یه فولدر به اسم images بسازید بعدش عکس زیر رو با اسم 

button-close-focus  در همون فولدر آپ کنید.


دوستانی هم مشکل چپ چین و راست چین پیام ها رو داشتند این دوستان هم میتونن از کد زیر استفاده کنند:

 

@font-face{font-family:b;src:url('b.eot');src:url('b.eot?') format('eot'),url('b.woff') format('woff'),url('b.ttf') format('truetype'),url('b.svg#svgGraublauweb') format('svg');} @font-face{font-family:yekan;src:url('yekan.eot');src:url('yekan.eot?') format('eot'), url('ekan.woff') format('woff'), url('yekan.ttf') format('truetype'), url('yekan.svg#svgGraublauweb') format('svg');} @font-face{font-family:morvarid;src:url('morvarid.eot');src:url('morvarid.eot?') format('eot'),url('morvarid.woff') format('woff'),url('morvarid.ttf') format('truetype'),url('morvarid.svg#svgGraublauweb') format('svg');} @font-face{font-family:ziba;src:url('ziba.eot');src:url('ziba.eot?') format('eot'),url('iba.woff') format('woff'),url('ziba.ttf') format('truetype'),url('ziba.svg#svgGraublauweb') format('svg');} @font-face{font-family:sina;src:url('sina.eot');src:url('sina.eot?') format('eot'),url('sina.woff') format('woff'),url('sina.ttf') format('truetype'), url('sina.svg#svgGraublauweb') format('svg');} @font-face{font-family:narm;src:url('narm.eot');src:url('narm.eot?') format('eot'),url('narm.woff') format('woff'),url('narm.ttf') format('truetype'), url('narm.svg#svgGraublauweb') format('svg');} @font-face{font-family:titr;src:url('titr.eot');src:url('titr.eot?') format('eot'),url('titr.woff') format('woff'),url('titr.ttf') format('truetype'), url('titr.svg#svgGraublauweb') format('svg');} @font-face{font-family:koodak;src:url('koodak.eot');src:url('koodak.eot?') format('eot'),url('koodak.woff') format('woff'),url('koodak.ttf') format('truetype'), url('koodak.svg#svgGraublauweb') format('svg');} @font-face{font-family:'BYekan';src:url('BYekan.eot');src:local('b BYekan'), url('BYekan.woff') format('woff'), url('BYekan.ttf') format('truetype');} @font-face{font-family:'BMorvarid';src:url('BMorvarid.eot');src:local('b morvarid'), url('BMorvarid.woff') format('woff'), url('BMorvarid.ttf') format('truetype');} @font-face{font-family:'BNarm';src:url('BNarm.eot');src:local('bnarm'), url('BNarm.woff') format('woff'), url('BNarm.ttf') format('truetype');} @font-face{font-family:'BZiba';src:url('BNarm.eot');src:local('bziba'), url('BZiba.woff') format('woff'), url('BZiba.ttf') format('truetype');} @font-face{font-family:'BKoodak';src:url('BKoodakBold.eot') format('eot'), url('BKoodakBold.woff') format('woff'), url('BKoodakBold.ttf') format('truetype');} @font-face{font-family:'BSina';src:url('BSinaBold.eot') format('eot'), url('BSinaBold.woff') format('woff'), url('BSinaBold.ttf') format('truetype');} @font-face{font-family:'BTitr';src:url('BTitrTGEBold.eot') format('eot'), url('BTitrTGEBold.woff') format('woff'), url('BTitrTGEBold.ttf') format('truetype');} @font-face{font-family:yekan;src:url('yekan.eot');src:url('yekan.eot?') format('eot'),url('yekan.woff') format('woff'),url('yekan.ttf') format('truetype'),url('yekan.svg#svgGraublauweb') format('svg')} @font-face{font-family:morvarid;src:url('morvarid.eot');src:url('morvarid.eot?') format('eot'),url('morvarid.woff') format('woff'),url('morvarid.ttf') format('truetype'),url('morvarid.svg#svgGraublauweb') format('svg')} @font-face{font-family:ziba;src:url('ziba.eot');src:url('ziba.eot?') format('eot'),url('ziba.woff') format('woff'),url('ziba.ttf') format('truetype'),url('ziba.svg#svgGraublauweb') format('svg')} @font-face{font-family:sina;src:url('sina.eot');src:url('sina.eot?') format('eot'),url('sina.woff') format('woff'),url('sina.ttf') format('truetype'),url('sina.svg#svgGraublauweb') format('svg')} @font-face{font-family:narm;src:url('narm.eot');src:url('narm.eot?') format('eot'),url('narm.woff') format('woff'),url('narm.ttf') format('truetype'),url('narm.svg#svgGraublauweb') format('svg')} @font-face{font-family:titr;src:url('titr.eot');src:url('titr.eot?') format('eot'),url('titr.woff') format('woff'),url('titr.ttf') format('truetype'),url('titr.svg#svgGraublauweb') format('svg')} @font-face{font-family:koodak;src:url('koodak.eot');src:url('koodak.eot?') format('eot'),url('koodak.woff') format('woff'),url('koodak.ttf') format('truetype'),url('koodak.svg#svgGraublauweb') format('svg')} @font-face{font-family:BSinaBold;src:url('BSinaBold.eot');src:url('BSinaBold.eot?') format('eot'),url('BSinaBold.woff') format('woff'),url('BSinaBold.ttf') format('truetype'),url('BSinaBold.svg#svgGraublauweb') format('svg')} @font-face{font-family:BBadr;src:url('BBadr.eot');src:url('BBadr.eot?') format('eot'),url('BBadr.woff') format('woff'),url('BBadr.ttf') format('truetype'),url('BBadr.svg#svgGraublauweb') format('svg')} @font-face{font-family:BBaran;src:url('BBaran.eot');src:url('BBaran.eot?') format('eot'),url('BBaran.woff') format('woff'),url('BBaran.ttf') format('truetype'),url('BBaran.svg#svgGraublauweb') format('svg')} @font-face{font-family:BBardiya;src:url('BBardiya.eot');src:url('BBardiya.eot?') format('eot'),url('BBardiya.woff') format('woff'),url('BBardiya.ttf') format('truetype'),url('BBardiya.svg#svgGraublauweb') format('svg')} @font-face{font-family:BElham;src:url('BElham.eot');src:url('BElham.eot?') format('eot'),url('BElham.woff') format('woff'),url('BElham.ttf') format('truetype'),url('BElham.svg#svgGraublauweb') format('svg')} @font-face{font-family:BHoma;src:url('BHoma.eot');src:url('BHoma.eot?') format('eot'),url('BHoma.woff') format('woff'),url('BHoma.ttf') format('truetype'),url('BHoma.svg#svgGraublauweb') format('svg')} @font-face{font-family:BLotus;src:url('BLotus.eot');src:url('BLotus.eot?') format('eot'),url('BLotus.woff') format('woff'),url('BLotus.ttf') format('truetype'),url('BLotus.svg#svgGraublauweb') format('svg')} @font-face{font-family:BNazanin;src:url('BNazanin.eot');src:url('BNazanin.eot?') format('eot'),url('BNazanin.woff') format('woff'),url('BNazanin.ttf') format('truetype'),url('BNazanin.svg#svgGraublauweb') format('svg')} @font-face{font-family:BZar;src:url('BZar.eot');src:url('BZar.eot?') format('eot'),url('BZar.woff') format('woff'),url('BZar.ttf') format('truetype'),url('BZar.svg#svgGraublauweb') format('svg')} @font-face{font-family:BZiba;src:url('BZiba.eot');src:url('BZiba.eot?') format('eot'),url('BZiba.woff') format('woff'),url('BZiba.ttf') format('truetype'),url('BZiba.svg#svgGraublauweb') format('svg')} @font-face{font-family:'icomoon';src:url('icomoon.eot?-n2bcf6');src:url('icomoon.eot?#iefix-n2bcf6') format('embedded-opentype'),url('icomoon.woff?-n2bcf6') format('woff'),url('icomoon.ttf?-n2bcf6') format('truetype'),url('icomoon.svg?-n2bcf6#icomoon') format('svg');font-weight:normal;font-style:normal;}

 

 


طراحی چت روم


بازدید : 7519 | تاریخ : شنبه 28 / 11 / 1393 ساعت : 16:54 |
نظرات
کوچول چت
کوچول چت در تاریخ 1393/12/15/5 و 18:56 گفته :
سلام عزیز ممنون بابت پستی که گذاشتی اما اگه میشه این مشکل چپ چین راست چین رو بیشتر توضیح بدین یا بگین کد رو کجا باید بزاریم ممنون میشم
موفق باشید
ali
ali در تاریخ 1393/12/6/3 و 21:58 گفته :
میشه بگین مشکل چپپین راست چین را کجا بندازم
برای دیدن نظرات بیشتر روی شماره صفحات در زیر کلیک کنید
نام
آدرس ایمیل
وب سایت/بلاگ
:) :( ;) :D
;)) :X :? :P
:* =(( :O };-
:B /:) =DD :S
-) :-(( :-| :-))
نظر خصوصی

 کد را وارد نمایید:

آپلود عکس دلخواه: