موضوع: کادر زیبای دور تصاویر

خیلی جالب بود من یکم ویرایش کردم بهتر شد

چند مشکل داشت

یک وقتی میرفتیم روش یکم ابعاد تغییر میکرد که جالب نبود

چند پیکسل بزرگ و کوچیک میشد

و یکم رنگ نارنجی داشت به درد فرم های نمیخورد

رنگش را به طوسی کردم و رنگ پس زمینه را برداشتم تا در همه انجمن ها بدون مشکل نمایش داده بشه

چون اگر رنگ پس زمینه روشن باشه و با این پس زمینه برای کلید ها دانلود که در انجمن هست مثل انجمن پشت دکمه را به رنگی در میاورد که از کارای کد می افتد

در کل کد دوم را من تغییر دادم و نمونه زنده اش هم روی انجمن خودم هست

http://www.fileiran.com/thread4740.html

کد دوم که تغییرش دادم

کد:

.main-center2 img { background-position: center; margin:10px 4px; border:1px solid #c7c7c7; padding:10px; ######:alpha(opacity=50); opacity:0.8;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 text-align: center;
 float: center;
 box-shadow:1px 0px 3px #888; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; transition:all 0.3s ease-in; background-repeat:no-repeat; background-attachment:scroll
}
.main-center2 img:hover {
 margin:10px 4px; border:1px solid #c7c7c7; padding:10px; ######:alpha(opacity=100);
 opacity:1.0;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 text-align: center;
 float: center;
 background-repeat: no-repeat;
 background-position:   center 50%;
 box-shadow: 1px 0px 6px #888;
        -webkit-transition:all 0.3s ease-in;
 -moz-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 transition:all 0.3s ease-in     
}

بازم دستتون درد نکنه خیلی عالی بود

نوشته اصلی توسط MATADOR

دوستان یه سئوال؛ میشه کاری کرد عکسها از قبل این افکت رو مثلا با یه کادر آبی داشته باشن وقتی میری روش کم کم بشه قرمز، آخه اینجوری یه خورده عکسا جا به جا میشه، اگه میشه دوستان توضیح بدید

اینو تست کن:

کد:

@charset "utf-8";
/* CSS Document */

.main-center2 img { background-position: center; margin:8px 4px; border:1px solid #E5E5E5; padding:5px; :alpha(opacity=50);
 opacity:0.8;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 text-align: center;
 float: center;
 box-shadow:1px 0px 3px blue; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; transition:all 0.3s ease-in; background-repeat:no-repeat; background-attachment:scroll
}
.main-center2 img:hover {
 margin:8px 4px; border:1px solid #FFA994; padding:5px; :alpha(opacity=100);
 opacity:1.0;
 -moz-border-radius: 25px;
 -webkit-border-radius: 15px;
 background-color: #FFDDD5;
 text-align: center;
 float: center;
 background-repeat: no-repeat;
 background-position:   center 50%;
 box-shadow: 1px 0px 6px red;
        -webkit-transition:all 0.3s ease-in;
 -moz-transition:all 0.3s ease-in;
 -o-transition:all 0.3s ease-in;
 transition:all 0.3s ease-in     
}