PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : اموزش افکت دادن چرخش به تصاویر



Amir Lord
2011/11/27, 01:05 PM
درود

من این اموزش گزاشته بودم اما ناقص بود و حذفش کردم حالا این اموزش جدید و اموزش قرار دادن ان در وی بی و وردپرس مینویسم براتون

خوب در این کد های css این تگ ها وجود دارد


scale
: بزرگ يا كوچك كردن تصوير

rotate : چرخاندن تصوير
translate : جابجا كردن تصوير
skew : كج و مورب كردن تصوير

خوب میریم سراغ اموزش کد های ما ایناهاست که این کد هارو برای هر cms باید انتهای فایل css قالبتون بذارید تا افکت دار بشه و تمام عکس هایی که در در css وجود ندارد افکت دار میشن




نمونه آنلاین (http://pershiandon.com/Img/charkhesh.html)



کد ها





img:hover {
transform:
rotate(1deg)
scale(1, 1);




/* for firefox, safari, chrome, etc. */
-webkit-transform:
rotate(1deg)
scale(1, 1);
-moz-transform:
rotate(1deg)
scale(1,1);




/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=2, mirror=1);




/* opera */
-o-transform:
rotate(1eg)
scale(1, 1);
box-shadow:#b2b2b2 0 0 7px;
-moz-box-shadow:#b2b2b2 0 0 7px;
-webkit-box-shadow:#b2b2b2 0 0 7px;


}



خوب برای قرار دادن در وی بی

admin cp >>> استایل ها و قالب ها >>> جستجو در قالب ها >>> postbit_legacy رو جستجو کنید .

به دنبال این بگردید


{vb:raw post.message}


<div class="scale"> {vb:raw post.message} </div>

و بعد دنبال postbit.css بگردید

کد زیر رو بعد از /*post bit*/ قرار دهید.




.scale img:hover {
transform:
rotate(1deg)
scale(1, 1);




/* for firefox, safari, chrome, etc. */
-webkit-transform:
rotate(1deg)
scale(1, 1);
-moz-transform:
rotate(1deg)
scale(1,1);




/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=2, mirror=1);




/* opera */
-o-transform:
rotate(1eg)
scale(1, 1);
box-shadow:#b2b2b2 0 0 7px;
-moz-box-shadow:#b2b2b2 0 0 7px;
-webkit-box-shadow:#b2b2b2 0 0 7px;


}



قرار دهید و حالا به پست ها بروید و لذت بروید
اگر سوالی بود بفرمایید و چند اموزش دیگر هم برای افکت در عکس هست که قرار میدم.

Amir
2011/11/27, 01:30 PM
تائید شد.

HamidOffline
2011/11/27, 02:02 PM
ما که نگرفتیم چی شد
میشه دقیقتر توضیح بدید؟

Dastyar
2011/11/27, 02:29 PM
من که نفهمیدم چیو باید کجا کپی کنم!

Amir Lord
2011/11/27, 02:33 PM
برای قرار دادن در وی بی

admin cp >>> استایل ها و قالب ها >>> جستجو در قالب ها >>> postbit_legacy رو جستجو کنید .

به دنبال این بگردید


{vb:raw post.message}


{vb:raw post.message}


و بعد دنبال postbit.css بگردید

کد زیر رو بعد از /*post bit*/ قرار دهید.




.scale img:hover {
transform:
rotate(1deg)
scale(1, 1);




/* for firefox, safari, chrome, etc. */
-webkit-transform:
rotate(1deg)
scale(1, 1);
-moz-transform:
rotate(1deg)
scale(1,1);




/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=2, mirror=1);




/* opera */
-o-transform:
rotate(1eg)
scale(1, 1);
box-shadow:#b2b2b2 0 0 7px;
-moz-box-shadow:#b2b2b2 0 0 7px;
-webkit-box-shadow:#b2b2b2 0 0 7px;


}

HamidOffline
2011/11/27, 02:35 PM
[QUOTE=αмιя;152077]برای قرار دادن در وی بی

admin cp >>> استایل ها و قالب ها >>> جستجو در قالب ها >>> postbit_legacy رو جستجو کنید .

به دنبال این بگردید


{vb:raw post.message}


{vb:raw post.message}


این یعنی چی؟
منظورم اینه که اینجا رو پیدا کردم چیکارش کنم ؟

ALIREZA_2010
2011/11/27, 02:35 PM
خوب میریم سراغ اموزش کد های ما ایناهاست که این کد هارو برای هر cms باید انتهای فایل css قالبتون بذارید تا افکت دار بشه و تمام عکس هایی که در در css وجود ندارد افکت دار میشن

من این تیکه اش رو نفهمیدم، میشه بگید دقیقاً کجا؟

مرسی

pop_0098
2011/11/27, 03:24 PM
من قبلا یک کد برای کادر بندی تضاویر استفاده کردم این با اون کد که به هم نمیرزه

نمونه اش تو سایتم هست

Reza
2011/11/27, 03:27 PM
لوگو این سایت User.HostIt.Ir کدشو میشه بزارید ؟

مثلا میخام تو پست های ویبولتینم یه همچین عکسی بزارم.

Amir Lord
2011/11/27, 07:37 PM
[QUOTE=αмιя;152077]برای قرار دادن در وی بی

admin cp >>> استایل ها و قالب ها >>> جستجو در قالب ها >>> postbit_legacy رو جستجو کنید .

به دنبال این بگردید


{vb:raw post.message}


{vb:raw post.message}




این یعنی چی؟
منظورم اینه که اینجا رو پیدا کردم چیکارش کنم ؟


کد اول جسجو کنید و با کددوم عوض کنید .



من این تیکه اش رو نفهمیدم، میشه بگید دقیقاً کجا؟

مرسی

ببینید قالبتون css هاش در چه فایلی هست

90 درصد در style.css هست


من قبلا یک کد برای کادر بندی تضاویر استفاده کردم این با اون کد که به هم نمیرزه

نمونه اش تو سایتم هست

قرار بدید ایشالا کاری نمیشه اما اموزشش میذارم هم کادر وهم چرخش


لوگو این سایت User.HostIt.Ir کدشو میشه بزارید ؟

مثلا میخام تو پست های ویبولتینم یه همچین عکسی بزارم.

سعی می کنم قرار بدم براتون

nadera
2011/11/27, 08:45 PM
عالی بود... اگه بشه که یه Opacity:0.7 هم بهش اضافه شه قشنگ تر میشه (:

Nodije
2011/11/27, 08:45 PM
پاسخ: 9 (http://www.vbiran.ir/misc.php?do=whoposted&t=20197)
نمایش ها: 56

یه تشکر پای ارسالش بزنید خستگیش بریزه!

---

ممنون جالبه

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

Amir Lord
2011/11/27, 08:48 PM
حتا من یک قسمت اشتباه انجام دادید .

چون چند بار تست کردم :دی

Special_One
2011/11/27, 09:50 PM
قبلا یک آموزش دقیقا برای اینکار بود.. ولی یک مشکل بزرگ داشت.

اینکه همه ی عکس ها ؛ مثل عکس هیدر و فوتر و بنر ها و ثبت نام و... همه این شکلی میشدن که خیلی زشت میکرد ظاهر سایت رو.

آیا این مثل همون هست و یا فقط در داخل تاپیک ها رو عکس ها افکت میده؟

Amir Lord
2011/11/27, 09:59 PM
بله وجود داشت خوده بنده نوشته بودم .

بله اون مشکل بود که رفع شد :)

meysam_8070
2012/01/05, 05:10 PM
ما که نگرفتیم چی شد این دوتا کد خوب یکی هستن


{vb:raw post.message}</pre>

VBIran
2012/01/05, 05:25 PM
اگر اشتباه نکنم باید


{vb:raw post.message} رو با

http://up.vbiran.ir/images/4m3p0qipw6m00ripn570.png (http://up.vbiran.ir/)
{vb:raw post.message}
http://up.vbiran.ir/images/gr2uegkw1jq7ykrdr3xw.png (http://up.vbiran.ir/)


عوض کنید.

meysam_8070
2012/01/05, 05:27 PM
نشد این خوب همونه چه فرقی میکنه عوض کردنش

VBIran
2012/01/05, 05:31 PM
خوب چون ادیتور کد ها رو خورد !

دوباره ببینید...

AliBother
2012/01/05, 05:46 PM
اصلا همه چی رو فراموش کنید.:-"

این کد رو انتهای postbit.css اضافه کنید و تمام.


img:hover {
border: 1px solid #000000;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
}

2012/01/05, 05:54 PM
اصلا همه چی رو فراموش کنید.:-"

این کد رو انتهای postbit.css اضافه کنید و تمام.


img:hover {
border: 1px solid #000000;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
}


سلام ممنون ولی اینکارو که کردم.. هدر.. ستاره ها و هر چی بود و نبود تو سایت رو افکت میده جانم :دی

AliBother
2012/01/05, 06:03 PM
در postbit.css اضافه کنید


.ali img:hover {
border: 1px solid #000000;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
}


در لگاسی بیابید:


{vb:raw post.message}

جایگزین کنید با:



<div class="ali">

{vb:raw post.message}</div>





تست شده:دی

2012/01/05, 06:23 PM
احسنت بر علی آقا.

حالا درست شد. یه قلب مال شما :x

AliBother
2012/01/05, 06:24 PM
چاکرخاتم اینم مال تو :x

meysam_8070
2012/01/05, 10:48 PM
ابنم از طرف من داش علی :x عالی بود

Khatam
2012/01/06, 05:01 AM
چاکرخاتم اینم مال تو :x
به من چیکار داری تو باو :4:
هر جا سخن است کلا نام من میدرخشد :4:

OM!DTAK
2012/10/16, 08:15 PM
عالی بود
دوستان از این روش برای آواتار هم میشه استفاده کرد